/* ============================================================================================
   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;
  /* 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;
}

/* ── 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;
  }
}
:root[data-theme="dark"] {
  --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"] {
  --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;
}