/* The hub's shared design tokens (UI-10 of the 2026-09-23 UI audit -- listed
 * there and never done until now). Every signed-in hub page
 * (database-worker/public/*.html) links this root-relatively:
 *   <link rel="stylesheet" href="/app/tokens.css">
 * A handful of proxied section pages do too, where their own tokens already
 * matched these values byte-for-byte (see the note above each section's own
 * stylesheet for which ones and why); root-relative still reaches this file
 * because a proxied section is always read under the hub's own origin
 * (database.lgbtqlegislation.com or team.transdatainitiative.org), the same
 * reason /app/tdi-nav.css already works the same way.
 *
 * Colour: every page used to declare this same ~26-variable block itself,
 * hand-copied and prone to exactly the drift class of bug this file exists to
 * remove (a value changed on one page and not the others). The set here is
 * the union of every token any hub page or matching section used; a page
 * that never references, say, --orgs or --sunken simply never calls
 * var(--orgs) and pays nothing for the unused declaration. Nothing below
 * changes a single colour value from what the pages already had -- this is a
 * move, not a redesign.
 *
 * Each colour is declared TWICE on purpose: the plain dark value first, then
 * the light-dark() pair. A browser without light-dark() (pre-2024) treats the
 * second declaration as invalid and keeps the first, so it still gets exactly
 * today's dark site rather than an unstyled one. :root[data-theme] pins a
 * choice by forcing color-scheme, which is what light-dark() resolves
 * against -- so there is no second palette to keep in sync, on this page or
 * any other. app/theme-init.js sets data-theme from localStorage before first
 * paint, on every page that carries this file.
 *
 * Spacing, radii and type scale: new with this file (also UI-10) -- the
 * pages above were built straight in pixels, so these are not yet threaded
 * through every one of them. They are real, used tokens (the skeleton
 * placeholders, view-transition bar, status chips and empty states this same
 * lane adds all read them), meant to be adopted by existing pages
 * incrementally rather than in one sweeping, high-risk pass across ~50 files.
 */
:root {
  color-scheme: light dark;

  /* ---- surfaces ---- */
  --bg:#0d0d0d;           --bg:light-dark(#edeef0, #0d0d0d);
  --panel:#141414;        --panel:light-dark(#fbfbfc, #141414);
  --panel2:#1a1a1a;       --panel2:light-dark(#e6e8ea, #1a1a1a);
  /* a surface sunk below --bg (well rows, code blocks): bill.html,
     legislative.html, org.html, orgs.html */
  --sunken:#0a0a0a;       --sunken:light-dark(#f4f5f6, #0a0a0a);
  --border:#2a2724;       --border:light-dark(#d5d8dc, #2a2724);
  --border-strong:#3d3833;--border-strong:light-dark(#b0b6bd, #3d3833);
  /* The edge of a control. --border-strong measured 1.7:1 against the
     page, under the 3:1 WCAG 1.4.11 asks of a control boundary, so the
     theme switch barely showed; it still draws rules and cards, where it
     is decoration. This pair clears 3:1 on bg, panel and panel2. */
  --control-border:#726b64;--control-border:light-dark(#7a838c, #726b64);

  /* ---- text ---- */
  --text:#e8e6e3;         --text:light-dark(#16181b, #e8e6e3);
  --muted:#a09c97;        --muted:light-dark(#4c535a, #a09c97);
  /* WCAG AA: the old pair measured 3.10-3.46:1 against these grounds,
     below the 4.5 needed for normal text, and it carries every .hint
     on the page. These clear 4.5 on the worst-case ground in each
     theme (panel2). */
  --faint:#86827d;        --faint:light-dark(#616971, #86827d);

  /* ---- the Ratchet palette: red / teal / gold on near-black ---- */
  /* --anti at small sizes is 3.2:1 on panel2 in dark mode. Borders and
     card accents keep --anti; text that has to be READ uses this. */
  --anti-text:#e74c3c;    --anti-text:light-dark(#a32d1d, #e74c3c);
  --anti:#c0392b;         --anti:light-dark(#a32d1d, #c0392b);
  /* legislative.html's own name for --anti-text, used as a fill's readable
     variant rather than as text-on-page in a couple of spots there */
  --anti-bright:#e74c3c;  --anti-bright:light-dark(#bd3524, #e74c3c);
  --pro:#45a19a;          --pro:light-dark(#1a6660, #45a19a);
  /* text drawn ON a --pro fill, so it flips with the fill, not the page */
  --on-pro:#08211f;       --on-pro:light-dark(#ffffff, #08211f);
  --gold:#d4a03c;         --gold:light-dark(#7d5807, #d4a03c);
  --gold-fill:#d4a03c;    --gold-fill:light-dark(#dcae4b, #d4a03c);
  --on-gold:#0d0d0d;      --on-gold:light-dark(#241a00, #0d0d0d);
  --blue:#5b8fb9;         --blue:light-dark(#356487, #5b8fb9);
  --on-blue:#0d0d0d;      --on-blue:light-dark(#ffffff, #0d0d0d);

  /* ---- section-identity hues (the chooser's card grid) ---- */
  --spend:#9b7fc4;        --spend:light-dark(#5b3f8f, #9b7fc4);
  --live:#d27aa6;         --live:light-dark(#a1356b, #d27aa6);
  /* copper: clears AA (>=4.5:1) as both the card border accent and small
     text on --panel in each theme: 6.60:1 dark-on-panel_dark, 6.50:1
     light-on-panel_light (computed, not eyeballed). */
  --nonprofit:#d18b52;    --nonprofit:light-dark(#8b4b1d, #d18b52);
  /* olive: clears AA (>=4.5:1) as both the card border accent and small
     text on every ground in each theme: 7.69:1 dark-on-panel_dark (7.26 on
     panel2), 5.91:1 light-on-panel_light (4.97 on panel2), computed. */
  --policy:#8fb35a;       --policy:light-dark(#4d6b1f, #8fb35a);
  /* indigo: clears AA (>=4.5:1) as both the card border accent and small
     text on every ground in each theme: 6.16:1 dark-on-panel2,
     6.85:1 light-on-panel2 (the worst grounds), computed. */
  --tweets:#8c93e6;       --tweets:light-dark(#3e4596, #8c93e6);
  /* organizations: a cyan clear of the teal, blue and periwinkle beside it;
     5.8:1 on the light panel, 8:1 on the dark one */
  --orgs:#52b6d4;         --orgs:light-dark(#0f6e8c, #52b6d4);

  /* ---- type ---- */
  --font-sans: "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, Consolas, monospace;
  /* Self-hosted display face for h1/h2 (POLISH lane, 2026-09-23): Fraunces,
     SIL OFL 1.1, one static weight (700) and one subset (latin) -- see
     public/fonts/fraunces/README.md for why this face and the license/
     source. The @font-face and h1/h2 rule live in app/type.css, not here
     (tokens.css is also loaded by proxied section pages that never signed
     up for a changed heading font -- see type.css's own header), but the
     token stays here so any page that links type.css need not also
     redeclare it. The face is same-origin, so CSP's existing
     `font-src 'self'` already allowed it with no policy change (see the
     comment above cspReportOnly() in database-worker/src/worker.js). Falls
     straight back to --font-sans if the file is ever missing or slow: no
     invisible-text flash (font-display: swap) and the fallback stack is
     listed right in the token, not a bare font name. */
  --font-display: "Fraunces", var(--font-sans);
  /* a type scale, in the steps the pages above already use, named so a new
     rule reaches for a step instead of another one-off px value */
  --text-2xs: 10.5px;   /* eyebrows, pills, table headings */
  --text-xs: 11.5px;    /* .hint, meta lines */
  --text-sm: 12.5px;    /* header .sub, secondary body text */
  --text-base: 14px;    /* page body copy (matches every page's body{}) */
  --text-md: 15px;      /* ledes, emphasised body copy */
  --text-lg: 17px;      /* section h1 */
  --text-xl: 19px;      /* dialog/profile h1 */
  --text-2xl: 23px;     /* stat numbers */
  --text-3xl: 26px;     /* profile hero h1 */
  --leading-tight: 1.25;
  --leading-base: 1.5;

  /* ---- spacing (a 4px rhythm; the pages above land on these steps already,
     just spelled out in px at each call site) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* ---- radii ---- */
  --radius-sm: 3px;    /* tags, small pills */
  --radius-md: 5px;    /* buttons, inputs */
  --radius-lg: 8px;    /* cards, sections */
  --radius-xl: 14px;   /* hero panels */
  --radius-pill: 999px;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* ---- cross-document view transitions (task 3 of the "snappy" lane) ----
 * Chromium-only today; an unknown at-rule is simply ignored elsewhere, so
 * this is inert (not broken) on Firefox/Safari -- no @supports needed. Both
 * the outgoing and incoming document need this rule for a same-origin
 * navigation between them to transition at all, so any page missing
 * tokens.css (litigation-worker, ads-worker -- see this file's own header)
 * just navigates plainly to or from it, which is the same graceful
 * fallback as an unsupporting browser gets.
 *
 * The shared header (.tdi-bar, app/tdi-nav.css) is given its own
 * view-transition-name there so the browser treats it as one continuous
 * element across the navigation rather than fading the whole page (itself
 * included) out and back in -- since the bar renders identically on every
 * page, that reads as the header staying put while only the content below
 * it changes. The root cross-fade is trimmed to a short, snappy duration
 * rather than the browser's own default.
 */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.15s;
}
/* Reduced motion: neutralize every view-transition pseudo-element's
 * animation rather than removing @view-transition itself -- the navigation
 * still completes instantly, with no cross-fade or movement, exactly what
 * the setting asks for. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}