/* tokens.css — ARGO DESIGN SYSTEM v1.1 (Direction A, the Atlas Plate). Rulings: Omar 2026-09-12 (the direction),
   2026-09-13 (his parts review: day accent = a warm blue, night paper = a warm navy, night accent = gold).
   THIS FILE IS THE ONLY PLACE A COLOUR, A TYPE SIZE, A SPACE, A RADIUS OR A SHADOW IS DEFINED.
   It is read-only for implementers: a change here is an orchestrator commit and the conformance
   test pins its hash. The law behind every value: brains/argo-site-brain/design/DESIGN-SYSTEM.md.

   Two themes, one plate: day = ink on ivory paper (the default), night = the same plate printed on
   black paper. `data-theme="day"|"night"` overrides the device; no attribute = the device decides
   (theme.js, unchanged). Every token below exists in BOTH blocks, name for name. */

@font-face { font-family: 'Literata'; src: url('/fonts/literata-normal-200-900.woff2') format('woff2'); font-style: normal; font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'Literata'; src: url('/fonts/literata-italic-200-900.woff2') format('woff2'); font-style: italic; font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/ibm-plex-mono-normal-400.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/ibm-plex-mono-normal-500.woff2') format('woff2'); font-style: normal; font-weight: 500; font-display: swap; }

:root {
  /* ── THE FIVE COLOURS (day) ─────────────────────────────────────────────────────────────── */
  --paper:     #F2EDE2;   /* the ground. Neutral ivory, no tint. */
  --ink:       #161412;   /* every word, every rule (rules through --rule alphas below). 14.6:1 */
  --ink-soft:  #5C5850;   /* captions, table units, secondary lines. 6.2:1 on paper */
  --accent:    #2F5D8A;   /* "yours": the reader's points, the one primary action, today's row.
                             The horizon and meridian on the plate. A warm mid blue (Omar 09-13: "the red is
                             a little harsh"). 5.9:1 on paper, 6.5:1 on the sheet. Nowhere else. */
  --sheet:     #FBF8F1;   /* the one floating surface: the place-suggest sheet, the wheel popover */
  --on-accent: #F2EDE2;   /* text on the primary action. 5.9:1 */

  /* ── THE CHART'S OWN COLOURS (the one exception to "colour is a signal"; they live INSIDE the
        plate and the aspect grid, never on the page: aspect lines by class, as every printed chart
        does it — hard red, soft blue, minor green) ──────────────────────────────────────────── */
  --chart-hard:  #A3402A;
  --chart-soft:  #2F5D8A;
  --chart-minor: #4F7F5A;
  /* sign glyphs by element, the printed convention (fire · earth · air · water); chart-only */
  --chart-fire:  #B5541F;
  --chart-earth: #4F7F3A;
  --chart-air:   #9A7A14;
  --chart-water: #2F6D8A;

  /* ── RULES (the ink at two alphas; the only alphas in the system) ─────────────────────── */
  --rule:       rgba(22, 20, 18, 0.22);   /* structural: plate edges, section rules, table head */
  --rule-faint: rgba(22, 20, 18, 0.10);   /* row separators inside a table */

  /* ── TYPE ──────────────────────────────────────────────────────────────────────────────── */
  --text: 'Literata', 'Iowan Old Style', 'Palatino', Georgia, serif;        /* everything textual */
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;  /* tables, degrees, dates */

  /* the scale — the ONLY font sizes on the site. Root 17px. size / line-height */
  --t-2: 0.75rem;   --lh-2: 1rem;
  --t-1: 0.875rem;  --lh-1: 1.25rem;
  --t0:  1rem;      --lh0:  1.55;
  --t1:  1.25rem;   --lh1:  1.35;
  --t2:  1.625rem;  --lh2:  1.2;
  --t3:  2.25rem;   --lh3:  1.1;
  --t4:  3.25rem;   --lh4:  1.02;
  --t5:  4.75rem;   --lh5:  0.98;   /* ONE use per page */

  /* weights: 300 display · 400 text · 500 labels · 700 never on this direction (reserved) */
  --w-display: 300; --w-text: 400; --w-label: 500;
  --track-wordmark: 0.06em;   /* the only tracked non-mono text */

  /* ── SPACE ─────────────────────────────────────────────────────────────────────────────── */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; --s10: 9rem;
  --measure: 34rem;          /* prose */
  --measure-chapter: 44rem;  /* the reading's chapter column */
  --measure-table: 58rem;    /* tables and the plate row */
  --tap: 44px; --tap-lg: 48px;

  /* ── EDGES + ELEVATION ─────────────────────────────────────────────────────────────────── */
  --r-field: 3px;      /* text inputs, segmented fields */
  --r-pill: 999px;     /* the ONE primary action on a page */
  --shadow-sheet: 0 12px 32px rgba(22, 20, 18, 0.18);   /* the sheet, nothing else */
  --ease: cubic-bezier(.2, .6, .2, 1);   /* the draw passage only */

  color-scheme: light;
}

/* THE ROOT: 17 px (= 106.25 % of the browser's 16). The one absolute size on the site; every --t*
   step is rem on it. Lives here because tokens.css is the only file allowed to state a size. */
html { font-size: 106.25%; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) {
    /* night = the plate printed on a warm navy (Omar 09-13: "not royal blue, a warm navy") with a gold
       accent. ink 13.0:1 · ink-soft 5.6:1 · gold 8.1:1 on the navy; navy on gold 8.1:1. */
    --paper: #16213A; --ink: #EDE7DA; --ink-soft: #9E988C; --accent: #D9B45C; --sheet: #1E2B48;
    --on-accent: #16213A;
    --chart-hard: #E07A5F; --chart-soft: #7FA6D6; --chart-minor: #8FBF9A;
    --chart-fire: #E8875A; --chart-earth: #8FC97A; --chart-air: #E5C85A; --chart-water: #7FB7D6;
    --rule: rgba(237, 231, 218, 0.22); --rule-faint: rgba(237, 231, 218, 0.10);
    --shadow-sheet: 0 12px 32px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="night"] {
  /* night = the plate printed on a warm navy (Omar 09-13: "not royal blue, a warm navy") with a gold
     accent. ink 13.0:1 · ink-soft 5.6:1 · gold 8.1:1 on the navy; navy on gold 8.1:1. */
  --paper: #16213A; --ink: #EDE7DA; --ink-soft: #9E988C; --accent: #D9B45C; --sheet: #1E2B48;
  --on-accent: #16213A;
  --chart-hard: #E07A5F; --chart-soft: #7FA6D6; --chart-minor: #8FBF9A;
  --chart-fire: #E8875A; --chart-earth: #8FC97A; --chart-air: #E5C85A; --chart-water: #7FB7D6;
  --rule: rgba(237, 231, 218, 0.22); --rule-faint: rgba(237, 231, 218, 0.10);
  --shadow-sheet: 0 12px 32px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}