/* Theme tokens: colors for dark (default) and light modes.
   Applied variables are consumed by base/components/pages CSS.
*/

:root{
  /* Prefer both schemes to let UA render form controls correctly */
  color-scheme: dark light;

  /* Dark theme base (default) */
  --bg-color-dark: #0d0d1a;
  --bg-secondary-dark: #1a1a2e;
  --text-color-dark: #c0c0ff;

  --accent-color-primary-dark: #00f0ff; /* Neon Cyan */
  --accent-color-secondary-dark: #ff00ff; /* Neon Magenta */
  --accent-color-glow-dark: rgba(0, 240, 255, 0.45);

  --border-color-dark: rgba(0, 240, 255, 0.28);
  --header-bg-dark: rgba(13, 13, 26, 0.85);
  --footer-bg-dark: #101020;

  /* Light theme base */
  --bg-color-light: #e8e8f5;
  --bg-secondary-light: #ffffff;
  --text-color-light: #1a1a2e;

  --accent-color-primary-light: #7f00ff; /* Purple */
  --accent-color-secondary-light: #007bff; /* Bright Blue */
  --accent-color-glow-light: rgba(127, 0, 255, 0.40);

  --border-color-light: rgba(127, 0, 255, 0.28);
  --header-bg-light: rgba(232, 232, 245, 0.9);
  --footer-bg-light: #dcdcf0;

  /* RGB helpers (static) */
  --bg-color-dark-rgb: 13, 13, 26;
  --bg-color-light-rgb: 232, 232, 245;

  --accent-color-primary-dark-rgb: 0, 240, 255;
  --accent-color-secondary-dark-rgb: 255, 0, 255;

  --accent-color-primary-light-rgb: 127, 0, 255;
  --accent-color-secondary-light-rgb: 0, 123, 255;

  --text-color-dark-rgb: 192, 192, 255;  /* #c0c0ff */
  --text-color-light-rgb: 26, 26, 46;    /* #1a1a2e */

  /* Applied tokens (default to dark) */
  --bg-color: var(--bg-color-dark);
  --bg-secondary: var(--bg-secondary-dark);
  --text-color: var(--text-color-dark);

  --accent-primary: var(--accent-color-primary-dark);
  --accent-secondary: var(--accent-color-secondary-dark);
  --accent-glow: var(--accent-color-glow-dark);

  --accent-primary-rgb: var(--accent-color-primary-dark-rgb);
  --accent-secondary-rgb: var(--accent-color-secondary-dark-rgb);

  --border-color: var(--border-color-dark);
  --header-bg: var(--header-bg-dark);
  --footer-bg: var(--footer-bg-dark);

  /* For progress bars or overlays that need a generic text rgb */
  --text-color-rgb: var(--text-color-light-rgb); /* used for light-on-dark mixes */
}

/* Light mode overrides */
body.light-mode{
  color-scheme: light;

  --bg-color: var(--bg-color-light);
  --bg-secondary: var(--bg-secondary-light);
  --text-color: var(--text-color-light);

  --accent-primary: var(--accent-color-primary-light);
  --accent-secondary: var(--accent-color-secondary-light);
  --accent-glow: var(--accent-color-glow-light);

  --accent-primary-rgb: var(--accent-color-primary-light-rgb);
  --accent-secondary-rgb: var(--accent-color-secondary-light-rgb);

  --border-color: var(--border-color-light);
  --header-bg: var(--header-bg-light);
  --footer-bg: var(--footer-bg-light);

  --text-color-rgb: var(--text-color-light-rgb);
}

/* Optional subtle elevation/shadows tuned per theme */
:root{
  --shadow-1: 0 5px 18px rgba(0,0,0,.12);
  --shadow-2: 0 12px 28px rgba(0,0,0,.18);
}
body.light-mode{
  --shadow-1: 0 5px 18px rgba(0,0,0,.08);
  --shadow-2: 0 12px 28px rgba(0,0,0,.12);
}

/* Smooth theme transitions (keep performant) */
html, body, #main-header, #main-footer{
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}