/* EZ Quiz UI 2025 Phase 1 tokens
   Neutral-first palette with one accent. Dark mode overrides included.
   Variables only. No component styling.
*/
:root {
  /* Type */
  --fs-h1: 32px;
  --fs-h2: 20px;
  --fs-body: 16px;
  --fs-label: 14px;
  --fs-micro: 12px;

  /* Radius */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Spacing */
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-32: 32px;
  --s-48: 48px;
  --s-64: 64px;

  /* Elevation */
  --elev-1: 0 2px 10px rgba(0,0,0,.45);
  --elev-2: 0 12px 42px rgba(0,0,0,.6);

  /* Focus ring color for keyboard only (used in later phases) */
  --ring: var(--accent);

  /* Theme palettes (shared across explicit + fallback selectors) */
  --theme-dark-surface-0: oklch(0.16 0.02 250);
  --theme-dark-surface-1: oklch(0.18 0.02 250);
  --theme-dark-surface-2: oklch(0.20 0.02 250);
  --theme-dark-text:      oklch(0.92 0.02 250);
  --theme-dark-muted:     oklch(0.72 0.02 250);
  --theme-dark-hairline:  color-mix(in oklab, var(--theme-dark-text) 12%, var(--theme-dark-surface-0));
  --theme-dark-accent:    oklch(0.76 0.22 250);
  --theme-dark-contrast:  black;
  --theme-dark-elev-1: 0 2px 10px rgba(0,0,0,.45);
  --theme-dark-elev-2: 0 12px 42px rgba(0,0,0,.6);

  --theme-light-surface-0: oklch(0.98 0.01 250);
  --theme-light-surface-1: oklch(0.97 0.01 250);
  --theme-light-surface-2: oklch(0.95 0.01 250);
  --theme-light-text:      oklch(0.23 0.03 250);
  --theme-light-muted:     oklch(0.45 0.02 250);
  --theme-light-hairline:  color-mix(in oklab, var(--theme-light-text) 12%, var(--theme-light-surface-0));
  --theme-light-accent:    oklch(0.64 0.18 250);
  --theme-light-contrast:  white;
  --theme-light-elev-1: 0 2px 8px rgba(0,0,0,.08);
  --theme-light-elev-2: 0 10px 36px rgba(0,0,0,.16);

  /* Default to dark theme until data-theme applies */
  color-scheme: dark;
  --theme-surface-0: var(--theme-dark-surface-0);
  --theme-surface-1: var(--theme-dark-surface-1);
  --theme-surface-2: var(--theme-dark-surface-2);
  --theme-text:      var(--theme-dark-text);
  --theme-muted:     var(--theme-dark-muted);
  --theme-hairline:  var(--theme-dark-hairline);
  --theme-accent:    var(--theme-dark-accent);
  --theme-accent-contrast: var(--theme-dark-contrast);
  --theme-elev-1: var(--theme-dark-elev-1);
  --theme-elev-2: var(--theme-dark-elev-2);

  /* Public tokens consume the currently active theme aliases */
  --surface-0: var(--theme-surface-0);
  --surface-1: var(--theme-surface-1);
  --surface-2: var(--theme-surface-2);
  --text:      var(--theme-text);
  --muted:     var(--theme-muted);
  --hairline:  var(--theme-hairline);
  --accent:    var(--theme-accent);
  --accent-contrast: var(--theme-accent-contrast);
  --elev-1: var(--theme-elev-1);
  --elev-2: var(--theme-elev-2);
}

:root[data-theme="light"] {
  color-scheme: light;
  --theme-surface-0: var(--theme-light-surface-0);
  --theme-surface-1: var(--theme-light-surface-1);
  --theme-surface-2: var(--theme-light-surface-2);
  --theme-text:      var(--theme-light-text);
  --theme-muted:     var(--theme-light-muted);
  --theme-hairline:  var(--theme-light-hairline);
  --theme-accent:    var(--theme-light-accent);
  --theme-accent-contrast: var(--theme-light-contrast);
  --theme-elev-1: var(--theme-light-elev-1);
  --theme-elev-2: var(--theme-light-elev-2);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --theme-surface-0: var(--theme-dark-surface-0);
  --theme-surface-1: var(--theme-dark-surface-1);
  --theme-surface-2: var(--theme-dark-surface-2);
  --theme-text:      var(--theme-dark-text);
  --theme-muted:     var(--theme-dark-muted);
  --theme-hairline:  var(--theme-dark-hairline);
  --theme-accent:    var(--theme-dark-accent);
  --theme-accent-contrast: var(--theme-dark-contrast);
  --theme-elev-1: var(--theme-dark-elev-1);
  --theme-elev-2: var(--theme-dark-elev-2);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --theme-surface-0: var(--theme-light-surface-0);
    --theme-surface-1: var(--theme-light-surface-1);
    --theme-surface-2: var(--theme-light-surface-2);
    --theme-text:      var(--theme-light-text);
    --theme-muted:     var(--theme-light-muted);
    --theme-hairline:  var(--theme-light-hairline);
    --theme-accent:    var(--theme-light-accent);
    --theme-accent-contrast: var(--theme-light-contrast);
    --theme-elev-1: var(--theme-light-elev-1);
    --theme-elev-2: var(--theme-light-elev-2);
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --theme-surface-0: var(--theme-dark-surface-0);
    --theme-surface-1: var(--theme-dark-surface-1);
    --theme-surface-2: var(--theme-dark-surface-2);
    --theme-text:      var(--theme-dark-text);
    --theme-muted:     var(--theme-dark-muted);
    --theme-hairline:  var(--theme-dark-hairline);
    --theme-accent:    var(--theme-dark-accent);
    --theme-accent-contrast: var(--theme-dark-contrast);
    --theme-elev-1: var(--theme-dark-elev-1);
    --theme-elev-2: var(--theme-dark-elev-2);
  }
}