/* ============================================================================================
   tokens.css — THE SINGLE SOURCE OF COLOUR TRUTH for the whole Quietlist site.

   Every colour the site uses is defined HERE, once (light + OS-dark + explicit [data-theme]).
   Nothing else — not styles.css, not a generator's inline <style>, not a `style="…"` attribute,
   not a self-contained page — may define a colour LITERAL. Everything references these via
   var(--token). This invariant is ENFORCED by the colour-literal lint in `make check`
   (tools/lint_colours). The only allowed literals outside this file are the map's functional
   status markers (Leaflet needs literal hex), which the lint allowlists explicitly.

   Consumed by: styles.css (@import at its top → the whole shared-sheet long-tail) and the
   self-contained pages (homepage / about / for-sellers / listings link this file directly).
   Ported verbatim from the B13 design system (docs/design/design-system.md).
   ============================================================================================ */
:root {
  /* ── B13 teal palette (light) ── */
  --paper: #F5F6F3;
  --ink: #191C1A;
  --ink-soft: #333834;
  --muted: #6A6F6B;
  --accent: #166B54;
  --accent-soft: #2C8A6F;
  --hair: #E1E3DD;
  --tint: #E8F1EC;
  --tint-line: #C7DFD3;
  --shadow-color: rgba(20, 40, 32, .08);
  --chart-track: #E4E7E1;   /* live-bar / progress track fill (homepage + blog charts) */
  --qr-bg: #ffffff;   /* FIXED white — a scan QR is black-on-transparent and MUST keep a white
                         backing to stay legible/scannable; deliberately NOT re-themed in dark
                         mode (unlike every other surface) or the black modules vanish on dark. */
  /* Semantic status tokens (themed) — green=good, amber=warn, red=danger. Separate from the
     brand accent so status reads correctly and dark mode flips them legibly. */
  --good: #2f7a3f;
  --warn: #a8641f;
  --danger: #c0392b;
  /* Heading ink for the generated report/dossier surfaces (the old inline #163a5f navy) — a real
     token so dark mode flips it to light ink instead of unreadable navy-on-dark (seat review,
     2026-08-24). --grid-line: the .shell backdrop grid, near-invisible in dark (same review:
     the visible grid read as a dev-console, not a trust business). */
  --head: #163a5f;
  --grid-line: #E8F1EC;
  /* Text on SOLID accent/brand buttons — white in light, near-black in dark, one rule for
     every solid button so CTA text never mixes white and black within a theme. */
  --on-accent: #FFFFFF;
  /* Legacy-var bridge: aliases the old long-tail names into the B13 palette so preserved markup
     + JS still resolve, and dark mode flips them for free. --navy→ink, --navy-soft→muted,
     --bg/--surface/--surface-strong→paper, --line→hair. --shadow is a COMPLETE box-shadow value. */
  --navy: var(--ink);
  --navy-soft: var(--muted);
  --bg: var(--paper);
  --surface: var(--paper);
  --surface-strong: var(--paper);
  --line: var(--hair);
  --shadow: 0 26px 60px var(--shadow-color);
  /* Geometry + fonts (native stacks — no @font-face / CDN). */
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --serif: "Iowan Old Style", "Charter", "Palatino Linotype", Georgia, serif;
  --sans: "SF Pro Text", -apple-system, system-ui, sans-serif;
  /* Homepage map (2026-09-12): the canvas reads these through getComputedStyle, the map chrome through var().
     A pale cartographic paper with the brand teal as the only accent; the dark set keeps the same roles. */
  --map-paper: #F0F3EE;
  --map-ink: #214E3D;
  --map-soft: #365D4D;
  --map-muted: #557366;
  --map-accent: #166B54;
  --map-road: #D2DAD0;
  --map-coast: #B3C7BE;
  --map-water: #D3E2DB;
  --map-white: #FFFFFF;
  --map-cluster: #E0ECE5;
  --map-shadow: rgba(22, 65, 49, .12);
}

/* ── Light / dark contract: OS dark via prefers-color-scheme; explicit override via [data-theme]
   (the toggle stamps it and must win in both directions). Only the palette tokens flip. ── */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12150F;
    --ink: #E7E9E3;
    --ink-soft: #C3C7BF;
    --muted: #8E948C;
    --accent: #5CBE9E;
    --accent-soft: #7ED0B4;
    --hair: #282C25;
    --tint: #161E19;
    --tint-line: #2C4034;
    --shadow-color: rgba(0, 0, 0, .4);
    --chart-track: #242820;
    --good: #5FBF77;
    --warn: #D89B54;
    --danger: #E8695B;
    --head: #E7E9E3;
    --grid-line: #14170F;
    --on-accent: #08100C;
    --map-paper: #12150F;
    --map-ink: #E7E9E3;
    --map-soft: #C3C7BF;
    --map-muted: #8E948C;
    --map-accent: #5CBE9E;
    --map-road: #2A2F28;
    --map-coast: #34403A;
    --map-water: #161E19;
    --map-white: #1B2019;
    --map-cluster: #1F2A24;
    --map-shadow: rgba(0, 0, 0, .4);
  }
}
:root[data-theme="dark"] {
  --map-paper: #12150F;
  --map-ink: #E7E9E3;
  --map-soft: #C3C7BF;
  --map-muted: #8E948C;
  --map-accent: #5CBE9E;
  --map-road: #2A2F28;
  --map-coast: #34403A;
  --map-water: #161E19;
  --map-white: #1B2019;
  --map-cluster: #1F2A24;
  --map-shadow: rgba(0, 0, 0, .4);
  --head: #E7E9E3;
  --grid-line: #14170F;
  --on-accent: #08100C;
  --paper: #12150F;
  --chart-track: #242820;
  --ink: #E7E9E3;
  --ink-soft: #C3C7BF;
  --muted: #8E948C;
  --accent: #5CBE9E;
  --accent-soft: #7ED0B4;
  --hair: #282C25;
  --tint: #161E19;
  --tint-line: #2C4034;
  --shadow-color: rgba(0, 0, 0, .4);
  --good: #5FBF77;
  --warn: #D89B54;
  --danger: #E8695B;
}
:root[data-theme="light"] {
  --map-paper: #F0F3EE;
  --map-ink: #214E3D;
  --map-soft: #365D4D;
  --map-muted: #557366;
  --map-accent: #166B54;
  --map-road: #D2DAD0;
  --map-coast: #B3C7BE;
  --map-water: #D3E2DB;
  --map-white: #FFFFFF;
  --map-cluster: #E0ECE5;
  --map-shadow: rgba(22, 65, 49, .12);
  --head: #163a5f;
  --grid-line: #E8F1EC;
  --on-accent: #FFFFFF;
  --paper: #F5F6F3;
  --ink: #191C1A;
  --ink-soft: #333834;
  --muted: #6A6F6B;
  --accent: #166B54;
  --accent-soft: #2C8A6F;
  --hair: #E1E3DD;
  --tint: #E8F1EC;
  --tint-line: #C7DFD3;
  --shadow-color: rgba(20, 40, 32, .08);
  --chart-track: #E4E7E1;
  --good: #2f7a3f;
  --warn: #a8641f;
  --danger: #c0392b;
}