/* Dark theme (cppalliance/wg21-website-issues#57).
   ============================================================================
   Loaded only on pages whose view sets `dark_theme` (see _head.html.j2). The
   rest of the site has not been tokenised yet and would render half-dark.

   TOKENS ONLY. This file must never declare a property (background, color,
   box-shadow, …). Media queries add no specificity, so an unconditional
   `:root[data-theme="dark"] .navbar { background: … }` would outrank
   navbar.css's own `@media (max-width: 900px)` rules and silently kill the
   mobile cornice. Declaring nothing but custom properties makes that whole
   class of bug impossible. If something cannot be themed by swapping a token,
   the fix is a new token in the component file, not a rule here.

   Structure:
     Layer 1  the dark palette. Every dark VALUE appears exactly once, on a
              plain :root, inert because nothing reads --d-* directly.
     Layer 2  activation. Two identical alias lists mapping real tokens to the
              palette. They contain no colours, so the two copies cannot drift
              in value — only a missing line would show, which the test in
              wg21_site/tests/test_theme.py checks for.

   Three states, because "system" is not "light":
     :root                                  light (defined in shared-vars.css)
     prefers-color-scheme: dark, not forced light   dark
     [data-theme="dark"]                    dark, overriding a light OS
   The `screen` media type keeps a dark OS from printing dark backgrounds; the
   site has no other @media print rules. It must be `screen and (...)`, not
   `(...) and not print`: `not` may only lead a media query, so the latter
   parses as `not all` and the whole block silently never applies.
   ============================================================================ */

:root {
  /* ── Surfaces. Inverted, not mirrored: in light, recessed surfaces go darker
     than the page; in dark the page is the mid-tone and cards sit BELOW it,
     with hover/soft fills lifting above. That is the Figma frame's model. ── */
  --d-bg-canvas: #171d26;   /* page (body) */
  --d-bg-card:   #0f1419;   /* cards, panels, modals — below the page */
  --d-bg-body:   #0f1419;   /* full-width bands (iso-bar) */
  --d-bg-soft:   #1e2530;   /* badge + chip fills — must lift off --bg-card */
  --d-bg-soft-2: #242c37;   /* must not equal --d-border-default, or bordered
                               elements on this surface get an invisible edge */
  --d-bg-hover:  #1e2530;
  --d-border:      #2b333f;
  --d-border-soft: #232b36;
  --d-plate-edge:  #39434f;   /* plate edges: 1.53:1 on --d-bg-soft */
  --d-input-bg:     #0f1419;
  --d-input-border: #7d8794;   /* 4.08:1 on the page; the frame's --line-control */

  /* ── Text ── */
  --d-ink:       #e6e9ee;   /* 12.3:1 on --d-bg-canvas */
  --d-ink-2:     #c7cede;
  --d-ink-soft:  #a9b2bf;   /* 5.9:1 */
  /* Deliberately NOT the same hex as --d-disabled, which it used to share. That
     value is 4.23:1 on --d-bg-soft, fine for disabled text (exempt from 1.4.3)
     and short of AA for anything else. This token carries real content: PRAGMA's
     table headers and question chips sit on those plates and were failing. Same
     hue and saturation, lightness 54% -> 58%, giving 4.95:1 there and more
     elsewhere, and still deltaE 11.7 from --d-ink-soft so the two read apart. */
  --d-ink-faint: #8a939e;
  --d-ink-strong: #f0f3f8;  /* headings, a step above --d-ink as in light */

  /* ── Accent. #007AFF is 1.5:1 on this page, so it lifts. ── */
  --d-accent:        #4d9fff;   /* 4.55:1 */
  --d-accent-strong: #80b8ff;   /* 7.80:1 — where text must clear AA */
  --d-accent-20:     #4d9fff33;
  --d-accent-wash:   rgba(77, 159, 255, 0.12);
  --d-accent-line:   rgba(77, 159, 255, 0.32);
  /* Dark ink on the bright accent: white on #4d9fff is 2.72:1, this is 6.88:1. */
  --d-on-accent:     #0b1220;
  --d-accent-royal:  #7aa2f7;
  --d-royal-wash:    rgba(122, 162, 247, 0.12);
  --d-royal-line:    rgba(122, 162, 247, 0.32);
  --d-indigo:        #8da2fb;
  --d-indigo-line:   rgba(141, 162, 251, 0.34);
  --d-indigo-wash:   rgba(141, 162, 251, 0.16);
  --d-indigo-line-2: rgba(141, 162, 251, 0.5);
  --d-orange:        #ffa54d;
  --d-iso:           #a8c4e8;   /* ISO reference links: 9.46:1, and ΔE 37.3 from
                                   the accent so it stays a distinct kind of link */

  /* ── Status ── */
  --d-green: #34d068;  --d-green-wash: rgba(52, 208, 104, 0.12);  --d-green-line: rgba(52, 208, 104, 0.3);
  --d-amber: #f0a830;  --d-amber-wash: rgba(240, 168, 48, 0.12);  --d-amber-line: rgba(240, 168, 48, 0.3);
  --d-red:   #f47067;  --d-red-wash:   rgba(244, 112, 103, 0.12); --d-red-line:   rgba(244, 112, 103, 0.3);
  /* The Delete Account page's two brighter reds. In light these trade contrast
     for vividness (--red-bright is marks-only at 3.27:1 on --red-bg); against a
     dark ground both clear AA, so the dark side carries no such caveat.
     --d-red-vivid 5.76:1 on --d-bg-canvas, 4.88:1 on --d-red-wash (text).
     --d-red-bright 6.67:1 / 5.64:1, and is the lighter of the two so the
     "bright is punchier than vivid" relationship survives the inversion. */
  --d-red-vivid:  #ff6259;
  --d-red-bright: #ff7a70;
  /* Deeper than --d-accent/--d-red-vivid so white labels clear AA: 5.70:1 and
     5.62:1, each still 3:1 against the page. These buttons are the exception to
     the usual dark-ink-on-bright-accent. */
  --d-btn-fill:        #1e5fd8;
  --d-btn-danger-fill: #c62828;
  --d-violet: #b39dff; --d-violet-wash: rgba(179, 157, 255, 0.10); --d-violet-line: rgba(179, 157, 255, 0.28);

  /* ── Audience groups. Direction is held apart from SG on purpose: in light
     they sat ΔE 4.4 apart and read as the same colour. ── */
  --d-clr-direction: #f08060;
  --d-clr-ewg:  #4fc97d;
  --d-clr-lewg: #5bc8d4;
  --d-clr-cwg:  #9589f5;
  --d-clr-lwg:  #5d91f5;
  --d-clr-sg:   #d4a050;
  --d-clr-wg21: #b0bbd0;
  --d-chip-ewg-bg:  #0D2B18; --d-chip-ewg-line:  #174225;
  --d-chip-lewg-bg: #0D2A2E; --d-chip-lewg-line: #164045;
  --d-chip-cwg-bg:  #1A1650; --d-chip-cwg-line:  #28207A;
  --d-chip-lwg-bg:  #0D1F4A; --d-chip-lwg-line:  #1A3070;
  --d-chip-sg-bg:   #281900; --d-chip-sg-line:   #3C2600;
  --d-chip-wg21-bg: #1F2733; --d-chip-wg21-line: #2D3A4E;
  --d-chip-direction-bg: #2E1700; --d-chip-direction-line: #4A2800;

  /* ── Component fills ── */
  --d-contrib-card-border: #2b333f;
  --d-step-icon-bg: #1e2530;
  /* Plate behind the book artwork, white because the image was drawn for a
     white ground. Stopgap, like the PRAGMA plate was: a raster cannot be
     recoloured the way an inline SVG can. */
  --d-book-plate: #ffffff;
  /* The building, lit up after dark (issue #82). Its own artwork rather than a
     filter: the lamps and window glow cannot come from a hue shift. */
  --d-banner-house: url('../img/banner-house-dark.png');
  /* .bg-grid hairlines are off in dark. At any alpha that stayed visible they
     read as banding over the page rather than as texture, which is what the
     light grid gives. Transparent keeps the gradients intact and paints nothing. */
  --d-grid-line: transparent;
  /* The frame states --surface-sunken-2 IS the zebra/hover step, so both row
     shades resolve to it rather than to two shades invented here. */
  --d-border-hover: #3c4757;   /* n-30. A distinct ramp step, not the control border */
  --d-rule-soft: #2b333f;
  --d-wash: rgba(255, 255, 255, 0.05);
  /* A 6%-black shadow is invisible over a dark page, so elevation is carried
     by the shadow itself rather than by a fill difference. */
  /* Chrome: the topbar and navbar share one near-black surface, so they read as
     a single block above the content rather than as page surfaces. */
  --d-chrome:      #0A0A0A;
  --d-ink-bright:  #ffffff;   /* nav + subnav links; 19.8:1 on chrome, 16.9:1 on the page */
  /* Sign In fill. The frame specifies #007AFF, which carries its white label at
     only 4.02:1. Held at the light accent instead: white reads 5.57:1 and the
     fill still clears 3:1 against the bar. */
  --d-nav-accent:  #0066cc;
  /* The frame keeps the light M3 outline (#79747e) under the navbar, which on
     the near-black bar is a 4.35:1 light line, brighter than anything else on
     the page. The chrome-to-page tone change already marks the boundary. */
  --d-nav-rule:    transparent;
  --d-btn-accent:  #0066cc;   /* Submit Issue fill: unchanged from light, so its
                                 white label keeps 5.57:1 while the fill still
                                 clears 3:1 against the page */
  --d-on-gold:     #0b1220;   /* white on gold is 2.10:1; this is 8.90:1 */
  --d-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30);
  --d-drawer-shadow: 0 8px 24px rgba(0, 0, 0, 0.48);   /* frame's --shadow-3 alpha */
  --d-shadow:    0 4px 16px rgba(0, 0, 0, 0.30);
  --d-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.48);
  --d-strike-warn: rgba(244, 112, 103, 0.5);
  --d-focus-ring:  rgba(77, 159, 255, 0.25);
  /* Focus indicator on dark surfaces is gold, not the accent: 8.05:1 on the
     page and 9.05:1 on the navy bands, where the blue accent managed 6.22:1.
     Light mode keeps its blue ring; this is a dark-surface rule. */
  --d-focus:       #d4af37;
  --d-placeholder: rgba(169, 178, 191, 0.6);
  --d-dot-faint:   rgba(169, 178, 191, 0.35);
  --d-panel-gradient: linear-gradient(180deg, #0f1419 0%, #131922 100%);
  --d-head-wash: rgba(30, 37, 48, 0.6);
  /* PRAGMA mark fills. The mark is inline SVG so each element is themed
     directly; a plate behind it is what this replaced. The wordmark keeps its
     light grey (4.23:1 here) so the mark's internal hierarchy survives the
     flip: hash loudest, P next, wordmark quietest, as in light. */
  --d-pragma-mark-hash: #ffffff;   /* 16.93:1 on --d-bg-canvas */
  --d-pragma-mark-p:    #4259e0;   /* 3.01:1. The designer's dark lockup keeps
                                      the P at brand navy, which is 2.03:1 here
                                      and fails even the 3:1 graphic floor, so
                                      it had to lift. This is the closest colour
                                      to that navy that clears 3:1: L* 33->44
                                      with chroma and hue held exactly, deltaE
                                      10.7. A logotype is exempt from 1.4.3, so
                                      3:1 is the bar, not 4.5:1. */
  --d-disabled: #7d8794;   /* n-50, 4.23:1 on --d-bg-soft */

  /* The masthead band, dark. Not a contrast fix: the band never touches the page
     canvas, it sits between the topbar and the navbar (both --d-chrome), and its
     gold frame already draws that edge. The brand #011b41 would work; this is a
     desaturated navy chosen so the band joins the low-chroma family the rest of
     the dark palette lives in, ΔE 19.1 from the chrome it borders and ΔE 3.5 from
     the footer band. Both stops keep the frame (7.20:1 / 8.36:1), the gold eyebrow
     (5.85:1 / 6.79:1) and the white subtitle (15.28:1 / 17.74:1) clear of AA.
     The two gradients mirror the light ones stop for stop; the mobile one reuses
     the desktop mid rather than inventing a fifth navy. */
  /* The footer band, dark. Same family as the masthead above (ΔE 3.5), so the
     page is bookended by one surface rather than two unrelated navies. Chosen
     from the footer compare page. Body text lands 14.73:1, the legal row 8.95:1
     and the gold hover 8.21:1. */
  --d-footer-navy: #0e1b2f;
  --d-banner-navy: #081830;
  --d-banner-gradient: linear-gradient(90deg, #081830 0%, #12263f 20%, #11253e 72.32%, #132842 90%, #081830 100%);
  --d-banner-mobile-gradient: linear-gradient(90deg, #081830 15.39%, #12263f 63.95%, #081830 100%);

  /* The crown molding, dark. The light stack is near-black hairlines over a
     pale bar; here it is pale hairlines over a dark bar, same geometry. */
  /* Crown molding. Figma stacks four semi-transparent layers that composite
     brighter than any one of them, so the spec's flat #2B333F undershoots badly:
     sampling the reference PNG the molding peaks at #4d535a against the page,
     a +54 delta where a flat #2b333f gives +20. These two values reproduce that
     peak. Matched to the render, not to the layer values. */
  --d-cornice-hair: #4d535a;
  --d-cornice-band: #3c4757;
  --d-cornice:
    linear-gradient(var(--d-cornice-hair), var(--d-cornice-hair)) left 2px / 100% 1.5px no-repeat,
    linear-gradient(180deg, var(--d-cornice-band) 0%, transparent 50%, var(--d-cornice-band) 100%) left 1px / 100% 6px no-repeat,
    linear-gradient(180deg, var(--d-cornice-band) 0%, transparent 100%) left 7px / 100% 8px no-repeat,
    linear-gradient(180deg, var(--d-cornice-band) 0%, transparent 50%, var(--d-cornice-band) 100%) left bottom / 100% 4px no-repeat;
  /* Same chevron geometry, stroked in --d-ink-soft (%23a9b2bf). */
  --d-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23a9b2bf' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
}

/* ══ Layer 2a: follow the OS, unless a page explicitly asks for light ══ */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg-canvas: var(--d-bg-canvas);
    --bg-card: var(--d-bg-card);
    --bg-body: var(--d-bg-body);
    --bg-soft: var(--d-bg-soft);
    --bg-soft-2: var(--d-bg-soft-2);
    --bg-hover: var(--d-bg-hover);
    --banner-house-img: var(--d-banner-house);
    --menu-surface: var(--d-bg-soft-2);
    --border-default: var(--d-border);
    --border-soft: var(--d-border-soft);
    --input-bg: var(--d-input-bg);
    --input-border: var(--d-input-border);
    --contrib-card-border: var(--d-contrib-card-border);
    --step-icon-bg: var(--d-step-icon-bg);
    --grid-line: var(--d-grid-line);

    --text-primary: var(--d-ink);
    --text-secondary: var(--d-ink-soft);
    --text-muted: var(--d-ink-faint);
    --text-link: var(--d-accent);
    --ink: var(--d-ink);
    --ink-2: var(--d-ink-2);
    --ink-soft: var(--d-ink-soft);
    --ink-faint: var(--d-ink-faint);
    --ink-strong: var(--d-ink-strong);

    --accent: var(--d-accent);
    --accent-blue: var(--d-accent);
    --accent-bright: var(--d-accent-strong);
    --accent-blue-higher-contrast: var(--d-accent-strong);
    --accent-blue-opacity-20: var(--d-accent-20);
    --accent-dim: var(--d-accent-wash);
    --accent-2: var(--d-accent-strong);
    --accent-bg: var(--d-accent-wash);
    --on-accent: var(--d-on-accent);
    --accent-royal: var(--d-accent-royal);
    --accent-royal-bg: var(--d-royal-wash);
    --accent-royal-border: var(--d-royal-line);
    --indigo: var(--d-indigo);
    --indigo-border: var(--d-indigo-line);
    --indigo-bg-hover: var(--d-indigo-wash);
    --indigo-border-hover: var(--d-indigo-line-2);
    --orange: var(--d-orange);

    --green: var(--d-green); --green-bg: var(--d-green-wash); --green-border: var(--d-green-line);
    --amber: var(--d-amber); --amber-bg: var(--d-amber-wash); --amber-border: var(--d-amber-line);
    --amber-higher-contrast: var(--d-amber);
    --red: var(--d-red); --red-bg: var(--d-red-wash); --red-border: var(--d-red-line);
    --red-vivid: var(--d-red-vivid); --red-bright: var(--d-red-bright);
    --violet: var(--d-violet); --violet-bg: var(--d-violet-wash); --violet-border: var(--d-violet-line);

    --clr-direction: var(--d-clr-direction);
    --clr-ewg: var(--d-clr-ewg);
    --clr-lewg: var(--d-clr-lewg);
    --clr-cwg: var(--d-clr-cwg);
    --clr-lwg: var(--d-clr-lwg);
    --clr-sg: var(--d-clr-sg);
    --clr-wg21: var(--d-clr-wg21);
    --chip-ewg-bg: var(--d-chip-ewg-bg); --chip-ewg-border: var(--d-chip-ewg-line);
    --chip-lewg-bg: var(--d-chip-lewg-bg); --chip-lewg-border: var(--d-chip-lewg-line);
    --chip-cwg-bg: var(--d-chip-cwg-bg); --chip-cwg-border: var(--d-chip-cwg-line);
    --chip-lwg-bg: var(--d-chip-lwg-bg); --chip-lwg-border: var(--d-chip-lwg-line);
    --chip-sg-bg: var(--d-chip-sg-bg); --chip-sg-border: var(--d-chip-sg-line);
    --chip-wg21-bg: var(--d-chip-wg21-bg); --chip-wg21-border: var(--d-chip-wg21-line);
    --chip-direction-bg: var(--d-chip-direction-bg); --chip-direction-border: var(--d-chip-direction-line);
    --chip-mailings-bg: var(--d-accent-wash); --chip-mailings-text: var(--d-accent);

    /* masthead.css tokens (landing/about bundles) */
    --line: var(--d-border);
    --line-soft: var(--d-border-soft);
    --line-hover: var(--d-border-hover);
    --card: var(--d-bg-card);

    /* landing.css */
    --bg: var(--d-bg-canvas);
    --pragma-mark-hash: var(--d-pragma-mark-hash);
    --pragma-mark-p: var(--d-pragma-mark-p);
    --bg-stripe: var(--d-bg-soft);
    --accent-iso: var(--d-iso);
    --ok-text: var(--d-green); --ok-bg: var(--d-green-wash);
    --ok-dot: var(--d-green); --ok-line: var(--d-green-line);
    --focus-ring: var(--d-focus-ring);
    --placeholder-ink: var(--d-placeholder);
    --tentative-dot: var(--d-dot-faint);
    --papers-head-bg: var(--d-head-wash);
    --chip-neutral-bg: var(--d-bg-soft);
    --highlight-gradient: var(--d-panel-gradient);
    --aud-blue-ink: var(--d-clr-lwg); --aud-blue-border: var(--d-chip-lwg-line); --aud-blue-bg: var(--d-chip-lwg-bg);
    --aud-amber-ink: var(--d-clr-sg); --aud-amber-border: var(--d-chip-sg-line); --aud-amber-bg: var(--d-chip-sg-bg);

    /* paper-updates.css */
    /* foundation-family pages: books, community, events, meeting fund, legal */
    --book-plate: var(--d-book-plate);
    --accent-wash: var(--d-accent-wash);
    --accent-wash-line: var(--d-accent-line);
    --card-shadow: var(--d-shadow-sm);
    --tentative-bg: var(--d-bg-soft);
    --tag-community-bg: var(--d-accent-wash);
    --tag-about-ink: var(--d-violet); --tag-about-bg: var(--d-violet-wash); --tag-about-border: var(--d-violet-line);
    --legal-note-ink: var(--d-amber);
    /* shell.css's skip link. Declared on :root, so it is aliased here. */
    --skip-link-edge: var(--d-input-border);
    --skip-link-focus: var(--d-focus);
    /* banner.css: the full masthead (landing). Both stops are already tokens
       there, so :root reaches them; slim-banner.css keeps its palette on the
       component and is aliased below. */
    --banner-gradient: var(--d-banner-gradient);
    --banner-mobile-gradient: var(--d-banner-mobile-gradient);
    /* --navy stays a surface; only its two ink uses flip. */
    --label-ink: var(--d-ink);
    --iso-link-ink: var(--d-accent);
    --btn-accent-bg: var(--d-btn-accent);
    --btn-gold-ink: var(--d-on-gold);

    --pu-track: var(--d-bg-soft);
    --pu-select-bg: var(--d-bg-soft); --pu-select-border: var(--d-border); --pu-select-bg-2: var(--d-bg-soft-2);
    --pu-rev-border: var(--d-accent-line); --pu-rev-bg: var(--d-accent-wash); --pu-rev-hover: var(--d-bg-soft);
    --pu-rule: var(--d-accent-line);
    --pu-skeleton: var(--d-bg-soft); --pu-shimmer: var(--d-wash);
    --pu-chevron: var(--d-chevron);
    --account-chevron: var(--d-chevron);
    --account-btn-fill: var(--d-btn-fill); --account-danger-fill: var(--d-btn-danger-fill);
    --account-toggle-ink: var(--d-ink-faint);
    --pu-approved-ink: var(--d-green); --pu-approved-bg: var(--d-green-wash); --pu-approved-border: var(--d-green-line);
    --pu-rejected-ink: var(--d-red); --pu-rejected-bg: var(--d-red-wash); --pu-rejected-border: var(--d-red-line);
    --pu-progress-ink: var(--d-amber); --pu-progress-bg: var(--d-amber-wash); --pu-progress-border: var(--d-amber-line);

    /* eval-index.css */
    --row-zebra: var(--d-bg-soft); --row-zebra-2: var(--d-bg-soft);
    --rule-soft: var(--d-rule-soft);
    --wash-dark: var(--d-wash);
    --shadow-pop: var(--d-shadow); --shadow-pop-lg: var(--d-shadow-lg);

    /* pragma.css. Its chrome tokens (--fill-chrome, --on-chrome, --chrome-*,
       --live-dot*, --on-signin) are deliberately absent: those surfaces stay
       dark on both themes, like the topbar. */
    --on-ink: var(--d-bg-card);      /* --ink inverts in dark, so its label must too */
    --signin-bg: var(--d-nav-accent);
    --green-ink: var(--d-green);
    --amber-ink: var(--d-amber);
    --red-ink: var(--d-red);
    --btn-glyph: var(--d-on-accent);
    --btn-glyph-go: var(--d-bg-card);
    --demo: var(--d-violet); --demo-ink: var(--d-violet);
    --demo-bg: var(--d-violet-wash); --demo-line: var(--d-violet-line);

    /* eval-paper.css */
    --raw-num-opacity: 1;   /* the gutter is 1.40:1 at 0.25, 5.08:1 here */
    --strike-warn: var(--d-strike-warn);
    --phase-pre-bg: var(--d-accent-wash); --phase-pre-ink: var(--d-accent-strong); --phase-pre-border: var(--d-accent-line);
    --phase-post-bg: var(--d-green-wash); --phase-post-ink: var(--d-clr-ewg); --phase-post-border: var(--d-green-line);
    --phase-none-bg: var(--d-chip-wg21-bg); --phase-none-ink: var(--d-clr-wg21); --phase-none-border: var(--d-chip-wg21-line);
  }

  /* Component-scoped tokens. .navbar and .subnav redeclare their palette
     locally so they render the same on any host, which also puts those tokens
     out of :root's reach — they have to be restated per component. */
  :root:not([data-theme="light"]) .navbar {
    --nav-bg: var(--d-chrome);
    --subnav-outline: var(--d-nav-rule);
    --nav-ink: var(--d-ink);
    --nav-ink-soft: var(--d-ink-soft);
    --nav-line: var(--d-border);
    --nav-line-soft: var(--d-border);
    --nav-bg-stripe: var(--d-bg-soft);
    --nav-link: var(--d-ink-bright);
    --nav-link-active: var(--d-ink-bright);
    --nav-divider: var(--d-border-soft);
    --nav-accent: var(--d-nav-accent);
    --nav-focus: var(--d-focus);
    --nav-bg-mobile: var(--d-bg-soft);
    --nav-cornice: var(--d-cornice);
    --nav-drawer-bg: var(--d-bg-soft);
    --nav-drawer-shadow: var(--d-drawer-shadow);
    --nav-sublink: var(--d-ink-soft);
    --nav-sublink-strong: var(--d-ink);
    --nav-sublink-disabled: var(--d-disabled);
    --nav-drawer-ref: var(--d-iso);
    --nav-btn-bg: var(--d-border);
    --nav-btn-line: var(--d-plate-edge);
  }
  :root:not([data-theme="light"]) .topbar {
    --topbar-bg: var(--d-chrome);
  }
  /* slim-banner.css declares its palette on the component so it renders the
     same on either host, which puts it out of :root's reach. The mobile
     gradient sits on the wrapper, not the banner: below 720px .slim-banner is
     display:contents and the wrapper is what paints. */
  :root:not([data-theme="light"]) .slim-banner {
    --sb-navy: var(--d-banner-navy);
    --sb-gradient: var(--d-banner-gradient);
  }
  :root:not([data-theme="light"]) .slim-masthead {
    --sb-mobile-gradient: var(--d-banner-mobile-gradient);
  }
  /* footer.css pins its own surface (--navy resolved to two different values
     per bundle), which puts it out of :root's reach like the banner's. The band
     is dark in both themes, so its ring is gold, not the page accent. */
  :root:not([data-theme="light"]) .footer {
    --footer-bg: var(--d-footer-navy);
    --footer-focus: var(--d-focus);
  }
  :root:not([data-theme="light"]) .subnav {
    --subnav-ink: var(--d-ink-bright);
    /* Not --d-bg-canvas: that is the page's own value, so the bar
       vanished into the content below it. --d-bg-body is the same
       #0f1419 as --d-bg-card but named for full-width bands, which is
       what this bar is. Designer request, more separation. */
    --subnav-bg: var(--d-bg-body);
    --subnav-line: var(--d-bg-soft);
    --subnav-tab-ink: var(--d-ink-bright);
    --subnav-tab-disabled: var(--d-disabled);
    --subnav-ext-ink: var(--d-accent);
    --subnav-focus: var(--d-focus);
    --subnav-cornice: var(--d-cornice);
  }
  /* Light puts a lighter dot on a darker blue chip. The dark chip IS the
     lightened accent, so holding that relationship means going white; a dark
     dot reads as a hole punched in the chip. */
  :root:not([data-theme="light"]) .track-item.is-current .track-dot {
    --track-dot: 255, 255, 255;
  }
}

/* ══ Layer 2b: an explicit choice beats a light OS. Identical alias list. ══ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-canvas: var(--d-bg-canvas);
  --bg-card: var(--d-bg-card);
  --bg-body: var(--d-bg-body);
  --bg-soft: var(--d-bg-soft);
  --bg-soft-2: var(--d-bg-soft-2);
  --bg-hover: var(--d-bg-hover);
  --banner-house-img: var(--d-banner-house);
  --menu-surface: var(--d-bg-soft-2);
  --border-default: var(--d-border);
  --border-soft: var(--d-border-soft);
  --input-bg: var(--d-input-bg);
  --input-border: var(--d-input-border);
  --contrib-card-border: var(--d-contrib-card-border);
  --step-icon-bg: var(--d-step-icon-bg);
  --grid-line: var(--d-grid-line);

  --text-primary: var(--d-ink);
  --text-secondary: var(--d-ink-soft);
  --text-muted: var(--d-ink-faint);
  --text-link: var(--d-accent);
  --ink: var(--d-ink);
  --ink-2: var(--d-ink-2);
  --ink-soft: var(--d-ink-soft);
  --ink-faint: var(--d-ink-faint);
  --ink-strong: var(--d-ink-strong);

  --accent: var(--d-accent);
  --accent-blue: var(--d-accent);
  --accent-bright: var(--d-accent-strong);
  --accent-blue-higher-contrast: var(--d-accent-strong);
  --accent-blue-opacity-20: var(--d-accent-20);
  --accent-dim: var(--d-accent-wash);
  --accent-2: var(--d-accent-strong);
  --accent-bg: var(--d-accent-wash);
  --on-accent: var(--d-on-accent);
  --accent-royal: var(--d-accent-royal);
  --accent-royal-bg: var(--d-royal-wash);
  --accent-royal-border: var(--d-royal-line);
  --indigo: var(--d-indigo);
  --indigo-border: var(--d-indigo-line);
  --indigo-bg-hover: var(--d-indigo-wash);
  --indigo-border-hover: var(--d-indigo-line-2);
  --orange: var(--d-orange);

  --green: var(--d-green); --green-bg: var(--d-green-wash); --green-border: var(--d-green-line);
  --amber: var(--d-amber); --amber-bg: var(--d-amber-wash); --amber-border: var(--d-amber-line);
  --amber-higher-contrast: var(--d-amber);
  --red: var(--d-red); --red-bg: var(--d-red-wash); --red-border: var(--d-red-line);
  --red-vivid: var(--d-red-vivid); --red-bright: var(--d-red-bright);
  --violet: var(--d-violet); --violet-bg: var(--d-violet-wash); --violet-border: var(--d-violet-line);

  --clr-direction: var(--d-clr-direction);
  --clr-ewg: var(--d-clr-ewg);
  --clr-lewg: var(--d-clr-lewg);
  --clr-cwg: var(--d-clr-cwg);
  --clr-lwg: var(--d-clr-lwg);
  --clr-sg: var(--d-clr-sg);
  --clr-wg21: var(--d-clr-wg21);
  --chip-ewg-bg: var(--d-chip-ewg-bg); --chip-ewg-border: var(--d-chip-ewg-line);
  --chip-lewg-bg: var(--d-chip-lewg-bg); --chip-lewg-border: var(--d-chip-lewg-line);
  --chip-cwg-bg: var(--d-chip-cwg-bg); --chip-cwg-border: var(--d-chip-cwg-line);
  --chip-lwg-bg: var(--d-chip-lwg-bg); --chip-lwg-border: var(--d-chip-lwg-line);
  --chip-sg-bg: var(--d-chip-sg-bg); --chip-sg-border: var(--d-chip-sg-line);
  --chip-wg21-bg: var(--d-chip-wg21-bg); --chip-wg21-border: var(--d-chip-wg21-line);
  --chip-direction-bg: var(--d-chip-direction-bg); --chip-direction-border: var(--d-chip-direction-line);
  --chip-mailings-bg: var(--d-accent-wash); --chip-mailings-text: var(--d-accent);

  --line: var(--d-border);
  --line-soft: var(--d-border-soft);
  --line-hover: var(--d-border-hover);
  --card: var(--d-bg-card);

  --bg: var(--d-bg-canvas);
  --pragma-mark-hash: var(--d-pragma-mark-hash);
  --pragma-mark-p: var(--d-pragma-mark-p);
  --bg-stripe: var(--d-bg-soft);
  --accent-iso: var(--d-iso);
  --ok-text: var(--d-green); --ok-bg: var(--d-green-wash);
  --ok-dot: var(--d-green); --ok-line: var(--d-green-line);
  --focus-ring: var(--d-focus-ring);
  --placeholder-ink: var(--d-placeholder);
  --tentative-dot: var(--d-dot-faint);
  --papers-head-bg: var(--d-head-wash);
  --chip-neutral-bg: var(--d-bg-soft);
  --highlight-gradient: var(--d-panel-gradient);
  --aud-blue-ink: var(--d-clr-lwg); --aud-blue-border: var(--d-chip-lwg-line); --aud-blue-bg: var(--d-chip-lwg-bg);
  --aud-amber-ink: var(--d-clr-sg); --aud-amber-border: var(--d-chip-sg-line); --aud-amber-bg: var(--d-chip-sg-bg);

  /* foundation-family pages: books, community, events, meeting fund, legal */
  --book-plate: var(--d-book-plate);
  --accent-wash: var(--d-accent-wash);
  --accent-wash-line: var(--d-accent-line);
  --card-shadow: var(--d-shadow-sm);
  --tentative-bg: var(--d-bg-soft);
  --tag-community-bg: var(--d-accent-wash);
  --tag-about-ink: var(--d-violet); --tag-about-bg: var(--d-violet-wash); --tag-about-border: var(--d-violet-line);
  --legal-note-ink: var(--d-amber);
  /* shell.css's skip link. Declared on :root, so it is aliased here. */
  --skip-link-edge: var(--d-input-border);
  --skip-link-focus: var(--d-focus);
  /* banner.css: the full masthead (landing). Both stops are already tokens
     there, so :root reaches them; slim-banner.css keeps its palette on the
     component and is aliased below. */
  --banner-gradient: var(--d-banner-gradient);
  --banner-mobile-gradient: var(--d-banner-mobile-gradient);
  /* --navy stays a surface; only its two ink uses flip. */
  --label-ink: var(--d-ink);
  --iso-link-ink: var(--d-accent);
  --btn-accent-bg: var(--d-btn-accent);
  --btn-gold-ink: var(--d-on-gold);

  --pu-track: var(--d-bg-soft);
  --pu-select-bg: var(--d-bg-soft); --pu-select-border: var(--d-border); --pu-select-bg-2: var(--d-bg-soft-2);
  --pu-rev-border: var(--d-accent-line); --pu-rev-bg: var(--d-accent-wash); --pu-rev-hover: var(--d-bg-soft);
  --pu-rule: var(--d-accent-line);
  --pu-skeleton: var(--d-bg-soft); --pu-shimmer: var(--d-wash);
  --pu-chevron: var(--d-chevron);
  --account-chevron: var(--d-chevron);
  --account-btn-fill: var(--d-btn-fill); --account-danger-fill: var(--d-btn-danger-fill);
  --account-toggle-ink: var(--d-ink-faint);
  --pu-approved-ink: var(--d-green); --pu-approved-bg: var(--d-green-wash); --pu-approved-border: var(--d-green-line);
  --pu-rejected-ink: var(--d-red); --pu-rejected-bg: var(--d-red-wash); --pu-rejected-border: var(--d-red-line);
  --pu-progress-ink: var(--d-amber); --pu-progress-bg: var(--d-amber-wash); --pu-progress-border: var(--d-amber-line);

  --row-zebra: var(--d-bg-soft); --row-zebra-2: var(--d-bg-soft);
  --rule-soft: var(--d-rule-soft);
  --wash-dark: var(--d-wash);
  --shadow-pop: var(--d-shadow); --shadow-pop-lg: var(--d-shadow-lg);

  /* pragma.css. Its chrome tokens (--fill-chrome, --on-chrome, --chrome-*,
     --live-dot*, --on-signin) are deliberately absent: those surfaces stay
     dark on both themes, like the topbar. */
  --on-ink: var(--d-bg-card);      /* --ink inverts in dark, so its label must too */
  --signin-bg: var(--d-nav-accent);
  --green-ink: var(--d-green);
  --amber-ink: var(--d-amber);
  --red-ink: var(--d-red);
  --btn-glyph: var(--d-on-accent);
  --btn-glyph-go: var(--d-bg-card);
  --demo: var(--d-violet); --demo-ink: var(--d-violet);
  --demo-bg: var(--d-violet-wash); --demo-line: var(--d-violet-line);

  /* eval-paper.css */
  --raw-num-opacity: 1;   /* the gutter is 1.40:1 at 0.25, 5.08:1 here */
  --strike-warn: var(--d-strike-warn);
  --phase-pre-bg: var(--d-accent-wash); --phase-pre-ink: var(--d-accent-strong); --phase-pre-border: var(--d-accent-line);
  --phase-post-bg: var(--d-green-wash); --phase-post-ink: var(--d-clr-ewg); --phase-post-border: var(--d-green-line);
  --phase-none-bg: var(--d-chip-wg21-bg); --phase-none-ink: var(--d-clr-wg21); --phase-none-border: var(--d-chip-wg21-line);
}

:root[data-theme="dark"] .navbar {
  --nav-bg: var(--d-chrome);
  --subnav-outline: var(--d-nav-rule);
  --nav-ink: var(--d-ink);
  --nav-ink-soft: var(--d-ink-soft);
  --nav-line: var(--d-border);
  --nav-line-soft: var(--d-border);
  --nav-bg-stripe: var(--d-bg-soft);
  --nav-link: var(--d-ink-bright);
  --nav-link-active: var(--d-ink-bright);
  --nav-divider: var(--d-border-soft);
  --nav-accent: var(--d-nav-accent);
  --nav-focus: var(--d-focus);
  --nav-bg-mobile: var(--d-bg-soft);
  --nav-cornice: var(--d-cornice);
  --nav-drawer-bg: var(--d-bg-soft);
  --nav-drawer-shadow: var(--d-drawer-shadow);
  --nav-sublink: var(--d-ink-soft);
  --nav-sublink-strong: var(--d-ink);
  --nav-sublink-disabled: var(--d-disabled);
  --nav-drawer-ref: var(--d-iso);
  --nav-btn-bg: var(--d-border);
  --nav-btn-line: var(--d-plate-edge);
}
:root[data-theme="dark"] .topbar {
    --topbar-bg: var(--d-chrome);
  }
:root[data-theme="dark"] .slim-banner {
  --sb-navy: var(--d-banner-navy);
  --sb-gradient: var(--d-banner-gradient);
}
:root[data-theme="dark"] .slim-masthead {
  --sb-mobile-gradient: var(--d-banner-mobile-gradient);
}
:root[data-theme="dark"] .footer {
  --footer-bg: var(--d-footer-navy);
  --footer-focus: var(--d-focus);
}
  :root[data-theme="dark"] .subnav {
  --subnav-ink: var(--d-ink-bright);
  --subnav-bg: var(--d-bg-body);
  --subnav-line: var(--d-bg-soft);
  --subnav-tab-ink: var(--d-ink-bright);
  --subnav-tab-disabled: var(--d-disabled);
  --subnav-ext-ink: var(--d-accent);
  --subnav-focus: var(--d-focus);
  --subnav-cornice: var(--d-cornice);
}
:root[data-theme="dark"] .track-item.is-current .track-dot {
  --track-dot: 255, 255, 255;
}