/* theme.css — one palette for every o-page, in two registers.
 *
 * Thirteen pages each carried their own copy of the same :root block, and each
 * hardcoded the same handful of rgba() literals derived from it. That was fine
 * while there was one register: the literals and the variables agreed because
 * both were dark. A second register breaks that agreement — a white wash lifts
 * a dark card and washes out a light one — so the literals become variables
 * here and the register swaps them.
 *
 * The rule for anything added later: NO COLOUR LITERAL IN A PAGE. If a wash or
 * a glow is needed, it is rgba(var(--something-rgb), a). A page that reaches
 * for #06171E again has quietly opted out of the light register, and nobody
 * will notice until someone reads it in daylight.
 */

:root{
  /* the ground and the ink */
  --abyss:#06171E; --deep:#0A2129; --card:#123742; --card-hi:#17434F;
  --foam:#EFF6F5;
  --vapour:#C4DBDF; --vapour-dim:#82A0A8;
  --ground-top:#0C2932;

  /* the two accents */
  --liquid:#33C2D2; --liquid-deep:#1B8B99;
  --solid:#E7B24C; --solid-deep:#C58F2C;

  /* triplets, for every wash, glow, border and scrim built out of the above.
   * --wash is the subtle surface lift on a card; --well is the recessed ground
   * of an input or a code block. They invert as a pair. */
  --liquid-rgb:51,194,210;
  --solid-rgb:231,178,76;
  --vapour-rgb:196,219,223;
  --wash-rgb:255,255,255;
  --well-rgb:6,23,30;
  --card-rgb:18,55,66;
  --card-hi-rgb:23,67,79;

  --line:rgba(var(--vapour-rgb),0.13); --line-strong:rgba(var(--vapour-rgb),0.24);

  --display:'Syne',system-ui,sans-serif;
  --body:'Newsreader',Georgia,serif;
  --mono:'Space Mono',ui-monospace,monospace;
}

/* The light register. Every value below is the same role in a different key —
 * note --abyss inverting to near-white, because it is the BUTTON TEXT colour as
 * well as the page ground, so the buttons stay legible without a rule of their
 * own. The two accents darken rather than lighten: teal and amber at their dark
 * values carry enough contrast on paper, where their bright values do not. */
:root[data-theme="light"]{
  --abyss:#FBF8F2; --deep:#F3EEE3; --card:#FFFFFF; --card-hi:#FFFDF8;
  --foam:#12333C;
  --vapour:#3C5A63; --vapour-dim:#6B848D;
  --ground-top:#FFFDF8;

  --liquid:#0D6B79; --liquid-deep:#0A5561;
  --solid:#8E6210; --solid-deep:#6F4C08;

  --liquid-rgb:13,107,121;
  --solid-rgb:142,98,16;
  --vapour-rgb:60,90,99;
  --wash-rgb:18,51,60;      /* the wash darkens a light surface as white lifts a dark one */
  --well-rgb:255,255,255;   /* and a well brightens where it used to deepen */
  --card-rgb:255,255,255;
  --card-hi-rgb:255,253,248;

  --line:rgba(var(--vapour-rgb),0.16); --line-strong:rgba(var(--vapour-rgb),0.30);
}

/* Cards read as raised on paper and as inset on a dark ground — the same box,
 * the opposite affordance, which is why this is a shadow here and a wash there. */
:root[data-theme="light"] .sect,
:root[data-theme="light"] .card{ box-shadow:0 1px 3px rgba(var(--wash-rgb),0.07); }

/* The toggle. A page with its own #btn-theme in a bar gets that wired instead;
 * anything else gets this, fixed out of the way, so no page needs new markup. */
.theme-toggle{
  position:fixed; top:12px; right:12px; z-index:99;
  background:rgba(var(--wash-rgb),0.06); border:1px solid var(--line);
  border-radius:6px; color:var(--vapour-dim);
  font-family:var(--mono); font-size:13px; line-height:1;
  padding:7px 9px; cursor:pointer;
}
.theme-toggle:hover{ color:var(--foam); border-color:var(--line-strong); }
@media print{ .theme-toggle{ display:none } }

/* A hand-drawn diagram carries its own fixed light-on-dark fills, and rewriting
 * every one of them into a variable is neither possible in an SVG presentation
 * attribute nor worth it. So the diagram keeps its dark ground in both registers
 * and simply sits on a plate — a figure on the page rather than part of it. */
:root[data-theme="light"] svg[role="img"]{
  background:#0A2129; border-radius:12px; padding:10px;
}