/* Shared design tokens for crisisready.io/heat-risk/ and crisisready.io/heat-risk/docs/.
   Extracted 2026-07-11 from what was previously two independent, hand-synced copies
   embedded in prototype.html and heat-risk-docs.html -- a real risk, not a hypothetical
   one: the --paper-raised dark-mode fix below (2026-07-06) already had to be applied to
   fix a live bug once, and a duplicated copy would not have picked it up automatically.
   Any token change only needs to happen here now. */

:root {
  --paper: #eef2f5;
  --paper-raised: #e2e8ed;
  --ink: #12181f;
  --ink-soft: #45505c;
  --ink-mute: #6b7682;
  --line: #c9d3da;
  --atmos: #2c6e8e;
  --atmos-tint: #dfe9ee;
  /* Third distinct hue, deliberately neither the heat-severity ramp nor
     atmos (already vulnerability's color) -- forecast needed its own
     visual identity, not just "not red" (consult #7). */
  --forecast: #6a5b95;
  --forecast-tint: #ece8f5;
  /* Roadmap "shipped" badge needs its own theme-aware token, not --lc-veg
     -- that one is a fixed landcover-swatch color always paired with a
     fixed white overlay text (see the landcover bar's color table below),
     never meant to be read as foreground/border text against a themed
     surface. Reusing it there failed AA contrast in dark mode. */
  --shipped: #2f7a4d;
  --shipped-tint: #e3f0e7;
  /* Air quality is a genuinely new data category (consult #6, §2.2) --
     smog-brown/olive, deliberately distinct from every owned hue and
     validated against --amber (#f0a00a) adjacency (both are yellow-family;
     --haze is desaturated/darker-value enough to read as a different
     category, not "dim amber"). Hard rule: PM2.5 severity must NEVER ride
     the amber-to-char heat ramp -- that scale means heat and nothing else. */
  --haze: #7a6a45;
  --haze-tint: #efeadf;
  /* Added 2026-07-11 for the API docs page's source-map figure (Fig 3.1):
     --terra for land-surface rasters, --vector for vector/statistical
     sources. Validated with the dataviz palette validator against every
     other family hue in the figure's actual adjacency order (atmos, terra,
     forecast, vector, haze): worst adjacent CVD deltaE 18.9 light / 17.1
     dark, contrast >= 3:1 throughout in both modes. */
  --terra: #3a7d45;
  --vector: #a8436e;
  --amber: #f0a00a;
  --amber-tint: #fbf0da;
  --orange: #e8720c;
  --ember: #c1321a;
  --char: #7b0000;
  --surface-card: #ffffff;
  --lc-built: #2c6e8e;
  --lc-veg: #4f7a8c;
  --lc-water: #b7cbd4;
  --lc-bare: #c9d3da;
  --radius: 3px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SF Mono", "Cascadia Code", "Consolas", "Liberation Mono", "Courier New", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0a0e13;
    /* was #10151b, identical to --surface-card -- every component relying on
       paper-raised being visibly distinct from a card background (map "no
       data" fills, the region-outline silhouette, the world-locator land,
       gauge neutral segments) went invisible in dark mode. Confirmed live
       2026-07-06 from a screenshot: the Mexico City map showed only its 3
       highlighted dots, the other 1,179 colonias invisible against the card. */
    --paper-raised: #161d26;
    --ink: #e4e9ee;
    --ink-soft: #aab5c0;
    --ink-mute: #7c8794;
    --line: #232c35;
    --atmos: #6bb6da;
    --atmos-tint: #12222a;
    --forecast: #b3a3e0;
    --forecast-tint: #1e1a2c;
    --terra: #78c284;
    --vector: #e08bb4;
    --amber-tint: #2a2210;
    --surface-card: #10151b;
    /* light-mode char (#7b0000) is 1.61:1 on this surface — brightened for
       dark-mode contrast (2.33:1) while staying darker than ember, so the
       heatColor() ramp's lightness ordering stays monotone (consult #5). */
    --char: #9c2410;
    --shipped: #6fc98b;
    --shipped-tint: #16281d;
    --haze: #b3a179;
    --haze-tint: #241f15;
  }
}
:root[data-theme="dark"] {
  --paper: #0a0e13;
  --paper-raised: #161d26;
  --ink: #e4e9ee;
  --ink-soft: #aab5c0;
  --ink-mute: #7c8794;
  --line: #232c35;
  --atmos: #6bb6da;
  --atmos-tint: #12222a;
  --forecast: #b3a3e0;
  --forecast-tint: #1e1a2c;
  --terra: #78c284;
  --vector: #e08bb4;
  --amber-tint: #2a2210;
  --surface-card: #10151b;
  --char: #9c2410;
  --shipped: #6fc98b;
  --shipped-tint: #16281d;
  --haze: #b3a179;
  --haze-tint: #241f15;
}
:root[data-theme="light"] {
  --paper: #eef2f5;
  --paper-raised: #e2e8ed;
  --ink: #12181f;
  --ink-soft: #45505c;
  --ink-mute: #6b7682;
  --line: #c9d3da;
  --atmos: #2c6e8e;
  --atmos-tint: #dfe9ee;
  --forecast: #6a5b95;
  --forecast-tint: #ece8f5;
  --terra: #3a7d45;
  --vector: #a8436e;
  --amber-tint: #fbf0da;
  --surface-card: #ffffff;
  --shipped: #2f7a4d;
  --shipped-tint: #e3f0e7;
  --haze: #7a6a45;
  --haze-tint: #efeadf;
}