/* tokens.css -- the brand layer every applet page shares: the self-hosted
   typeface and the colour / type tokens. Split out of scenario_results.css
   (2026-09-30, walk-viz) so a page that does not want the analyst sheet -- the
   Links page, links/links.css -- can load the same tokens; there is no @import
   anywhere in the templates, so each page links this file itself, BEFORE its own
   sheet: scenario_results.j2 and calibration.j2 at the bundle root, links/index.html
   in links/ (the builders copy it to both). Only the tokens and faces moved; every
   value and comment is as it was. Edit a token here and every page follows --
   run scripts/applet_style_gate.mjs before/after, as for any restyling. */

/* Brand typeface — self-hosted (applet-design rung 3, 2026-09-12).
   Overpass is bundled rather than pulled from Google Fonts: a built applet is
   routinely opened with no network (a client's file share, a laptop in a meeting
   room), and a CDN font fails there silently — the page just renders in whatever
   UI face the machine has. Bundling also makes the applet render identically on
   macOS, Windows and Linux for the first time, which is what lets a gate
   screenshot stand for what a client actually sees.
   Three weights, ~49 KB, copied by communication/_font_assets.py into fonts/
   beside this sheet. `font-weight: 500` (six sites) resolves down to 400 by CSS
   weight matching; 900 exists in the brand assets but nothing here uses it. */
@font-face {
  font-family: "Overpass";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Overpass-400.woff2") format("woff2");
}
@font-face {
  font-family: "Overpass";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Overpass-600.woff2") format("woff2");
}
@font-face {
  font-family: "Overpass";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Overpass-700.woff2") format("woff2");
}

/* Colour tokens (applet-design rung 1, 2026-09-12; neutrals re-derived on the Ives
   slate hue in rung 2). Neutral tokens are named by the grey they replaced; each now
   sits on OKLCH hue 244 at the same relative luminance (contrast ratios unchanged),
   chroma tapering from ~0.04 mid-scale to 0 at white (derivation:
   scratchpad/brand/slate_neutrals.py in the applet-design notebook). The other
   tokens still hold the pre-tokenisation literals; later rungs restyle by editing
   values here. --n-*: neutral scale named by its old hex;
   --nc-*: the cool greys of the dock; --accent*: the selected/hover family;
   --on-accent: text over the accent fill; --on-dark: text over a dark neutral. Shared by the map + calibration pages. */
:root {
  --n-11: #0a1218;
  --n-22: #19232d;
  --n-33: #253540;
  --n-44: #344656;
  --n-55: #405869;
  --n-66: #526979;
  --n-6b: #586e7e;
  --n-77: #67798b;
  --n-88: #798a9b;
  --n-99: #8b9bab;
  --n-aa: #9dacba;
  --n-bb: #afbdc8;
  --n-c4: #b8c6d1;
  --n-cc: #c0ced9;
  --n-dd: #d3dfe8;
  --n-e0: #d6e2eb;
  --n-e3: #d9e5ee;
  --n-e4: #dae6ef;
  --n-e8: #e1e9f1;
  --n-ee: #e8eff6;
  --n-f0: #eaf1f7;
  --n-f4: #eef5fb;
  --n-f5: #f0f6fb;
  --n-f7: #f3f8fc;
  --n-ff: #ffffff;
  --nc-234: #25333f;
  --nc-334: #273644;
  --nc-445: #334857;
  --nc-556: #42596c;
  --nc-667: #556a7b;
  --nc-789: #778899;
  --nc-aab: #9fadbb;
  --nc-c2: #bdcad6;
  --nc-d0: #ced9e2;
  /* Selected state (applet-design rung 4, 2026-09-12). Gold is the brand's one
     accent and it is a shape with mass, never text: a selected surface is a
     gold fill with brand ink on it (7.3:1), because gold as text or as a
     hairline on a light ground measures 1.7:1. The family is hue 85 with
     chroma held at gold's own ~0.94 share of the sRGB ceiling at each
     lightness -- R5's ground family keeps parchment/plate's ~0.60 share, and
     that gap is what stops a gold wash reading as one more pane (derivation:
     scratchpad/brand/gold_stops.py). Anything that has to be *read* rather
     than filled -- headings, emphasised labels, links, the phone menu's
     checkmark, focus rings, the spinner, the scatter's guide bands -- goes to
     brand slate or brand ink instead. Blue survives only as a calibration
     data series; brand hues are chrome, the dataviz palette is data. */
  --brand-ink: #22303b;
  --brand-slate: #3d5467;
  --gold: #edb62b;
  --gold-deep: #c79603;
  --gold-edge: #fec849;
  --gold-soft: #ffe1a4;
  --gold-soft-hover: #ffdd97;
  --gold-wash: #ffedc7;
  --gold-wash-2: #ffe5b0;
  --sel: var(--gold);
  --sel-border: var(--gold-deep);
  --sel-soft: var(--gold-soft);
  --sel-soft-hover: var(--gold-soft-hover);
  --hover: var(--gold-wash);
  --hover-2: var(--gold-wash-2);
  --label-em: var(--brand-slate);
  --focus: var(--brand-ink);
  --pop-shade-rgb: 237 182 43;
  --pos: #27ae60;
  --neg: #c0392b;
  --neg-tint: #fff5f0;
  --neg-tint-2: #ffe9dc;
  --warn-text: #7a5200;
  --warn-border: #e0c069;
  --warn-bg: #fff2cc;
  --warn-text-2: #8a4a1a;
  --warn-border-2: #e0c3a0;
  --warn-bg-2: #fbf1e7;
  --moved-bg: #fbf7ee;
  --cum-warn: #a06;
  --tint-b: #2f99a6;
  --shade-07: rgba(0, 0, 0, 0.07);
  --shade-12: rgba(0, 0, 0, .12);
  --shade-15: rgba(0,0,0,0.15);
  --shade-16: rgba(0, 0, 0, .16);
  --shade-18: rgba(0, 0, 0, 0.18);
  --shade-22: rgba(0, 0, 0, .22);
  --veil-45: rgba(255, 255, 255, 0.45);
  --veil-55: rgba(255, 255, 255, 0.55);
  --veil-62: rgba(255,255,255,0.62);
  --veil-96: rgba(255,255,255,0.96);
  /* Warm grounds (applet-design rung 3, 2026-09-12). The brand's parchment /
     plate family on OKLCH hue 85, derived by scratchpad/brand/warm_stops.py:
     --parchment and --plate are the brand hexes exactly; -raised, -band and
     -hover are stops on the same curve (C tapering to 0 at white) for a
     surface that must read above the page, for banded chrome, and for a hover
     on a band. Grounds only -- text, borders, controls and the sheet's drag
     handle stay on the cool --n-* slate scale, which is what keeps the grab
     affordance legible against a warm sheet (Taylor, 2026-09-12). */
  --parchment: #fbf3e1;
  --parchment-raised: #fdfaf2;
  --parchment-band: #f8eace;
  --parchment-hover: #f6e5c4;
  --plate: #f4e1ba;
  --ground: var(--parchment);
  --ground-raised: var(--parchment-raised);
  --ground-band: var(--parchment-band);
  --ground-band-hover: var(--parchment-hover);
  --ground-trim: var(--plate);
  --veil-ground-96: rgba(251, 243, 225, 0.96);
  --veil-ground-94: rgba(253, 250, 242, 0.94);
  --on-accent: var(--brand-ink);
  /* Typography (rung 3). --font-ui is the whole applet's face; the fallbacks are
     only reached if the bundled woff2 is missing. --lh-ui pins the leading:
     Overpass's own normal line box is 1.266em against ~1.16-1.19em for the
     platform UI fonts the applet used to borrow, so leaving it at `normal` would
     loosen every dense list by ~9%. Pinning also makes leading identical across
     platforms, which line-height:normal never was. */
  --font-ui: "Overpass", system-ui, sans-serif;
  --lh-ui: normal;
  --on-dark: #fff;
}