/* ==========================================================================
   Before the First Word: dark theme
   The same page after dusk, in the blacks and greys of the release site's dark
   theme, which the author chose for the whole page: a near-black page, tiles one
   step up, neutral greys with no tint, white ink at four strengths. The teal,
   the orange and every other hue are the essay's own, and they glow on it.

   Loaded after styles.css. The <link> that loads this file decides when it
   applies: the reader's system setting by default, or always / never once
   they use the theme switch. It is never applied in print.

   Two blocks: every token's night value, then the release's inks and hairlines.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* paper: the release site's page and tile. Sunk is a shade under the page */
  --paper: #0a0a0a;
  --paper-raised: #121212;
  --paper-sunk: #050505;
  --paper-veil: rgb(10 10 10 / 0.85);

  /* ink: the release site's white at 93%, 74% and 59%, as it lands on the page's black
     (opaque here, because the figures' strokes cross and must not add up) */
  --ink: #eeeeee;
  --ink-soft: #c0c0c0;
  --muted: #9a9a9a;
  --faint: #6e6e6e;
  --on-accent: #0b1513;

  /* lines: the release site's hairlines, white at 10% and 18%, as they land on the page */
  --line: #232323;
  --line-strong: #363636;

  /* teal */
  --accent: #5cc4b5;
  --accent-ink: #a6e6db;
  --accent-strong: #4dbba8;
  --accent-soft: #2f7d73;
  --accent-tint: #173029;
  --accent-wash: rgb(92 196 181 / 0.12);

  /* terracotta and orange */
  --warm: #f0a08a;
  --warm-strong: #ef8a5f;
  --warm-soft: #9c5a47;
  --warm-tint: #2e1f1a;

  /* supporting colours */
  --gold: #e3bf74;
  --gold-strong: #d6a650;
  --gold-soft: #8a6d35;
  --gold-tint: #2a2417;
  --blue: #9ab4f5;
  --blue-strong: #7497ec;
  --blue-tint: #1c2436;
  --plum: #eea3cc;
  --plum-strong: #e16fae;
  --plum-tint: #2e1c27;
  --stone: #787878;
  --stone-soft: #535353;
  --stone-tint: #1e1e1e;

  /* language families. English is a grey with no tint, set dark enough to stay apart from
     its neighbour, magenta, for colour-blind readers (checked with the palette validator) */
  --fam-ia: #4dbba8;
  --fam-dr: #ef8a5f;
  --fam-tb: #7497ec;
  --fam-aa: #e16fae;
  --fam-en: #787878;

  /* figures */
  --fig-node: #121212;
  --fig-node-edge: #414141;
  --fig-input: #26221a;
  --fig-input-edge: #a88843;
  --fig-focal: #15302b;
  --fig-focal-edge: #4dbba8;
  --fig-fault: #2f1d18;
  --fig-fault-edge: #e07a61;
  --fig-zone: #0f0f0f;
  --fig-edge: #9e9e9e;
  --fig-land: #191919;
  --fig-read: #12302b;
  --fig-read-edge: #2f7d73;
  --fig-read-ink: #a6e6db;
  --word-bad: #ff7b70;
  --word-err: #f2a65a;
  --word-fine: #5cc4b5;

  /* 3D blocks: darker faces, lit edges */
  --iso-teal-top: #3aa697;
  --iso-teal-left: #226f65;
  --iso-teal-right: #1a5850;
  --iso-teal-edge: #7fdccf;
  --iso-warm-top: #c07260;
  --iso-warm-left: #8d4c3f;
  --iso-warm-right: #723d33;
  --iso-warm-edge: #f4a790;
  --iso-gold-top: #b8944a;
  --iso-gold-left: #886a32;
  --iso-gold-right: #6d5428;
  --iso-gold-edge: #ecc988;
  --iso-blue-top: #5575c8;
  --iso-blue-left: #3b559c;
  --iso-blue-right: #2f4580;
  --iso-blue-edge: #a9c0f7;
  /* the product's blue as a 3D block: the model itself in the release hero */
  --iso-ours-top: #1e6cc8;
  --iso-ours-left: #17549c;
  --iso-ours-right: #12437e;
  --iso-ours-edge: #57a9ff;
  --iso-stone-top: #383838;
  --iso-stone-left: #2b2b2b;
  --iso-stone-right: #232323;
  --iso-stone-edge: #6a6a6a;
  --iso-ghost-top: #242424;
  --iso-ghost-left: #1c1c1c;
  --iso-ghost-right: #151515;
  --iso-ghost-edge: #3f3f3f;

  /* the release's charts. The blue itself, the plate under a brand mark and hues 1 and 6
     are the same at night. The greys are the release site's: its bars, its ranked ramp,
     its quietest ink (white at 47%), its floating card, a row pointed at, the means row.
     The light theme's four rival greys are derived from the four here: after changing one,
     run `node tools/release/greys.mjs` and copy what it prints into styles.css */
  --bench-ours-hover: #258eff;
  --bench-ours-ink: #57a9ff;
  --bench-ours-wash: rgb(26 136 255 / 0.141);
  --bench-rival: #4d4d4d;
  --bench-rival-hover: #5e5e5e;
  --bench-rank-1: #5e5e5e;
  --bench-rank-8: #333333;
  --bench-quiet: #ffffff78;
  --bench-raised: #1f1f1f;
  --bench-hover: #1a1a1a;
  --bench-band: #171717;
  --bench-series-2: #d95926;
  --bench-series-3: #199e70;
  --bench-series-4: #c98500;
  --bench-series-5: #d55181;
  --bench-series-7: #9085e9;
  --bench-series-8: #e66767;

  /* the research track's charts. The source post has no dark theme, so these are chosen,
     not copied: each series keeps its hue and its chroma and is lifted until it reads on
     the black page, with the lead the strongest, as it is by day. Checked with the palette
     validator against #0a0a0a: every one stands at 6.6 to 1 or more */
  --plot-lead: oklch(0.88 0.06 250);
  --plot-dose1: oklch(0.8 0.11 80);
  --plot-dose2: oklch(0.74 0.1 210);
  --plot-dose3: oklch(0.68 0.11 300);
  --plot-bad: oklch(0.7 0.14 28);
  --plot-good: oklch(0.76 0.09 150);
  --plot-quiet: oklch(0.7 0.055 218);

  /* interaction */
  --focus: #ef8a5f;
  --select: #1f4a44;
  --select-ink: #e6f5f1;
  --target: rgb(92 196 181 / 0.14);
  --link-line: rgb(92 196 181 / 0.4);

  /* elevation */
  --shadow-card: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 24px 50px -20px rgb(0 0 0 / 0.75);
  --backdrop: rgb(0 0 0 / 0.66);

  /* progress */
  --track: #2b2b2b;

  /* the client tier at night: a breath of the teal on the black, no stronger */
  --client-wash: color-mix(in oklab, var(--accent) 7%, var(--paper));

  /* code in the Hugging Face guide: the Material palette's roles at night, 5.6 to 1 and up
     on --paper-sunk */
  --code-keyword: #c792ea;
  --code-string: #c3e88d;
  --code-number: #f78c6c;
  --code-function: #82aaff;
  --code-type: #89ddff;
  --code-builtin: #ffcb6b;
  --code-comment: #7d8799;
  --code-variable: #f07178;
  --code-meta: #d2a8ff;

  /* which icon the theme switch shows */
  --icon-sun: block;
  --icon-moon: none;
}

/* The release keeps the release site's inks and hairlines exactly: white at four
   strengths, laid over whatever is beneath, so text and rules are a touch lighter on a
   tile than on the page, as they are there. (The values above are the same whites as
   they land on the page's black.) */
.release {
  --ink: #ffffffed;
  --ink-soft: #ffffffbd;
  --muted: #ffffff96;
  --line: #ffffff1a;
  --line-strong: #ffffff2e;
}