/* tokens.css - the whole palette and scale, and the only file allowed to contain a
   literal colour value. Loaded first; every other stylesheet reads these through var().
   Three blocks: the light default, an explicit [data-theme="dark"] override for the
   setting, and the same values under prefers-color-scheme for the "auto" theme. */

:root {
  color-scheme: light dark;

  --font-ui: 'Manrope', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Space Grotesk', 'Manrope', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-pill: 999px;
  --dur: 180ms; --ease: cubic-bezier(.2, .8, .3, 1);

  --bg:            hsl(210 38% 97%);
  --bg-deep:       hsl(212 40% 93%);
  --surface:       hsl(0 0% 100% / .82);
  --surface-solid: hsl(210 40% 99%);
  --surface-2:     hsl(211 36% 95%);
  --border:        hsl(212 24% 84%);
  --border-strong: hsl(212 22% 70%);

  --text:          hsl(214 38% 16%);
  --text-muted:    hsl(214 16% 40%);
  --text-faint:    hsl(214 16% 45%);

  --accent:        hsl(199 88% 33%);
  --accent-hover:  hsl(199 88% 26%);
  --accent-soft:   hsl(199 88% 38% / .12);
  --accent-text:   hsl(0 0% 100%);
  --focus:         hsl(199 92% 38%);

  --day:           hsl(32 90% 44%);
  --night:         hsl(252 62% 52%);
  --warn:          hsl(36 84% 28%);
  --warn-soft:     hsl(38 92% 52% / .16);
  --danger:        hsl(357 62% 42%);
  --danger-soft:   hsl(357 72% 52% / .12);

  /* Planner bands. Data colours, not interactive ones - the single accent hue stays
     reserved for controls. Every pair is checked for AA against its own background. */
  --band-night-bg:   hsl(220 30% 26%);
  --band-night-fg:   hsl(210 30% 92%);
  --band-morning-bg: hsl(212 28% 90%);
  --band-morning-fg: hsl(214 34% 24%);
  --band-work-bg:    hsl(162 48% 80%);
  --band-work-fg:    hsl(166 62% 16%);
  --band-evening-bg: hsl(34 84% 82%);
  --band-evening-fg: hsl(26 72% 20%);

  --chart-band:    hsl(28 88% 55% / .15);
  --chart-max:     hsl(24 82% 42%);
  --chart-min:     hsl(205 76% 38%);
  --chart-bar:     hsl(198 58% 52% / .55);
  --chart-grid:    hsl(212 24% 84%);

  --aqi-good:      hsl(152 55% 30%);
  --aqi-fair:      hsl(88 55% 26%);
  --aqi-moderate:  hsl(45 80% 26%);
  --aqi-poor:      hsl(24 78% 36%);
  --aqi-very-poor: hsl(0 66% 40%);
  --aqi-extreme:   hsl(320 55% 34%);

  --shadow-sm: 0 1px 2px hsl(214 40% 20% / .07), 0 2px 8px hsl(214 40% 20% / .05);
  --shadow-md: 0 2px 6px hsl(214 40% 20% / .08), 0 12px 28px hsl(214 40% 20% / .09);

  --grad-dawn:  linear-gradient(150deg, hsl(28 92% 62% / .20), hsl(266 70% 62% / .12));
  --grad-day:   linear-gradient(150deg, hsl(38 96% 58% / .18), hsl(198 90% 58% / .10));
  --grad-dusk:  linear-gradient(150deg, hsl(18 88% 56% / .20), hsl(248 62% 56% / .16));
  --grad-night: linear-gradient(150deg, hsl(248 64% 56% / .18), hsl(212 60% 40% / .10));
}

:root[data-theme="dark"] {
  --bg:            hsl(219 42% 8%);
  --bg-deep:       hsl(220 44% 6%);
  --surface:       hsl(216 34% 15% / .78);
  --surface-solid: hsl(216 34% 14%);
  --surface-2:     hsl(216 30% 19%);
  --border:        hsl(214 24% 26%);
  --border-strong: hsl(214 20% 40%);

  --text:          hsl(210 36% 94%);
  --text-muted:    hsl(212 18% 72%);
  --text-faint:    hsl(212 14% 58%);

  --accent:        hsl(197 90% 62%);
  --accent-hover:  hsl(197 92% 72%);
  --accent-soft:   hsl(197 90% 60% / .16);
  --accent-text:   hsl(219 48% 9%);
  --focus:         hsl(197 92% 66%);

  --day:           hsl(36 92% 64%);
  --night:         hsl(255 80% 78%);
  --warn:          hsl(40 92% 70%);
  --warn-soft:     hsl(40 92% 60% / .14);
  --danger:        hsl(357 84% 74%);
  --danger-soft:   hsl(357 84% 62% / .14);

  --band-night-bg:   hsl(220 34% 15%);
  --band-night-fg:   hsl(212 20% 66%);
  --band-morning-bg: hsl(216 26% 27%);
  --band-morning-fg: hsl(210 26% 84%);
  --band-work-bg:    hsl(164 40% 26%);
  --band-work-fg:    hsl(156 58% 86%);
  --band-evening-bg: hsl(28 44% 29%);
  --band-evening-fg: hsl(34 78% 86%);

  --chart-band:    hsl(30 86% 62% / .16);
  --chart-max:     hsl(30 92% 66%);
  --chart-min:     hsl(200 88% 66%);
  --chart-bar:     hsl(198 66% 56% / .5);
  --chart-grid:    hsl(214 24% 28%);

  --aqi-good:      hsl(152 60% 62%);
  --aqi-fair:      hsl(88 55% 62%);
  --aqi-moderate:  hsl(45 85% 62%);
  --aqi-poor:      hsl(24 88% 66%);
  --aqi-very-poor: hsl(0 80% 70%);
  --aqi-extreme:   hsl(320 70% 74%);

  --shadow-sm: 0 1px 2px hsl(220 60% 2% / .5), 0 2px 8px hsl(220 60% 2% / .35);
  --shadow-md: 0 2px 8px hsl(220 60% 2% / .55), 0 14px 32px hsl(220 60% 2% / .45);

  --grad-dawn:  linear-gradient(150deg, hsl(26 88% 58% / .22), hsl(264 70% 58% / .20));
  --grad-day:   linear-gradient(150deg, hsl(38 92% 56% / .16), hsl(198 88% 56% / .14));
  --grad-dusk:  linear-gradient(150deg, hsl(16 84% 54% / .22), hsl(250 64% 56% / .24));
  --grad-night: linear-gradient(150deg, hsl(250 66% 58% / .22), hsl(212 64% 38% / .16));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            hsl(219 42% 8%);
    --bg-deep:       hsl(220 44% 6%);
    --surface:       hsl(216 34% 15% / .78);
    --surface-solid: hsl(216 34% 14%);
    --surface-2:     hsl(216 30% 19%);
    --border:        hsl(214 24% 26%);
    --border-strong: hsl(214 20% 40%);

    --text:          hsl(210 36% 94%);
    --text-muted:    hsl(212 18% 72%);
    --text-faint:    hsl(212 14% 58%);

    --accent:        hsl(197 90% 62%);
    --accent-hover:  hsl(197 92% 72%);
    --accent-soft:   hsl(197 90% 60% / .16);
    --accent-text:   hsl(219 48% 9%);
    --focus:         hsl(197 92% 66%);

    --day:           hsl(36 92% 64%);
    --night:         hsl(255 80% 78%);
    --warn:          hsl(40 92% 70%);
    --warn-soft:     hsl(40 92% 60% / .14);
    --danger:        hsl(357 84% 74%);
    --danger-soft:   hsl(357 84% 62% / .14);

    --band-night-bg:   hsl(220 34% 15%);
    --band-night-fg:   hsl(212 20% 66%);
    --band-morning-bg: hsl(216 26% 27%);
    --band-morning-fg: hsl(210 26% 84%);
    --band-work-bg:    hsl(164 40% 26%);
    --band-work-fg:    hsl(156 58% 86%);
    --band-evening-bg: hsl(28 44% 29%);
    --band-evening-fg: hsl(34 78% 86%);

    --chart-band:    hsl(30 86% 62% / .16);
    --chart-max:     hsl(30 92% 66%);
    --chart-min:     hsl(200 88% 66%);
    --chart-bar:     hsl(198 66% 56% / .5);
    --chart-grid:    hsl(214 24% 28%);

    --aqi-good:      hsl(152 60% 62%);
    --aqi-fair:      hsl(88 55% 62%);
    --aqi-moderate:  hsl(45 85% 62%);
    --aqi-poor:      hsl(24 88% 66%);
    --aqi-very-poor: hsl(0 80% 70%);
    --aqi-extreme:   hsl(320 70% 74%);

    --shadow-sm: 0 1px 2px hsl(220 60% 2% / .5), 0 2px 8px hsl(220 60% 2% / .35);
    --shadow-md: 0 2px 8px hsl(220 60% 2% / .55), 0 14px 32px hsl(220 60% 2% / .45);

    --grad-dawn:  linear-gradient(150deg, hsl(26 88% 58% / .22), hsl(264 70% 58% / .20));
    --grad-day:   linear-gradient(150deg, hsl(38 92% 56% / .16), hsl(198 88% 56% / .14));
    --grad-dusk:  linear-gradient(150deg, hsl(16 84% 54% / .22), hsl(250 64% 56% / .24));
    --grad-night: linear-gradient(150deg, hsl(250 66% 58% / .22), hsl(212 64% 38% / .16));
  }
}