/* Vendored from pilsen-cans frontend/src/styles/tokens.css @ dd98a3e (2026-09-26); keep in sync by hand.
   Site additions (2026-10-17, DESIGN-BRIEF §6, §7, §8, §12 as amended): warm paper, --needs-text, hover washes, the fluid type
   scale (--step-*), motion (--dur-*, --ease-*) and layout (--gutter, --measure, --header-h, breakout widths) tokens. */
/*
  Pilsen Cans design tokens ("Badge & ledger").
  Contrast ratios (WCAG, computed 2026-09-04 in docs/DECISIONS.md section 3a) are
  quoted next to each token as "worst vs basemap / on paper-or-panel".
  Light values sit on bare :root; dark values are set twice: once under
  prefers-color-scheme (guarded so an explicit light choice wins) and once under
  [data-theme="dark"] so the header toggle wins in both directions.
*/
:root {
  color-scheme: light;

  /* ink: navy. 7.8 vs basemap / 13.3 on paper. Text, numerals on hollow and marigold pins. */
  --ink: #1E2F52;
  /* brand: badge blue. 4.8 / 8.1. Buttons, links, focus ring, active pin fill. */
  --brand: #2F4E8C;
  /* band: cream. Header band behind the badge; the only cream on the page. */
  --band: #F4EBD6;
  /* paper: the page ground. Warm near-white (brief §7, amended 2026-10-17): ink 12.2, brand 7.5, muted 5.4 on it. */
  --paper: #F9F5EC;
  --paper: oklch(97.5% 0.012 85);
  /* selected: sky. Navy text on it 6+. Selected roster row and the selected pin ring. */
  --selected: #A8C8DE;
  --sky: #A8C8DE;
  /* proposed: marigold. 1.0 to 1.7 alone, so the dashed navy ring carries it (7.9 vs fill). */
  --proposed: #F3C23A;
  /* needs service: ember. 2.9 to 4.9; halo + hairline carry it. White numeral 4.9. */
  --needs: #C9431F;
  /* removed: grey. 2.9 to 4.8. Hollow pin, hidden by default. */
  --removed: #6B7280;
  /* muted: 5.4 on paper. Secondary text; hairlines are muted at 30 %. */
  --muted: #5A6673;
  /* needs as text on paper (error lines): ember itself is 4.48, this step is 5.2. Chips keep --needs with a white numeral. */
  --needs-text: #B83C1A;
  --hairline: rgba(90, 102, 115, 0.30);

  /* Pin construction (light): fill + 2 px white halo + 1 px navy hairline. */
  --pin-halo: #FFFFFF;
  --pin-ring: #1E2F52;
  /* Numeral on solid fills (white on badge blue 8.1, white on ember 4.9). */
  --pin-numeral-light: #FFFFFF;
  /* Numeral on marigold and on hollow pins (navy on marigold 8.0, navy on white 13.3). */
  --pin-numeral-dark: #1E2F52;

  /* Surfaces derived from the palette. */
  --paper-2: #F1EBDD;           /* skeleton rows, disabled fills; one step deeper than paper */
  --paper-2: oklch(94.5% 0.018 85);
  --hover-wash: #ECEBE7;        /* quiet-button hover: a tenth of brand on paper */
  --hover-wash: color-mix(in oklch, var(--brand) 10%, var(--paper));
  --btn-hover: #2A4680;         /* brand darkened a tenth; white on it 9.2 */
  --btn-hover: color-mix(in oklch, var(--brand), black 10%);
  --on-brand: #FFFFFF;          /* text on brand buttons, 8.1 */
  --danger: #C9431F;            /* destructive buttons share the ember hue */
  --map-ground: #E2DFDA;        /* matches the Protomaps light earth fill while tiles load */
  --outline: rgba(30, 47, 82, 0.5);   /* ward / Pilsen outlines: ink at 50 % */

  --radius: 6px;                /* the one radius, on controls */
  --shadow-sheet: 0 -2px 16px rgba(30, 47, 82, 0.18);   /* the one shadow, on the sheet and the floating panel */

  --font-ui: 'Public Sans Variable', 'Public Sans', 'Public Sans Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Big Shoulders Display Variable', 'Big Shoulders Display', 'Arial Narrow', 'Public Sans Variable', system-ui, sans-serif;

  /* Fluid type (Utopia: 360 px at 18 px, ratio 1.2 -> 1240 px at 20 px, ratio 1.25); each clamp keeps a rem term so zoom works. */
  --step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);      /* 15 to 16: captions, credits, meta, nav */
  --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);     /* 18 to 20: body */
  --step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);    /* 21.6 to 25: lead, h2 */
  --step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);    /* 25.9 to 31.3: the Saturday fact, masthead */
  --step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);   /* 31.1 to 39.1: spare */
  --step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);  /* 37.3 to 48.8: page title (Big Shoulders) */
  --step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);   /* 44.8 to 61: the gate name only */
  /* Legacy names still read by admin.css and the map preview: nothing renders below 15 px any more. */
  --fs-1: var(--step--1);
  --fs-2: var(--step--1);
  --fs-3: var(--step-0);
  --fs-4: var(--step-1);
  --fs-5: var(--step-2);
  --lh: 1.45;

  /* Motion (brief §12): colour hovers, a press, one hero entrance, a page crossfade; all inside prefers-reduced-motion: no-preference. */
  --dur-fast: 120ms;
  --dur-press: 100ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-page: 180ms;
  --ease-out: cubic-bezier(0, 0, 0.3, 1);
  --ease-std: cubic-bezier(0.2, 0, 0, 1);

  /* Layout (brief §8): reading measure, gutters, breakout widths and the header height for scroll padding. */
  --measure: 68ch;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --popout-w: 6rem;
  --feature-w: 6.5rem;
  --header-h: 64px;

  --panel-w: 360px;
  --sheet-peek: 236px;          /* mobile sheet peek: handle + band + count line + filter */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --pin-scale: 1;
}
@media (max-width: 719px) { :root { --header-h: 56px; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #EAE4D3;               /* cream. 7.3 vs dark basemap / 13.8 on panel */
    --brand: #8FB0EA;             /* 4.2 / 8.0 */
    --band: #12192B;
    --paper: #12192B;
    --selected: rgba(168, 200, 222, 0.22);   /* sky at 22 % */
    --sky: #A8C8DE;
    --proposed: #F3C23A;          /* 5.6 vs basemap; navy-black numeral 10.5 */
    --needs: #F08A5B;             /* 3.8 / 7.1 */
    --removed: #9AA5A0;           /* 3.7 / 6.9 */
    --muted: #A9B2BF;             /* 8.6 on panel */
    --needs-text: #F08A5B;        /* 7.1 on panel */
    --hover-wash: #1E2A44;
    --hover-wash: color-mix(in oklch, var(--brand) 14%, var(--paper));
    --btn-hover: #A3BFF0;
    --btn-hover: color-mix(in oklch, var(--brand), white 12%);
    --hairline: rgba(169, 178, 191, 0.30);
    --pin-halo: #1F1F1F;          /* dark earth */
    --pin-ring: #EAE4D3;
    --pin-numeral-light: #12192B; /* on brand 8.0, on ember 7.1 */
    --pin-numeral-dark: #12192B;  /* on marigold 10.5 */
    --paper-2: #1A2338;
    --on-brand: #12192B;
    --danger: #F08A5B;
    --map-ground: #1F1F1F;
    --outline: rgba(234, 228, 211, 0.5);
    --shadow-sheet: 0 -2px 16px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #EAE4D3;
  --brand: #8FB0EA;
  --band: #12192B;
  --paper: #12192B;
  --selected: rgba(168, 200, 222, 0.22);
  --sky: #A8C8DE;
  --proposed: #F3C23A;
  --needs: #F08A5B;
  --removed: #9AA5A0;
  --muted: #A9B2BF;
  --needs-text: #F08A5B;
  --hover-wash: #1E2A44;
  --hover-wash: color-mix(in oklch, var(--brand) 14%, var(--paper));
  --btn-hover: #A3BFF0;
  --btn-hover: color-mix(in oklch, var(--brand), white 12%);
  --hairline: rgba(169, 178, 191, 0.30);
  --pin-halo: #1F1F1F;
  --pin-ring: #EAE4D3;
  --pin-numeral-light: #12192B;
  --pin-numeral-dark: #12192B;
  --paper-2: #1A2338;
  --on-brand: #12192B;
  --danger: #F08A5B;
  --map-ground: #1F1F1F;
  --outline: rgba(234, 228, 211, 0.5);
  --shadow-sheet: 0 -2px 16px rgba(0, 0, 0, 0.5);
}