/* Night mode for vertexalpha.xyz.
 *
 * WHY THIS FILE EXISTS AND WHY IT IS THE ONLY FILE THAT KNOWS ABOUT DARK
 * ---------------------------------------------------------------------
 * The site had no stylesheet at all before this. Every page carried its own inline <style> with its
 * own :root block, and those seven blocks used five mutually incompatible naming schemes for the
 * same twelve colours (--paper vs --bg vs --bg2, --ink vs --text, --red vs --signal vs --accent).
 * Authoring a dark palette per page against that would have produced five themes that drift the
 * first time one page is edited, which is exactly the objection raised when this was proposed.
 *
 * So: no page is asked to know its own dark values. Every page keeps its light :root untouched and
 * links this one file, which redeclares the union of all five schemes under a single selector.
 * When data-theme is absent the file contributes nothing at all, so the light rendering is byte for
 * byte what shipped. That is deliberate: dark is opt-in, and reverting it is deleting one <link>.
 *
 * SELECTOR SPECIFICITY IS LOad-BEARING
 * :root[data-theme="dark"] is (0,1,1). A bare :root is (0,1,0). The dark block therefore wins over
 * every page's inline :root regardless of whether the browser parses this file before or after the
 * page's own <style> block. Using [data-theme="dark"] alone would tie at (0,1,0) and the winner
 * would depend on <link> ordering in seven separate files, which is precisely the kind of thing
 * that survives review and breaks six months later.
 *
 * COLOUR DERIVATION
 * The neutrals are not an inversion of the light ramp. They are authored in OKLCH at the paper's
 * own hue (H=85, the warm yellow the brand's #f3f0e8 sits on) with chroma pulled down to 0.007-0.011
 * as lightness falls, so the dark surface reads as the same paper seen in a dark room rather than as
 * a different, cooler brand. Accents are lifted in L and pulled in C, because the light values were
 * chosen to sit on a near-white field: #e11d3c on #f3f0e8 is 4.15:1, and the same red on a dark
 * surface is muddy. The lifted #fb5760 is 5.96:1 on --bg. Every text pair here was measured, and the
 * dark ramp is at or above the light one at every step: ink 16.0 (light 16.1), ink-2 8.3 (light 6.8),
 * ink-3 4.6 (light 3.3). The tertiary ink is the one that was actually failing in light mode.
 */

:root[data-theme="dark"] {
  color-scheme: dark;

  /* surfaces */
  --paper: #13110d;
  --paper-2: #1b1915;
  --bg: #13110d;
  --bg-2: #1b1915;
  --bg2: #1b1915;
  --bg3: #23211c;
  --panel: #1f1d19;
  --elev: #191713;
  --stage: #0b0a07;

  /* rules */
  --line: #302d28;
  --line-soft: #23211c;
  --border: #302d28;
  --border2: #403d37;

  /* type */
  --ink: #efece7;
  --ink-2: #afaca5;
  --ink-3: #817d75;
  --text: #efece7;
  --muted: #afaca5;
  --faint: #817d75;

  /* signal */
  --red: #fb5760;
  --red-deep: #d5404b;
  --signal: #fb5760;
  --signal-dim: #d5404b;
  --signal-deep: #d5404b;
  --down: #fb5760;
  --accent: #fb5760;
  --accent2: #d5404b;
  --accent-glow: rgba(251, 87, 96, .14);

  /* semantic */
  --up: #46b781;
  --green: #46b781;
  --hl: #3ebca4;
  --rose: #e18599;
  --orange: #dca744;
  --purple: #b593dc;
  --lime: rgba(70, 183, 129, .12);
  --lime-line: rgba(70, 183, 129, .40);
}

/* Literals the pages hard-coded, re-pointed for dark.
 * These are not tokenised in the page source and cannot be, without editing seven inline <style>
 * blocks and risking the live light rendering. Overriding them here keeps every dark decision in
 * one file. Each selector is copied verbatim from the page it belongs to, and each is listed with
 * the value it is replacing so a future edit to the page is detectable as a mismatch here. */

/* app: the faint 46px grid on body::before was a warm mauve tuned for paper (rgba(120,90,110,.05))
 * and disappears entirely on a dark field. */
:root[data-theme="dark"] body::before {
  background-image:
    linear-gradient(rgba(190, 170, 180, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(190, 170, 180, .045) 1px, transparent 1px);
}

/* app: three surfaces resolve to a cream literal because they were written as var(--paper,#fbf9f4)
 * on a page whose token is --bg. --paper is undefined there, so the fallback is what actually
 * renders today, in light mode too. */
:root[data-theme="dark"] .tokmenu,
:root[data-theme="dark"] .modal {
  background: var(--panel);
}

:root[data-theme="dark"] .inc-form select,
:root[data-theme="dark"] .inc-form input {
  background: var(--elev);
  color: var(--ink);
}

/* Shadows authored as ink-on-paper. Ink is now the light colour, so these would glow. */
:root[data-theme="dark"] .card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

:root[data-theme="dark"] .modal {
  box-shadow: 0 24px 70px rgba(0, 0, 0, .62);
}

:root[data-theme="dark"] .modal-ov {
  background: rgba(0, 0, 0, .72);
}

:root[data-theme="dark"] .pv-note {
  background: rgba(255, 255, 255, .035);
}

/* Buttons that put #fff on a fill. The fills are light in dark mode, so white on them is unreadable
 * (--up dark is #46b781: white is 2.1:1). Flip the label to the surface colour instead. */
:root[data-theme="dark"] .cta.done,
:root[data-theme="dark"] .mini-btn.done {
  color: #13110d !important;
}

:root[data-theme="dark"] .dl {
  color: #13110d;
}

/* studio: the amber warning strip was a light pink wash. */
:root[data-theme="dark"] .warn {
  background: rgba(251, 87, 96, .12);
}

/* studio: the sticky action bar fades to the page colour, which was hard-coded as paper. */
:root[data-theme="dark"] .actions {
  background: linear-gradient(to top, var(--bg) 62%, rgba(19, 17, 13, 0));
}

:root[data-theme="dark"] .scaler {
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .7);
}

/* studio: #card is NOT chrome. It is the 1600x900 social card that html2canvas rasterises and the
 * operator posts to X. It is authored against var(--bg)/var(--ink)/var(--line)/var(--signal), so
 * without this block, switching the studio page to dark would silently change the artwork that gets
 * published. Re-pin the whole subtree to the light palette. The card is brand output with a fixed
 * appearance; the page around it is chrome and may invert. */
:root[data-theme="dark"] #card {
  --bg: #f3f0e8;
  --bg-2: #ece8dd;
  --stage: #e4dfd2;
  --panel: #faf8f2;
  --line: #d7d1c4;
  --line-soft: #e4dfd3;
  --ink: #17140f;
  --ink-2: #57524a;
  --ink-3: #8a8478;
  --signal: #e11d3c;
  --signal-deep: #b4142f;
  --up: #1f7a52;
  --hl: #17998a;
}

/* docs: the accent button label, and the info callout tinted with ink. */
:root[data-theme="dark"] .callout.info {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .12);
}

:root[data-theme="dark"] pre {
  color: #d4cfc6;
}

:root[data-theme="dark"] pre .kw { color: #fb5760; }
:root[data-theme="dark"] pre .str { color: #46b781; }
:root[data-theme="dark"] pre .cmt { color: #7d786f; }
:root[data-theme="dark"] pre .num { color: #dca744; }
:root[data-theme="dark"] pre .fn { color: #b593dc; }
:root[data-theme="dark"] pre .var { color: #d4cfc6; }

/* The control. Deliberately not a sun/moon glyph: the rest of this site speaks in mono, uppercase,
 * letterspaced telemetry (.live-tag, .pv-note, the epoch readouts), so the theme switch states the
 * mode it is currently in, in that same voice, and does nothing on hover except firm up its rule.
 * It inherits --line, --ink-3 and --mono, so it is styled correctly on all five naming schemes
 * without a per-page rule, and it is the same object in light and dark. */
.vx-theme {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line, #d7d1c4);
  background: transparent;
  color: var(--ink-3, var(--faint, #8a8478));
  font-family: var(--mono, var(--font-mono, 'IBM Plex Mono', monospace));
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  padding: 6px 9px;
  border-radius: 3px;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}

.vx-theme:hover {
  color: var(--ink-2, var(--muted, #57524a));
  border-color: var(--ink-3, var(--faint, #8a8478));
}

.vx-theme:focus-visible {
  outline: 2px solid var(--hl, #0e8a76);
  outline-offset: 2px;
}

.vx-theme .vx-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
}

:root[data-theme="dark"] .vx-theme .vx-dot {
  background: currentColor;
}

/* docs puts its nav in a scrolling sidebar; the control sits under the brand mark, not inline. */
#sidebar .vx-theme {
  margin: 4px 20px 14px;
}

@media (prefers-reduced-motion: reduce) {
  .vx-theme { transition: none; }
}