/* ==========================================================================
   Grant Bishop — design tokens. THE ONLY TOKEN SOURCE for site pages.
   Generated 2026-09-30 from the Grant Bishop design system
   (claude.ai/artifact/CruKKAwkXa8xpu4NNEqwPU, tokens.json, decided 2026-09-29).
   Supersedes the R21–R35 rail (tokens.css FROZEN 2026-08-23, tokens.json,
   print.css). When this file and the design system disagree, the design
   system is right: regenerate, do not hand-drift.

   Light on :root. Dark (also the 45 Degree Research surface) under
   prefers-color-scheme: dark unless data-theme="light", and under
   data-theme="dark" always.
   ========================================================================== */

:root {
  color-scheme: light dark;
  /* ---- colour: light ---- */
  --gb-ground: #fafafa;           /* Page background */
  --gb-paper: #ffffff;            /* Input fields, raised table cells, the mark's tile */
  --gb-ink: #14171c;              /* Display, headlines, body text, the CLOSED stamp fill, the ink half of the mark. */
  --gb-muted: #4d5560;            /* Decks, captions, the case-against summary, secondary body */
  --gb-label: #6b7481;            /* Micro labels and the record line, always in mono */
  --gb-rule: #858e9a;             /* Rules and ledger ordinals only */
  --gb-hairline: #e2e5e9;         /* 1px rules: masthead underline, section rules, table rows */
  --gb-field: #cfd5dc;            /* Input borders at rest */
  --gb-accent: #4167d2;           /* Links, the OPEN stamp, the accent half of the mark, focus rings */
  --gb-accent-tint: #e8edf9;      /* Selection and the one relief tint: a highlighted table row, the cover */

  /* ---- type families ---- */
  --gb-font-display: Newsreader, Georgia, "Times New Roman", serif;
  --gb-font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gb-font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---- spacing ---- */
  --gb-space-1: 4px;
  --gb-space-2: 8px;
  --gb-space-3: 12px;
  --gb-space-4: 16px;
  --gb-space-6: 24px;
  --gb-space-8: 32px;
  --gb-space-10: 40px;
  --gb-space-14: 56px;
  --gb-space-16: 64px;

  /* ---- radius ---- */
  --gb-radius-0: 0;
  --gb-radius-stamp: 3px;

  /* ---- layout ---- */
  --gb-measure: 68ch;
  --gb-pad-mobile: 20px;
  --gb-breakpoint: 760px;
  --gb-email-width: 600px;

  /* ---- border ---- */
  --gb-rule-strong: 2px;
  --gb-rule-thin: 1px;
  --gb-rule-stamp: 1.5px;

  /* ---- type scale (one var per style size) ---- */
  --gb-size-display-xl: 68px;
  --gb-size-display-l: 51px;
  --gb-size-headline: 40px;
  --gb-size-section: 30px;
  --gb-size-wordmark: 26px;
  --gb-size-deck: 19px;
  --gb-size-body: 17px;
  --gb-size-body-l: 18px;
  --gb-size-small: 15px;
  --gb-size-nav: 14px;
  --gb-size-button: 14px;
  --gb-size-record: 12px;
  --gb-size-label: 11px;
  --gb-size-watchpoint-id: 12px;
  --gb-size-stamp: 10.5px;
  --gb-size-figure: 12.5px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gb-ground: #14171c;
    --gb-paper: #171b21;
    --gb-ink: #e6e8ec;
    --gb-muted: #b3bac4;
    --gb-label: #9aa3af;
    --gb-rule: #5a6472;
    --gb-hairline: #2a3039;
    --gb-field: #3a414b;
    --gb-accent: #6383da;
    --gb-accent-tint: #1b2540;
  }
}
:root[data-theme="dark"] {
  --gb-ground: #14171c;
  --gb-paper: #171b21;
  --gb-ink: #e6e8ec;
  --gb-muted: #b3bac4;
  --gb-label: #9aa3af;
  --gb-rule: #5a6472;
  --gb-hairline: #2a3039;
  --gb-field: #3a414b;
  --gb-accent: #6383da;
  --gb-accent-tint: #1b2540;
}

/* ---- type styles: one class per design-system style ---- */
/* House View and piece titles at 760px and up. */
.display-xl { font-family: var(--gb-font-display); font-size: var(--gb-size-display-xl); line-height: 1.02; font-weight: 400; letter-spacing: -0.02em; font-variation-settings: 'opsz' 72; }
/* The same role at 390px. */
.display-l { font-family: var(--gb-font-display); font-size: var(--gb-size-display-l); line-height: 1.05; font-weight: 400; letter-spacing: -0.02em; font-variation-settings: 'opsz' 72; }
/* Email headlines, share cards, the claims board heading. */
.headline { font-family: var(--gb-font-display); font-size: var(--gb-size-headline); line-height: 1.1; font-weight: 400; letter-spacing: -0.015em; font-variation-settings: 'opsz' 48; }
/* Section heads inside a piece: The question, What is known, The case for, The case against, What we don't know, What this does to the frame. */
.section { font-family: var(--gb-font-display); font-size: var(--gb-size-section); line-height: 1.15; font-weight: 500; font-variation-settings: 'opsz' 36; }
/* The masthead wordmark beside the mark. Upright, one colour, never italic. */
.wordmark { font-family: var(--gb-font-display); font-size: var(--gb-size-wordmark); line-height: 1; font-weight: 500; letter-spacing: 0.005em; }
/* The deck under a headline: one sentence, the claim in plain words. Colour muted. */
.deck { font-family: var(--gb-font-display); font-size: var(--gb-size-deck); line-height: 1.4; font-weight: 400; font-style: italic; font-variation-settings: 'opsz' 20; }
/* Running text at 390px. Measure 68ch. Ink on ground. */
.body { font-family: var(--gb-font-body); font-size: var(--gb-size-body); line-height: 1.55; font-weight: 400; }
/* Running text at 760px and up. */
.body-l { font-family: var(--gb-font-body); font-size: var(--gb-size-body-l); line-height: 1.55; font-weight: 400; }
/* Captions, changelog rows, footers, watchpoint claims on the board. */
.small { font-family: var(--gb-font-body); font-size: var(--gb-size-small); line-height: 1.5; font-weight: 400; }
/* Masthead navigation. Ink; accent on hover. */
.nav { font-family: var(--gb-font-body); font-size: var(--gb-size-nav); line-height: 1; font-weight: 500; }
/* Subscribe and member buttons: ink fill, ground text, radius-0, 44px tall. */
.button { font-family: var(--gb-font-body); font-size: var(--gb-size-button); line-height: 1; font-weight: 500; letter-spacing: 0.02em; }
/* The record line under the masthead and at the top of every piece. Label colour, tabular figures. It expands to the full disclosure on tap. */
.record { font-family: var(--gb-font-mono); font-size: var(--gb-size-record); line-height: 1.5; font-weight: 400; font-variant-numeric: tabular-nums; }
/* Micro labels, uppercase, label colour. */
.label { font-family: var(--gb-font-mono); font-size: var(--gb-size-label); line-height: 1; font-weight: 500; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; text-transform: uppercase; }
/* Watchpoint identifiers on the board and share cards. Ink. */
.watchpoint-id { font-family: var(--gb-font-mono); font-size: var(--gb-size-watchpoint-id); line-height: 1; font-weight: 500; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
/* Status stamps: OPEN accent outline, REVISED ink outline, CLOSED ink fill on ground text. rule-stamp border, radius-stamp, rotated -2deg, padding space-1 by 7px. */
.stamp { font-family: var(--gb-font-mono); font-size: var(--gb-size-stamp); line-height: 1; font-weight: 500; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; text-transform: uppercase; }
/* Figures and tables: tabular numerals, right-aligned, ink. */
.figure { font-family: var(--gb-font-mono); font-size: var(--gb-size-figure); line-height: 1.4; font-weight: 400; font-variant-numeric: tabular-nums; }

/* ---- base ---- */
html { background: var(--gb-ground); }
body { margin: 0; background: var(--gb-ground); color: var(--gb-ink); font-family: var(--gb-font-body); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
a { color: var(--gb-accent); }
::selection { background: var(--gb-accent-tint); }
:focus-visible { outline: 2px solid var(--gb-accent); outline-offset: 2px; }