/* ============================================================
   tokens.css — SINGLE source of truth for design tokens.
   Any color, spacing, radius, or motion value used anywhere
   in the site is defined here. No other CSS file should
   declare a raw hex value — it must reference a token.
   ============================================================ */

:root {
  /* ── Color: surfaces (cool dark navy) ─────────────────── */
  --bg:        #0b1322;
  --surface-1: #131d33;
  --surface-2: #1b2741;
  --surface-3: #243154;

  /* ── Color: text (cool neutral) ───────────────────────── */
  --text:      #eaf0ff;
  --text-soft: #c8d2e8;
  --muted:     #8492b0;

  /* ── Color: lines ─────────────────────────────────────── */
  --line:        rgba(234, 240, 255, 0.09);
  --line-strong: rgba(234, 240, 255, 0.18);

  /* ── Color: PRIMARY (signal blue) ─────────────────────── */
  --primary:        #4f8cff;
  --primary-bright: #7aaaff;
  --primary-soft:   rgba(79, 140, 255, 0.16);
  --primary-deep:   #2e6bdc;

  /* ── Color: ACCENT (gold/yellow — sparing use only) ───── */
  --gold:        #f1c400;
  --gold-bright: #f7d44d;
  --gold-soft:   rgba(241, 196, 0, 0.16);

  /* ── Color: LOS scale (the ONLY multi-hue scale) ─────── */
  --los-a:  #10b981;
  --los-b:  #84cc16;
  --los-c:  #f59e0b;
  --los-d:  #ef4444;
  --los-e:  #dc2626;
  --los-f:  #7f1d1d;
  --los-na: #6a5d47;

  /* ── Semantic direction (delta arrows, trend pills) ──── */
  /* Aliased to LOS endpoints so the multi-hue rule isn't broken. */
  --ok:        var(--los-a);
  --ok-soft:   rgba(16, 185, 129, 0.16);
  --alert:     var(--los-d);
  --alert-soft: rgba(239, 68, 68, 0.16);

  /* ── Text on solid fills (theme-independent) ──────────── */
  --on-fill:   #ffffff;   /* text on --primary / LOS swatches */
  --on-accent: #1a1305;   /* text on --gold fills */

  /* ── Overlays / glass (THEME-FLIPPABLE) ────────────────
     These are overridden in the [data-theme="light"] block. */
  --card-grad:  linear-gradient(180deg, rgba(234, 240, 255, 0.035), rgba(234, 240, 255, 0.012));
  --hover-tint: rgba(234, 240, 255, 0.07);
  --shimmer:    rgba(234, 240, 255, 0.06);
  --shadow-pop: 0 24px 56px rgba(0, 0, 0, 0.5);
  --header-fade: linear-gradient(180deg, rgba(11, 19, 34, 0.92), rgba(11, 19, 34, 0));
  --glow-1:     rgba(227, 167, 47, 0.05);
  --glow-2:     rgba(227, 167, 47, 0.03);

  /* Chart ink — consumed by js (read via getComputedStyle). */
  --chart-grid: rgba(234, 240, 255, 0.06);
  --chart-zero: rgba(234, 240, 255, 0.12);
  --chart-line: rgba(234, 240, 255, 0.18);

  /* ── Map overlays (THEME-FLIPPABLE) ────────────────────
     Scrollytelling + state-page map surfaces. The Mapbox basemap
     style itself flips via js (mapStyleForTheme); these tokens flip
     the card / legend / tooltip glass and the choropleth scrim /
     border / label inks read by render.js + state-page.js. */
  --map-panel-grad:   linear-gradient(180deg, rgba(19, 29, 51, 0.92), rgba(19, 29, 51, 0.78));
  --map-glass:        rgba(11, 19, 34, 0.72);
  --map-glass-strong: rgba(11, 19, 34, 0.92);
  --map-glass-soft:   rgba(11, 19, 34, 0.45);
  --map-ctrl-icon-filter: invert(1) brightness(1.4);
  /* basemap layer inks (read by js via getComputedStyle) */
  --map-scrim:        #0b1322;
  --map-border:       rgba(11, 19, 34, 0.55);
  --map-hover-line:   rgba(234, 240, 255, 0.55);
  --map-point-stroke: #0b1322;
  --map-label:        #ffffff;
  --map-label-soft:   #eeeeee;
  --map-label-halo:   rgba(11, 19, 34, 0.85);

  /* ── Spacing scale ────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 36px;
  --space-7: 56px;
  --space-8: 88px;

  /* ── Radii ────────────────────────────────────────────── */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ── Typography ───────────────────────────────────────── */
  --font-display: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* ── Type scale (display via clamp() in components) ──── */
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  15px;
  --text-lg:  17px;
  --text-xl:  20px;

  /* ── Motion ───────────────────────────────────────────── */
  --ease-out-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:   180ms;
  --dur-med:    320ms;
  --dur-slow:   560ms;

  /* ── Layout ───────────────────────────────────────────── */
  --max-width: 1440px;
  --content-width: 1080px;
  --reading-width: 720px;
}

/* ============================================================
   LIGHT THEME — applied via <html data-theme="light">.
   Only the tokens that must change for a light surface are
   overridden; spacing, radii, motion, type and the LOS scale
   are theme-independent and inherited from :root.

   The scrollytelling + state-page Mapbox basemaps flip to a light
   style in js; the map-overlay glass and basemap inks below flip
   with them so the whole map reads light.
   ============================================================ */
:root[data-theme="light"] {
  /* surfaces — cool off-white */
  --bg:        #f5f8fc;
  --surface-1: #ffffff;
  --surface-2: #eef2f9;
  --surface-3: #e1e8f3;

  /* text — navy ink */
  --text:      #101a2e;
  --text-soft: #38465f;
  --muted:     #586781;

  /* lines */
  --line:        rgba(16, 26, 46, 0.10);
  --line-strong: rgba(16, 26, 46, 0.20);

  /* primary — darkened for AA contrast on white (links + text) */
  --primary:        #1f5bd1;
  --primary-bright: #1748ac;
  --primary-soft:   rgba(31, 91, 209, 0.12);
  --primary-deep:   #15388a;

  /* accent — kept as vibrant as dark mode (same values, no deepening) */
  --gold:        #f1c400;
  --gold-bright: #f7d44d;
  --gold-soft:   rgba(241, 196, 0, 0.16);

  /* direction pills — re-point to AA-safe values on light */
  --ok-soft:    rgba(16, 185, 129, 0.16);
  --alert-soft: rgba(239, 68, 68, 0.16);

  /* overlays / glass — dark ink on light */
  --card-grad:  linear-gradient(180deg, rgba(16, 26, 46, 0.045), rgba(16, 26, 46, 0.015));
  --hover-tint: rgba(16, 26, 46, 0.055);
  --shimmer:    rgba(16, 26, 46, 0.06);
  --shadow-pop: 0 24px 56px rgba(16, 26, 46, 0.16);
  --header-fade: linear-gradient(180deg, rgba(245, 248, 252, 0.94), rgba(245, 248, 252, 0));
  --glow-1:     rgba(184, 129, 15, 0.05);
  --glow-2:     rgba(184, 129, 15, 0.03);

  /* chart ink */
  --chart-grid: rgba(16, 26, 46, 0.10);
  --chart-zero: rgba(16, 26, 46, 0.18);
  --chart-line: rgba(16, 26, 46, 0.24);

  /* map overlays — light glass + light basemap inks */
  --map-panel-grad:   linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.82));
  --map-glass:        rgba(255, 255, 255, 0.82);
  --map-glass-strong: rgba(255, 255, 255, 0.95);
  --map-glass-soft:   rgba(255, 255, 255, 0.62);
  --map-ctrl-icon-filter: none;
  --map-scrim:        #ffffff;
  --map-border:       rgba(16, 26, 46, 0.22);
  --map-hover-line:   rgba(16, 26, 46, 0.55);
  --map-point-stroke: #ffffff;
  --map-label:        #101a2e;
  --map-label-soft:   #33415e;
  --map-label-halo:   rgba(255, 255, 255, 0.9);
}