/* PhilaNova design tokens — the one copy every screen loads.

   WHY THIS FILE EXISTS (design shift, Phase 0, 16 Oct 2026)
   The eleven main-menu screens each carried their own copy of the burgundy
   palette in a `:root` block — seventeen names, pasted eleven times, and by
   October no two copies agreed: `--muted` was three different colours, the
   gold line two opacities, the panel two depths. A screen's look depended on
   which copy it happened to hold. Those eleven blocks are deleted; the palette
   is declared here once. A screen keeps a `:root` line only for tokens that are
   genuinely its own (the Donor Network's sea and land, Principals' tiles).

   Load it straight after `/assets/fonts/product.css` and BEFORE the template's
   own <style>, so a screen can still refine a token and the light themes'
   `:root[data-theme=…]` blocks (more specific than `:root`) still win where a
   user has picked one.

   TWO LAYERS, and the prefix tells them apart:

   1. `--pn-*` — the design-shift tokens from the approved token sheet
      (Website/Design_Shift_americagov_2026-10-16/PLAN.md §5), checked against the
      brand guidelines' tokens.json (7) Branding/Brand_Guidelines_2026-10).
      Prefixed because
      the sheet's names collide with names already in use with other meanings:
      `--gold` is light gold text on every screen today and the action gold on
      the sheet; `--ink` is cream on the sheet and near-black on Donor Collab.
      New and restyled work (the header, the question box) reads these.
   2. The legacy names (`--bg --surface --cream --muted --gold …`) that ~45
      templates are written against, now declared once and pointed at the
      same values. Screens move onto layer 1 one by one in Phases 2–4.

   WHITE-LABEL. Every brand colour here is a `--br-*` token, so a bank's theme
   (branding.py, served at /tenant-brand/theme.css) re-derives it. The new
   shades (ground-20, ground-16 …) are declared in `branding.SHADES` with the
   rest. Nothing below is a hard-coded brand colour; the guard in
   tests/test_whitelabel_theming.py reads this file.

   PROVENANCE. The guidelines' filed / stated / model colours are declared
   below as --pn-filed --pn-stated --pn-model for new work. The marks already
   on screen are still drawn by pn_brand.js (PROV) and branding.PROVENANCE in
   the 23 Aug colours; moving those over is its own change, screen by screen,
   because every provenance dot in the product changes colour with it. */

:root{
  color-scheme:dark;

  /* ── colour: the sheet (PLAN.md §5) ─────────────────────────────────────── */
  --pn-ground:var(--br-ground);          /* #6B2D3E  the page: burgundy (owner, 16 Oct) */
  --pn-stage:var(--br-ground-22);        /* #5A2235  darker hero stage, one per page */
  --pn-deep:var(--br-ground-12);         /* #3A1220  insets: answer cards, maps, inputs */
  --pn-wine:var(--br-ground-25);         /* #6B2040  burgundy fills: chips, second button */
  --pn-surface:var(--br-ground-20);      /* #521F2E  wine glass panels */
  --pn-surface-2:var(--br-ground-16);    /* #45192A  rows inside a panel */
  --pn-line:rgba(var(--br-ink-rgb),.14);
  --pn-line-2:rgba(var(--br-ink-rgb),.24);
  --pn-ink:var(--br-ink);                /* #F0EBE1  text, 8.5:1 on the ground */
  --pn-ink-2:var(--br-muted-87);         /* #E6D6CD  secondary, 7.2:1 */
  --pn-ink-3:var(--br-muted-79);         /* #D2BFB4  the quietest text allowed, 5.7:1 */
  --pn-gold:var(--br-accent-70);         /* #C9A84C  the one action per panel (a FILL) */
  --pn-gold-lt:var(--br-accent);         /* #E8D08A  any gold TEXT on burgundy: 6.7:1.
                                            Plain #C9A84C text on burgundy is 4.4:1 and fails AA. */
  --pn-on-gold:var(--br-on-accent-8);    /* #2A0F18  text on a gold fill, 7.8:1 */
  --pn-spark:var(--br-accent-95);        /* #FFF1C8  motion highlights only: a spark on a thread, a glint */

  /* provenance (guidelines): a figure from a filing, what an organisation
     states, what a model wrote. Fixed, not a bank's to restyle. */
  --pn-filed:#7FD6A6; --pn-stated:var(--pn-gold-lt); --pn-model:#C9B6F0;
  /* chart categories, in order, never more than five on one chart */
  --pn-cat-1:var(--br-accent); --pn-cat-2:var(--br-accent-70); --pn-cat-3:#E0A898;
  --pn-cat-4:#B05A72; --pn-cat-5:var(--br-ink);

  /* ── type ───────────────────────────────────────────────────────────────── */
  --pn-f-display:var(--br-serif);        /* Newsreader (branding.DEFAULT_FONTS) */
  --pn-f-text:var(--br-sans);            /* Inter, weights 400 and 500 only */
  --pn-f-receipt:var(--br-mono);         /* DM Mono: source stamps, nothing else */
  /* Six sizes in the tools, nothing under 12px:
     12 label · 14 table · 16 body · 20 section · 28 panel title · 44 screen title */
  --pn-t12:.75rem; --pn-t14:.875rem; --pn-t16:1rem;
  --pn-t20:1.25rem; --pn-t28:1.75rem; --pn-t44:2.75rem;
  /* The landing adds two display sizes, and only the landing uses them. */
  --pn-t64:clamp(2.5rem,6vw,4rem); --pn-t80:clamp(2.75rem,6.2vw,5rem);

  /* ── space: 4px base, 8px rhythm ────────────────────────────────────────── */
  --pn-s1:4px; --pn-s2:8px; --pn-s3:12px; --pn-s4:16px; --pn-s5:24px;
  --pn-s6:32px; --pn-s7:48px; --pn-s8:64px; --pn-s9:96px;

  /* ── shape ──────────────────────────────────────────────────────────────── */
  --pn-r-pill:999px; --pn-r-stage:40px; --pn-r-tile:28px; --pn-r-card:16px; --pn-r-row:10px;

  /* The two-ring focus outline: a deep ring, then light gold (guidelines). */
  --pn-focus:0 0 0 2px var(--pn-deep),0 0 0 4px var(--pn-gold-lt);
  /* shadows: the lift is for the question box and floating sheets only; the
     glow for a lit value. The guidelines' lift is rgba(20,4,10,.35); it is
     written here through the nearest brand shade (ground-4, #1A0810) so a
     bank's theme carries it. */
  --pn-lift:0 12px 40px rgba(var(--br-ground-4-rgb),.35);
  --pn-glow:0 0 18px rgba(var(--br-accent-rgb),.45);
  --pn-ease:cubic-bezier(.2,.7,.2,1);

  /* ── the legacy names, declared once ────────────────────────────────────── */
  /* Text moves to the sheet's values: secondary and quiet text both get
     LIGHTER (#D5C5C0 → #E6D6CD, #C8B2B0 → #D2BFB4), so every caption on the
     eleven screens reads better than it did. Fills and lines keep today's
     values; panels are repainted screen by screen in Phases 2–4, where each
     one is looked at, not here in bulk. */
  /* Pointed straight at the --br-* tokens (the same values as --pn-ground,
     --pn-ink …) so whitelabel_scope.resolve_default, which the screen guards
     use to read "the page is burgundy", can resolve them in one step. */
  --bg:var(--br-ground);
  --burg:var(--br-ground);
  --surface:rgba(255,255,255,.07);
  --surface2:rgba(255,255,255,.12);
  --panel:var(--br-ground-23);
  --cream:var(--br-ink);
  --muted:var(--br-muted-87);
  --muted2:var(--br-muted-79);
  --gold:var(--br-accent);
  --gold-lt:var(--br-accent-88);
  --on-gold:var(--br-on-accent);
  --green:#5BC08A; --blue:#8FB4E0; --red:#F6C0BC;
  --line:rgba(var(--br-accent-70-rgb),.3);
  --line2:rgba(var(--br-ink-rgb),.13);
  --glowA:rgba(var(--br-accent-70-rgb),.16);
  --glowB:rgba(var(--br-ground-21-rgb),.55);
}

/* Two weights, 400 and 500. product.css declares Inter and Newsreader over
   400–500 only, so a 300 or a 600 in an old rule is drawn at the nearest of the
   two — and this stops the browser smearing a fake bold on top of a 500 when a
   rule asks for 600 or 700. */
html{font-synthesis-weight:none}

/* ── focus: one visible ring on everything you can reach by keyboard ───────── */
/* Buttons had no focus style at all, and inputs only a gold border. The
   transparent outline keeps a ring in Windows' forced-colours mode, where box
   shadows are dropped. `html` in the selector so a template's `outline:none`
   on an input cannot switch it off. */
html :focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--pn-focus)}

/* ── motion: one switch per page (pn_header.js draws it) ──────────────────── */
/* Paused by the reader: every CSS animation stops where it is. Canvas and
   requestAnimationFrame loops ask window.pnMotion.still() instead. */
html.pn-still *,html.pn-still *::before,html.pn-still *::after{animation-play-state:paused!important}

/* The reduced-motion setting: everything lands on its finished frame at once,
   before any script runs, and no text waits for an animation. The durations
   are 1ms rather than 0 so `transitionend` and `animationend` still fire for
   the scripts that wait on them. Pressing "Play motion" adds .pn-play and gives
   the reader the motion they asked for. */
@media (prefers-reduced-motion:reduce){
  html:not(.pn-play) *,html:not(.pn-play) *::before,html:not(.pn-play) *::after{
    animation-duration:1ms!important;animation-delay:0s!important;animation-iteration-count:1!important;
    transition-duration:1ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}