/* ==========================================================================
   Design tokens — "alpine instrument"
   --------------------------------------------------------------------------
   Direction: a field instrument, not a dashboard template. Cold slate ground,
   warm rock accents, and a single perceptually-ordered ramp for conditions so
   the map reads as light emerging from dark rather than a red/green traffic
   jam. The previous version used hsl(0..120) which is both the least
   colour-blind-safe choice available and visually flat in aggregate — on a
   normal August day the whole continent rendered as one red mass.

   Dark is the primary art direction: the conditions ramp is built on luminance,
   so bright = good only reads correctly against a dark ground. The light theme
   inverts the ground and re-anchors the ramp rather than reusing it.
   ========================================================================== */

:root {
  color-scheme: dark light;

  /* ── conditions ramp ────────────────────────────────────────────────────
     Monotonic in lightness AND hue (deep indigo → teal → chartreuse → warm
     sand), so it survives greyscale printing and every form of colour
     blindness. Good conditions literally glow. */
  --cond-out:   oklch(42% 0.085 275);
  --cond-poor:  oklch(52% 0.105 235);
  --cond-mixed: oklch(66% 0.105 195);
  --cond-good:  oklch(80% 0.145 145);
  --cond-prime: oklch(89% 0.165 105);
  --cond-none:  oklch(45% 0.008 260);

  /* ── ground ─────────────────────────────────────────────────────────── */
  --bg-deep:    oklch(17% 0.017 265);
  --bg-base:    oklch(21% 0.019 265);
  --bg-raised:  oklch(25% 0.021 265);
  --bg-overlay: oklch(23% 0.020 265 / 0.86);
  --bg-inset:   oklch(15% 0.015 265);

  --line-soft:  oklch(100% 0 0 / 0.07);
  --line-mid:   oklch(100% 0 0 / 0.13);
  --line-loud:  oklch(100% 0 0 / 0.24);

  --ink-loud:   oklch(97% 0.004 265);
  --ink-base:   oklch(87% 0.008 265);
  --ink-muted:  oklch(68% 0.012 265);
  --ink-faint:  oklch(55% 0.014 265);

  /* Warm accent, borrowed from sun-bleached limestone. Used sparingly: it is
     the interactive colour, never a decorative one. */
  --accent:       oklch(80% 0.135 68);
  --accent-quiet: oklch(80% 0.135 68 / 0.14);
  --accent-ink:   oklch(20% 0.03 68);

  --danger: oklch(68% 0.175 25);
  --warn:   oklch(80% 0.135 82);
  --ok:     oklch(78% 0.14 155);

  /* ── type ───────────────────────────────────────────────────────────────
     Two-family strategy with no network cost: the platform UI face for prose
     and the platform mono for every number. Tabular figures matter here —
     scores and temperatures sit in columns that must not jitter as they
     update. */
  --font-ui: ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI Variable",
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono",
               Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem;
  --text-xs:  0.75rem;
  --text-sm:  0.8125rem;
  --text-md:  0.9375rem;
  --text-lg:  1.125rem;
  --text-xl:  1.5rem;
  --text-2xl: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  --text-score: clamp(2.75rem, 2rem + 3vw, 4rem);

  --tracking-tight: -0.02em;
  --tracking-wide:  0.09em;

  /* ── space & shape ──────────────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* Deliberately varied radii: chips are pill-shaped, panels are soft, the
     map surface is square. Uniform radius everywhere is what makes UI read as
     a template. */
  --radius-chip: 999px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --shadow-raise: 0 1px 2px oklch(0% 0 0 / 0.4), 0 8px 24px -8px oklch(0% 0 0 / 0.5);
  --shadow-float: 0 2px 4px oklch(0% 0 0 / 0.3), 0 24px 56px -16px oklch(0% 0 0 / 0.65);
  --glow-accent: 0 0 0 1px var(--accent), 0 0 20px -4px oklch(80% 0.135 68 / 0.45);

  --duration-fast: 130ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);

  --rail-width: 25rem;
  --topbar-height: 4rem;

  --map-tiles-filter: none;
}

/* ── light theme ─────────────────────────────────────────────────────────
   Not a tint of the dark theme. Warm paper ground, and the ramp is re-anchored
   so that *saturation and depth* carry "good" instead of luminance — on white,
   a pale chartreuse would vanish. */
:root[data-theme="light"] {
  color-scheme: light;

  --cond-out:   oklch(58% 0.105 285);
  --cond-poor:  oklch(58% 0.125 245);
  --cond-mixed: oklch(62% 0.115 195);
  --cond-good:  oklch(58% 0.155 148);
  --cond-prime: oklch(56% 0.165 118);
  --cond-none:  oklch(78% 0.006 90);

  --bg-deep:    oklch(95% 0.006 85);
  --bg-base:    oklch(98% 0.005 85);
  --bg-raised:  oklch(100% 0 0);
  --bg-overlay: oklch(100% 0 0 / 0.90);
  --bg-inset:   oklch(96% 0.007 85);

  --line-soft:  oklch(20% 0.02 265 / 0.09);
  --line-mid:   oklch(20% 0.02 265 / 0.16);
  --line-loud:  oklch(20% 0.02 265 / 0.30);

  --ink-loud:   oklch(24% 0.018 265);
  --ink-base:   oklch(34% 0.016 265);
  --ink-muted:  oklch(50% 0.014 265);
  --ink-faint:  oklch(62% 0.012 265);

  --accent:       oklch(58% 0.145 52);
  --accent-quiet: oklch(58% 0.145 52 / 0.12);
  --accent-ink:   oklch(99% 0.01 60);

  --danger: oklch(53% 0.19 27);
  --warn:   oklch(60% 0.14 70);
  --ok:     oklch(52% 0.14 152);

  --shadow-raise: 0 1px 2px oklch(30% 0.02 265 / 0.10), 0 8px 20px -10px oklch(30% 0.02 265 / 0.18);
  --shadow-float: 0 2px 6px oklch(30% 0.02 265 / 0.10), 0 24px 48px -18px oklch(30% 0.02 265 / 0.28);
  --glow-accent: 0 0 0 1px var(--accent), 0 0 16px -6px oklch(58% 0.145 52 / 0.4);
}

/* Respect the OS preference when the user has not chosen explicitly. The
   data-theme attribute always wins in both directions. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --cond-out:   oklch(58% 0.105 285);
    --cond-poor:  oklch(58% 0.125 245);
    --cond-mixed: oklch(62% 0.115 195);
    --cond-good:  oklch(58% 0.155 148);
    --cond-prime: oklch(56% 0.165 118);
    --cond-none:  oklch(78% 0.006 90);

    --bg-deep:    oklch(95% 0.006 85);
    --bg-base:    oklch(98% 0.005 85);
    --bg-raised:  oklch(100% 0 0);
    --bg-overlay: oklch(100% 0 0 / 0.90);
    --bg-inset:   oklch(96% 0.007 85);

    --line-soft:  oklch(20% 0.02 265 / 0.09);
    --line-mid:   oklch(20% 0.02 265 / 0.16);
    --line-loud:  oklch(20% 0.02 265 / 0.30);

    --ink-loud:   oklch(24% 0.018 265);
    --ink-base:   oklch(34% 0.016 265);
    --ink-muted:  oklch(50% 0.014 265);
    --ink-faint:  oklch(62% 0.012 265);

    --accent:       oklch(58% 0.145 52);
    --accent-quiet: oklch(58% 0.145 52 / 0.12);
    --accent-ink:   oklch(99% 0.01 60);

    --danger: oklch(53% 0.19 27);
    --warn:   oklch(60% 0.14 70);
    --ok:     oklch(52% 0.14 152);

    --shadow-raise: 0 1px 2px oklch(30% 0.02 265 / 0.10), 0 8px 20px -10px oklch(30% 0.02 265 / 0.18);
    --shadow-float: 0 2px 6px oklch(30% 0.02 265 / 0.10), 0 24px 48px -18px oklch(30% 0.02 265 / 0.28);
    --glow-accent: 0 0 0 1px var(--accent), 0 0 16px -6px oklch(58% 0.145 52 / 0.4);
  }
}