/* Design tokens. Light is the base; dark overrides under [data-theme="dark"]. */
:root {
  --bg: #f4f2ed; --ink: #0a0d10; --rule: #0a0d10; --muted: #686d72;
  --block: #0a0d10; --block-ink: #f4f2ed;
  --card: #d9d5cc;
  --gold: #c4ab66; --gold-cell: #ceb36b; --on-gold: #0a0d10;
  --ring: #4c606e; --win-ink: #0a0d10;
  --list: #0a0d10; --list-ink: #f4f2ed; --list-rule: #0a0d10; --panel: #f4f2ed;
  --tile-a: #0a0d10; --tile-a-ink: #f4f2ed; --tile-b: #f4f2ed; --tile-b-ink: #0a0d10;
  --sign: #8b949b;
  /* text tones: --tx-1 bright (headings, links), --tx-2 intermediate (leads), --tx-3 body; meta stays --muted */
  --tx-1: #0a0d10; --tx-2: #2c3339; --tx-3: #494e53;
  --m-bg: #f4f2ed; --m-ink: #0a0d10; --m-soft: #2c3339; --m-dim: #d9d5cc; --m-rule: #0a0d10;
  --m-quiet: #494e53;
  --m-track: rgba(10, 13, 16, .12); --m-ring: #4c606e;

  --s: min(1px, calc(100vw / 1440));
  /* column tracks: with round() support every column but the last is rounded to whole pixels, so rules land on one pixel in all browsers.
   --c4-last lines up with column 4 under the header; --dev is one device pixel (set in <head> by inc/setup.php) */
  --dev: 1px;
  --c2: repeat(2, minmax(0, 1fr)); --c3: repeat(3, minmax(0, 1fr)); --c4: repeat(4, minmax(0, 1fr)); --c5: repeat(5, minmax(0, 1fr));
  --hair: 1px;   /* a rule's thickness: 1px rounded to whole device pixels, so rules stay crisp at 125% or 150% scaling */
  --c4-last: 25%; --c4-mid: 50%;   /* --c4-mid: the edge between columns 2 and 3 */   /* display type and CTA geometry scale below 1440 */
  --hh: 72px;  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.77, 0, .18, 1);

  /* type scale: fixed up to 1440, growing to 2560, stepped down at 1080 and 700 */
  --t-xxl: clamp(56px, 45.714px + 0.714vw, 64px);
  --t-xl: clamp(40px, 29.714px + 0.714vw, 48px);
  --t-lg: clamp(32px, 14px + 1.25vw, 46px);
  --t-ml: clamp(28px, 22.857px + 0.357vw, 32px);
  --t-md: clamp(18px, 10.286px + 0.536vw, 24px);
  --t-p: clamp(15px, 13.714px + 0.089vw, 16px);
  --t-sm: clamp(13px, 11.714px + 0.089vw, 14px);
  --t-body: 16px;

  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-head: "Stack Sans Headline", system-ui, sans-serif;
  --font-text: "Stack Sans Text", system-ui, sans-serif;

  color-scheme: light;
}
@supports (width: round(down, 10%, 1px)) {
  :root {
    --c2: round(down, 50%, 1px) minmax(0, 1fr);
    --c3: repeat(2, round(down, calc(100% / 3), 1px)) minmax(0, 1fr);
    --c4: repeat(3, round(down, 25%, 1px)) minmax(0, 1fr);
    --c5: repeat(4, round(down, 20%, 1px)) minmax(0, 1fr);
    --c4-last: calc(100% - 3 * round(down, 25%, 1px));
    --c4-mid: calc(2 * round(down, 25%, 1px));
    --hair: max(var(--dev), round(nearest, 1px, var(--dev)));
  }
}

@media (max-width: 1080px) {
  :root { --t-xxl: 36px; --t-xl: 32px; --t-lg: 28px; --t-ml: 24px; --t-md: 17px; --t-p: 15px; --t-sm: 13px; }
}
@media (max-width: 700px) {
  :root { --t-xxl: 32px; --t-xl: 24px; --t-p: 14px; }
}

:root[data-theme="dark"] {
  --bg: #0a0d10; --ink: #f4f2ed; --rule: #2c3339; --muted: #8b949b;
  --block: #161b20; --block-ink: #f4f2ed; --card: #20272d;
  --ring: #6a7f8d; --win-ink: #0a0d10;
  --list: #161b20; --list-ink: #f4f2ed; --list-rule: #2c3339; --panel: #0a0d10;
  --tile-a: #f4f2ed; --tile-a-ink: #0a0d10; --tile-b: #161b20; --tile-b-ink: #f4f2ed;
  --tx-1: #f4f2ed; --tx-2: #c9c7c1; --tx-3: #a8a6a2;
  --m-bg: #161b20; --m-ink: #f4f2ed; --m-soft: #c6c5bf; --m-dim: #2c3339; --m-rule: #2c3339; --m-quiet: #a5a5a1;
  --m-track: rgba(244, 242, 237, .2); --m-ring: #6a7f8d;
  color-scheme: dark;
}

/* text tones per surface (bright / intermediate / body); steel and gold have one tone only */
.cell.card { --tx-1: #0a0d10; --tx-2: #2c3339; --tx-3: #464b4f; }
:root[data-theme="dark"] .cell.card { --tx-1: #f4f2ed; --tx-2: #c9c8c2; --tx-3: #aaaba7; }
.cell.ink, .cell.inv { --tx-1: #f4f2ed; --tx-2: #c9c7c1; --tx-3: #a8a6a2; }
:root[data-theme="dark"] :is(.cell.ink, .mpanel) { --tx-1: #f4f2ed; --tx-2: #c6c5bf; --tx-3: #a5a5a1; }
:root[data-theme="dark"] .cell.inv { --tx-1: #0a0d10; --tx-2: #2c3339; --tx-3: #494e53; }
.cell.steel { --tx-1: #f4f2ed; --tx-2: #f4f2ed; --tx-3: #f4f2ed; }
.cell.gold { --tx-1: var(--on-gold); --tx-2: var(--on-gold); --tx-3: var(--on-gold); }