/**
 * Shared day/night palette for the dark editorial template.
 *
 * Loaded AFTER each page's inline <style>, so these :root values win over the
 * ones declared there. Nothing else about those pages changes — the design
 * language (Fraunces, the grid, the amber accent, every component) is intact.
 *
 * The template's variables are already semantic rather than literal: --ink and
 * its steps are "the surface family", --paper and --text are "the ink family".
 * That is what makes a light theme a value swap instead of a rewrite —
 * `background:var(--ink); color:var(--paper)` reads correctly either way.
 *
 * Night is no longer near-black. #0A0B10 was two points off pure black, which
 * is what made every page feel like a void; #12141C keeps the depth and gives
 * the paper tones something to sit on.
 *
 * Contrast, measured against each theme's own background (WCAG 2.1):
 *   light  text 12.2 · text-dim 5.0 · amber 4.6 · signal 4.5 · headings 16.0
 *   dark   text 14.5 · text-dim 6.2 · amber 10.5 · signal 9.6 · headings 14.9
 * The five wave colours are used only as 56px glyphs and 3px rules, so they
 * are held to the 3:1 large-text bar rather than 4.5:1.
 */

/* ---------------------------------------------------------------- NIGHT */
/* Default, and what a no-JS visitor gets — the same experience as before. */
:root {
  --ink:#12141C; --ink-2:#1A1D28; --ink-3:#242838;
  --paper:#EFE7D4; --paper-dim:#D4CCB9;
  --amber:#FFB547; --amber-dim:#B87F2E;
  --signal:#34D1BF; --signal-dim:#1F8A7C;
  --coral:#FF6B5B;
  --delta:#5B7DD1; --theta:#8B7CF6; --alpha:#34D1BF; --beta:#FFB547; --gamma:#FF6B5B;
  --text:#E8E4D8; --text-dim:#9A968A;
  --rule:rgba(232,228,216,0.12); --rule-strong:rgba(232,228,216,0.28);

  /* Not in the page templates — added here for the few rules that hard-coded
     a dark value inline and therefore could not follow a variable. */
  --nav-bg:rgba(18,20,28,.80);
  --scrim:rgba(10,11,16,.62);
  --tint:rgba(255,181,71,.05);

  color-scheme: dark;
}

/* ----------------------------------------------------------------- DAY */
/* Keep this block and the prefers-color-scheme copy below in sync. They are
   duplicated on purpose: light-dark() would remove the duplication but is too
   new to put in front of this site's traffic, and a browser that does not
   understand it drops the declaration entirely rather than degrading. */
:root[data-theme="light"] {
  --ink:#F6F1E4; --ink-2:#FFFDF7; --ink-3:#EDE6D5;
  --paper:#14161F; --paper-dim:#4A4E5A;
  --amber:#9A5F0B; --amber-dim:#7A4A08;
  --signal:#0E7C6F; --signal-dim:#0A6156;
  --coral:#C93A28;
  --delta:#3A5FB8; --theta:#6D4FE0; --alpha:#0B8073; --beta:#A5670F; --gamma:#C93A28;
  --text:#2A2D38; --text-dim:#64676F;
  --rule:rgba(20,22,31,0.13); --rule-strong:rgba(20,22,31,0.24);

  --nav-bg:rgba(246,241,228,.84);
  --scrim:rgba(20,22,31,.42);
  --tint:rgba(154,95,11,.05);

  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ink:#F6F1E4; --ink-2:#FFFDF7; --ink-3:#EDE6D5;
    --paper:#14161F; --paper-dim:#4A4E5A;
    --amber:#9A5F0B; --amber-dim:#7A4A08;
    --signal:#0E7C6F; --signal-dim:#0A6156;
    --coral:#C93A28;
    --delta:#3A5FB8; --theta:#6D4FE0; --alpha:#0B8073; --beta:#A5670F; --gamma:#C93A28;
    --text:#2A2D38; --text-dim:#64676F;
    --rule:rgba(20,22,31,0.13); --rule-strong:rgba(20,22,31,0.24);

    --nav-bg:rgba(246,241,228,.84);
    --scrim:rgba(20,22,31,.42);
    --tint:rgba(154,95,11,.05);

    color-scheme: light;
  }
}

/* ------------------------------------------------- rules that hard-coded */
/* Each of these baked a night colour into the declaration, so no amount of
   token swapping would move them. */

/* Was rgba(10,11,16,.78) — a dark pane floating over a paper page. */
.nav { background: var(--nav-bg); }

/* The film grain is an `overlay` blend tuned for a dark ground; over paper it
   reads as dirt. Multiply at a lower strength keeps the texture honest. */
:root[data-theme="light"] body::before { mix-blend-mode: multiply; opacity: 0.022; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body::before { mix-blend-mode: multiply; opacity: 0.022; }
}

/* Generator-only chrome that hard-coded the night surface. */
.mini-player { background: color-mix(in srgb, var(--ink-2) 94%, transparent); }
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .mini-player { background: var(--ink-2); }
}

/* Injected by nav.js, which cannot see the page's own stylesheet. */
.nav-scrim { background: var(--scrim); }

/* --------------------------------------------------------------- toggle */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none; padding: 0;
  border: 1px solid var(--rule-strong); border-radius: 100px;
  background: transparent; color: var(--text); cursor: pointer;
  transition: color .25s ease, border-color .25s ease;
}
.theme-toggle:hover { color: var(--amber); border-color: var(--amber); }
.theme-toggle:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
/* One icon per theme; the pair is swapped rather than animated so the control
   still reads correctly when motion is reduced. */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="dark"]) .theme-toggle .icon-moon { display: none; }
}