/* Design-system tokens — docs/DESIGN-SYSTEM.md §§1–3 (the "Ledger" system, titled "Math Map" in
   its own design-system.json). Values are copied from that file; change them there first.
   This is a template asset: lab/make_site.py links it, and no generated page carries a colour value. */

:root {
  /* §1 colour — one theme, paper */
  --paper: #faf8f4;
  --paper-sunk: #f1ece3;
  --paper-edge: #ece6da;
  --plate: #faf8f4;                /* the paper a raster figure sits on, by day and at night (one-site §2.4): the dark token file leaves it as it is */
  --rule: #d9d2c5;
  --rule-strong: #8c8477;
  --ink: #1c1a17;
  --ink-muted: #5e574c;
  --ink-faint: #8b8376;
  --link: #17457f;
  --ink-reverse: var(--paper);
  --state-open: #1f4e8c;
  --state-running: #8f5b0c;
  --state-settled: #1d6440;
  --state-falsified: #96241f;
  --state-held: #59478c;
  --state-retired: var(--ink-faint);

  /* §2 type — two families, no sans */
  --font-serif: "STIX Two Text", "STIX Two Math", Charter, "Bitstream Charter", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* §3 spacing — a 4px ladder */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* §3 radius */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 3px;

  /* §3 layout */
  --measure: 33rem;
  --margin-col: 104px;
  --margin-gap: 16px;
  --fold: 42rem;

  /* §7 PDF geometry */
  --page-w: 509pt;
  --page-h: 679pt;
  --page-margin: 26pt;
  --tab-w: 26pt;
  --tab-h: 58pt;
  --tab-gap: 3pt;
}

/* §2 the ladder — fixed, no intermediate sizes */
.display    { font: 700 30px/34px var(--font-serif); letter-spacing: -0.008em; }
.title      { font: 600 20px/26px var(--font-serif); }
.subhead    { font: 600 17px/23px var(--font-serif); }
.body       { font: 400 16px/25px var(--font-serif); }
.body-tight { font: 400 15px/22px var(--font-serif); }
.quote      { font: italic 400 15px/23px var(--font-serif); }
.caption    { font: italic 400 13.5px/19px var(--font-serif); }

.id    { font: 500 12px/16px var(--font-mono); letter-spacing: 0.02em; }
.meta  { font: 400 11.5px/17px var(--font-mono); }
.label { font: 600 10.5px/14px var(--font-mono); letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink); }
.code  { font: 400 13px/20px var(--font-mono); }
.num   { font: 400 13.5px/20px var(--font-mono); }
.micro { font: 500 9.5px/13px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }

/* §2 setting mathematics: raised glyphs contribute nothing to the line box. Not optional. */
sup, sub { line-height: 0; font-size: 0.72em; }

/* §1 print is always paper. A screen page may link a dark token file after this one; whatever it redefines
   is put back here for print. The selector outranks that file's guarded :root selectors (html:root:not(…)
   is 0,2,1 against their 0,2,0), so the order of the links does not matter. */
@media print {
  html:root:not([data-theme="print"]) {
    --paper: #faf8f4;
    --paper-sunk: #f1ece3;
    --paper-edge: #ece6da;
    --rule: #d9d2c5;
    --rule-strong: #8c8477;
    --ink: #1c1a17;
    --ink-muted: #5e574c;
    --ink-faint: #8b8376;
    --link: #17457f;
    --state-open: #1f4e8c;
    --state-running: #8f5b0c;
    --state-settled: #1d6440;
    --state-falsified: #96241f;
    --state-held: #59478c;
    color-scheme: light;
  }
}