/* ============================================================
   ElectioMap — /shared/tokens.css
   Custom properties ONLY. No painting selectors live in this file.
   Dark is the default (:root); light is [data-theme="light"].
   Load first, before site.css, with ?v= cache-busting.
   ============================================================ */

:root {
  /* ---- type families (one webfont) ---------------------------------- */
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* numerals come from the same family; no second webfont */
  --font-num: var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---- type scale (fluid; 390px → 1280px) --------------------------- */
  --fs-display: clamp(28px, 1.55rem + 1.9vw, 44px);  /* h1 page title      */
  --fs-h2:      clamp(18px, 1.02rem + 0.5vw, 22px);  /* section heading    */
  --fs-h3:      clamp(15px, 0.9rem  + 0.2vw, 17px);  /* card / row title   */
  --fs-lede:    clamp(16px, 0.95rem + 0.5vw, 19px);  /* summary sentence   */
  --fs-prose:   clamp(16px, 0.95rem + 0.3vw, 17px);  /* long-form body     */
  --fs-body:    15px;
  --fs-sm:      13px;                                 /* meta, captions     */
  --fs-xs:      12px;
  --fs-label:   11px;                                 /* uppercase labels   */
  --fs-num-xl:  clamp(26px, 1.4rem + 1.1vw, 34px);   /* stat value         */
  --fs-num-lg:  clamp(15px, 0.9rem + 0.25vw, 17px);  /* bar pct, seats     */

  --lh-tight: 1.12;   /* display                     */
  --lh-snug:  1.35;   /* headings, dense rows        */
  --lh-body:  1.55;   /* UI body                     */
  --lh-prose: 1.7;    /* editorial column            */

  --ls-display: -0.025em;
  --ls-label:    0.11em;
  --ls-caps:     0.07em;

  --measure-prose: 68ch;   /* editorial column max width */
  --measure-lede:  76ch;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* ---- spacing (4px base) ------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 26px;
  --space-7: 32px;
  --space-8: 44px;
  --space-9: 64px;

  --container: 1180px;      /* page max width            */
  --gutter: clamp(16px, 3.2vw, 32px);

  /* ---- radius (Ledger is near-square by design) -------------------- */
  --r-xs: 2px;   /* bar fills, legend swatches */
  --r-sm: 3px;
  --r-md: 4px;   /* buttons, chips, panels     */
  --r-lg: 6px;
  --r-pill: 999px;

  /* ---- borders / elevation ----------------------------------------- */
  --bw-hair: 1px;
  --bw-rule: 2px;           /* section-heading underline */

  --elev-0: none;
  --elev-1: 0 1px 2px rgba(0, 0, 0, .35);
  --elev-2: 0 4px 14px rgba(0, 0, 0, .40);   /* map popups, sticky header */

  /* ---- motion ------------------------------------------------------- */
  --dur-fast: 90ms;
  --dur-base: 150ms;
  --dur-slow: 240ms;
  --dur-pulse: 1600ms;
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* ---- z-index ------------------------------------------------------ */
  --z-map: 1;
  --z-sticky: 50;
  --z-popup: 400;

  /* ============ COLOUR — dark theme (default) ======================= */
  --bg:            #0f1417;   /* page                                  */
  --surface-1:     #151b1f;   /* card / results block                  */
  --surface-2:     #1c2429;   /* nested: bar track, table stripe       */
  --surface-3:     #253036;   /* hover, active chip base               */
  --surface-inset: #0b0f12;   /* network bar, footer, code             */

  --border:        #2a343a;   /* hairline                              */
  --border-strong: #3a464d;   /* inputs, focused edges                 */

  --text:          #eef2f4;   /* primary                               */
  --text-strong:   #ffffff;   /* numerals, winner row                  */
  --text-muted:    #a3aeb5;   /* meta, captions                        */
  --text-faint:    #75818a;   /* disabled, no-data                     */
  --text-on-accent:#06232a;

  --accent:        #3fbfc7;   /* teal — links, active states           */
  --accent-hover:  #6ad4da;
  --accent-press:  #2aa5ad;
  --accent-tint:   #12333a;   /* subtle background fill                */
  --accent-border: #1e5b64;

  --live:          #f4645f;   /* counting now                          */
  --live-tint:     #3a1a1c;
  --soon:          #f2a83c;   /* polls close within 24h                */
  --soon-tint:     #3a2a10;
  --upcoming:      #6aa5f2;   /* scheduled                             */
  --upcoming-tint: #16263d;
  --done:          #8b979e;   /* archived / final                      */
  --done-tint:     #1e262b;

  --map-bg:        #10171b;   /* map container behind tiles            */
  --map-nodata:    #2b3439;
  --map-stroke:    #0f1417;   /* region outline                        */
  --map-stroke-hi: #ffffff;   /* hovered region outline                */
  --map-graticule: #223037;

  /* sequential ramp for value maps (turnout, share) — dark theme */
  --seq-1: #123138;
  --seq-2: #164650;
  --seq-3: #1a5d69;
  --seq-4: #227784;
  --seq-5: #2f95a1;
  --seq-6: #4fb6bf;
  --seq-7: #86d4da;

  --party-other:   #8b979e;   /* "Others" / unknown fallback           */
  /* party-colour legibility mix (see site.css §9): on dark surfaces a
     party hex is lifted toward white so navy/maroon brands stay visible */
  --party-mix:     #ffffff;
  --party-mix-amt: 18%;

  --focus: var(--accent-hover);
  --focus-ring: 2px;
  --focus-offset: 2px;

  --scrim: rgba(6, 10, 12, .72);
}

[data-theme="light"] {
  --bg:            #ffffff;
  --surface-1:     #ffffff;
  --surface-2:     #eef1f3;
  --surface-3:     #e3e8eb;
  --surface-inset: #fafbfc;

  --border:        #e3e7ea;
  --border-strong: #cdd4d9;

  --text:          #14181c;
  --text-strong:   #05080a;
  --text-muted:    #5c646e;
  --text-faint:    #8b939b;
  --text-on-accent:#ffffff;

  --accent:        #0e7c86;
  --accent-hover:  #0a6169;
  --accent-press:  #084e55;
  --accent-tint:   #eaf3f4;
  --accent-border: #b9d8db;

  --live:          #c62222;
  --live-tint:     #fdeceb;
  --soon:          #8a5a00;
  --soon-tint:     #fdf3e2;
  --upcoming:      #21599f;
  --upcoming-tint: #eaf1fa;
  --done:          #5c646e;
  --done-tint:     #f0f2f4;

  --map-bg:        #f4f6f7;
  --map-nodata:    #dfe4e7;
  --map-stroke:    #ffffff;
  --map-stroke-hi: #14181c;
  --map-graticule: #e3e7ea;

  --seq-1: #eaf3f4;
  --seq-2: #cfe6e8;
  --seq-3: #a8d3d7;
  --seq-4: #74b8be;
  --seq-5: #3f9aa3;
  --seq-6: #167984;
  --seq-7: #0a565f;

  --party-other:   #6b747c;
  --party-mix:     #05080a;   /* on white, pale brands get pulled down */
  --party-mix-amt: 6%;

  --elev-1: 0 1px 2px rgba(17, 24, 32, .06);
  --elev-2: 0 6px 20px rgba(17, 24, 32, .12);

  --focus: var(--accent);
  --scrim: rgba(20, 24, 28, .55);
}

/* ============================================================
   MIGRATION TABLE (old → new). Aliases below let the two legacy
   sets keep resolving during the swap; delete this block once
   index.html and gen-pages.mjs are updated.

   Homepage set          → new
   --surface             → --surface-1
   --border              → --border            (same name, new value)
   --accent              → --accent
   --radius              → --r-md
   --font                → --font-sans

   Generated-page set    → new
   --s1                  → --bg
   --s2                  → --surface-1
   --s3                  → --surface-2
   --border              → --border
   --r                   → --r-md
   --map-bg              → --map-bg            (same name, new value)

   Bespoke per-party vars (--fidesz, --tisza …) → DELETE.
   Party colour arrives inline: style="--party: #hex" on the row,
   consumed by .em-bar-fill / .seat-seg / .leg-sw. See site.css §Party.
   ============================================================ */
:root {
  --surface: var(--surface-1);
  --radius: var(--r-md);
  --font: var(--font-sans);
  --s1: var(--bg);
  --s2: var(--surface-1);
  --s3: var(--surface-2);
  --r: var(--r-md);
  /* Both legacy sets also spelled the secondary text colour --muted. The ~55
     hand-written pages (bespoke elections, blog, policy) still reference it
     from their own component CSS; it goes when they are converted. */
  --muted: var(--text-muted);
}