/* Dark palette.

   Loaded after the light tokens on site pages, and injected late into pieces so
   it lands after the author's own :root block. Three states are handled, not
   two: an explicit choice stamps data-theme on the root, and the default
   "system" setting stamps nothing, where only prefers-color-scheme separates
   light from dark.

   Only tokens are redefined here. Components read tokens, so nothing needs a
   second rule - except the handful of literal colours in the feature page's own
   stylesheet, which are mapped back onto tokens at the end. */

:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:#0E1318; --ink:#E9EDF2; --body:#BFC9D4; --panel:#161D25;
    --rule:#2A343F; --hair:#1F2831; --muted:#8B98A7;
    --signal:#7B9DFF; --lift:#E0A155; --alert:#EE7F76;
    --code-bg:#141C25; --code-ink:#DCE4ED;
    --s1:#7B9DFF; --s2:#5FD08A; --s3:#E8A94E; --s4:#F0857B;
    --s5:#4FC4D6; --s6:#A98BE0; --s7:#93A6BA;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:#0E1318; --ink:#E9EDF2; --body:#BFC9D4; --panel:#161D25;
  --rule:#2A343F; --hair:#1F2831; --muted:#8B98A7;
  --signal:#7B9DFF; --lift:#E0A155; --alert:#EE7F76;
  --code-bg:#141C25; --code-ink:#DCE4ED;
  --s1:#7B9DFF; --s2:#5FD08A; --s3:#E8A94E; --s4:#F0857B;
  --s5:#4FC4D6; --s6:#A98BE0; --s7:#93A6BA;
}

/* ---- the feature page's own literals ----
   The piece predates these tokens and hardcodes a few light-only values. They
   are mapped rather than left, since a light hairline on a dark ground reads as
   a scratch across the page. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .standfirst,
  :root:not([data-theme="light"]) .lede { color: var(--body); }
  :root:not([data-theme="light"]) table.data td { border-bottom-color: var(--hair); }
  :root:not([data-theme="light"]) .result td { border-bottom-color: var(--hair); }
  :root:not([data-theme="light"]) .result tbody tr:hover,
  :root:not([data-theme="light"]) .d-row:hover,
  :root:not([data-theme="light"]) .r-row:hover { background: var(--panel); }
  :root:not([data-theme="light"]) .d-track,
  :root:not([data-theme="light"]) .bar-track { background: var(--panel); }
  :root:not([data-theme="light"]) .d-row,
  :root:not([data-theme="light"]) .r-row { border-bottom-color: var(--hair); }
  :root:not([data-theme="light"]) .cv-meta .loc { color: var(--muted); }
}
:root[data-theme="dark"] .standfirst,
:root[data-theme="dark"] .lede { color: var(--body); }
:root[data-theme="dark"] table.data td { border-bottom-color: var(--hair); }
:root[data-theme="dark"] .result td { border-bottom-color: var(--hair); }
:root[data-theme="dark"] .result tbody tr:hover,
:root[data-theme="dark"] .d-row:hover,
:root[data-theme="dark"] .r-row:hover { background: var(--panel); }
:root[data-theme="dark"] .d-track,
:root[data-theme="dark"] .bar-track { background: var(--panel); }
:root[data-theme="dark"] .d-row,
:root[data-theme="dark"] .r-row { border-bottom-color: var(--hair); }
:root[data-theme="dark"] .cv-meta .loc { color: var(--muted); }