:root {
  /* Primary Colors */
  --primary: #000000; /* Black */
  --primary-x: #000000; /* Black */
  --primary-x-dark: #121212; /* Dark gray / almost black */
  --primary-light: #333333; /* Medium dark gray */

  /* Secondary Colors */
  --secondary: #555555; /* Neutral gray */
  --secondary-dark: #3a3a3a;
  --secondary-light: #777777;

  /* Backgrounds */
  --background-light: #ffffff; /* White background */
  --background-dark: #121212; /* Dark mode background */

  /* Transparent backgrounds */
  --bg-transp-dark: rgba(0, 0, 0, 0.5);
  --bg-transp-light: rgba(255, 255, 255, 0.3);
  --bg-transp: rgba(0, 0, 0, 0.1);
  --bglass7: rgba(0, 0, 0, 0.7);
  --bglass9: rgba(0, 0, 0, 0.9);
  --mglass5: rgba(127, 127, 127, 0.5);
  --mglass7: rgba(127, 127, 127, 0.7);
  --mglass9: rgba(127, 127, 127, 0.9);

  /* Extracted Colors / accents in grayscale */
  --dark-gray: #1e1e1e;
  --light-gray: #d9d9d9;
  --medium-gray: #888888;
  --muted-gray: #aaaaaa;

  /* Text Colors */
  --text-light: #ffffff; /* For dark backgrounds */
  --text-dark: #000000; /* For light backgrounds */

  /* Semantic colors in grayscale */
  --success: #4d4d4d; /* Dark gray for success */
  --success-dark: #333333;
  --success-light: #777777;
  --t-success: rgba(0, 0, 0, 0.3);
  --t-success-light: rgba(0, 0, 0, 0.1);
  --t-success-dark: rgba(0, 0, 0, 0.5);

  --danger: #4d4d4d; /* Dark gray for danger */
  --danger-dark: #333333;
  --danger-light: #777777;

  --warning: #888888; /* Medium gray for warning */
  --warning-dark: #555555;
  --warning-light: #aaaaaa;

  --info: #777777; /* Neutral gray for info */
  --info-dark: #555555;
  --info-light: #999999;

  --warning: rgb(255, 136, 0);

  --link: #38383d; /* Standard link color */
  --link-hover: #413b46; /* Darker purple for hover */
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --background-light: #121212;
    --background-dark: #000000;
    --text-light: #ffffff;
    --text-dark: #e0e0e0;
  }
}