/* ==========================================================================
   Grant Bishop — design tokens. THE ONLY TOKEN SOURCE for site pages.
   Generated 2026-10-31 from site/design-system/tokens.json (v2,
   decided 2026-10-31) by tools/design/regen-tokens.mjs.
   Regenerate, do not hand-drift.

   Light on :root. Dark (also the Primary Research member 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: #ffffff;           /* Page background (DESIGN-1: white; dark #0f1115) */
  --gb-paper: #f7f8fa;            /* Input fields and raised table cells: one step off ground */
  --gb-ink: #14171c;              /* Display, headlines, body text, the CLOSED stamp fill, the ink half of the mark */
  --gb-secondary: #3d4450;        /* Decks, meta lines, secondary body, captions (DESIGN-1) */
  --gb-muted: #3d4450;            /* Legacy name for secondary: same value */
  --gb-label: #5f6876;            /* Micro labels and the record line */
  --gb-rule: #858e9a;             /* Ledger ordinals and strong rules only */
  --gb-hairline: #d9dde3;         /* 1px rules (DESIGN-1 rule colour): masthead underline, section rules, table rows, the Bottom line hairlines */
  --gb-field: #cfd5dc;            /* Input borders at rest */
  --gb-accent: #4167d2;           /* Links, kickers, 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 */
  --gb-brief-tint: #f4f6fc;       /* The In brief box fill only: an azure tint of accent on white (6%), a slate tint under dark (accent 10% on ground) */
  --gb-brief-rule: #8da4e4;       /* The In brief box left rule (3px) and its foot hairline: accent at 60% on white, 50% on dark ground */
  --gb-up: #11703e;               /* Market data only: a rise in a price, index level or return */
  --gb-down: #b42318;             /* Market data only: a fall in a price, index level or return */

  /* ---- type families ---- */
  --gb-font-display: Newsreader, Georgia, "Times New Roman", serif;
  --gb-font-text: Newsreader, Georgia, "Times New Roman", serif;
  --gb-font-sans: "Public Sans", Arial, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gb-font-body: "Public Sans", Arial, 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-12: 48px;
  --gb-space-16: 64px;
  --gb-space-10: 40px;
  --gb-space-14: 56px;

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

  /* ---- layout ---- */
  --gb-page-max: 1200px;
  --gb-cols: 12;
  --gb-gutter: 24px;
  --gb-gutter-phone: 16px;
  --gb-measure: 40rem;
  --gb-figure-max: 760px;
  --gb-table-max: 920px;
  --gb-strip-h: 32px;
  --gb-pad-mobile: 16px;
  --gb-breakpoint: 760px;
  --gb-breakpoint-wide: 1024px;
  --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; phone sizes below) ---- */
  --gb-size-display: clamp(32px, calc(32px + (100vw - 375px) * 0.0308), 52px);
  --gb-size-h1: clamp(30px, calc(30px + (100vw - 375px) * 0.0154), 40px);
  --gb-size-h2: 26px;
  --gb-size-h3: 20px;
  --gb-size-wordmark: 26px;
  --gb-size-display-xl: clamp(32px, calc(32px + (100vw - 375px) * 0.0308), 52px);
  --gb-size-display-l: clamp(32px, calc(32px + (100vw - 375px) * 0.0308), 52px);
  --gb-size-headline: clamp(30px, calc(30px + (100vw - 375px) * 0.0154), 40px);
  --gb-size-section: 26px;
  --gb-size-body: 18px;
  --gb-size-dek: 21px;
  --gb-size-body-l: 18px;
  --gb-size-deck: 21px;
  --gb-size-micro: 12px;
  --gb-size-meta: 14px;
  --gb-size-ui: 16px;
  --gb-size-small: 15px;
  --gb-size-nav: 14px;
  --gb-size-button: 14px;
  --gb-size-label: 12px;
  --gb-size-stamp: 11px;
  --gb-size-figure: 15px;
  --gb-size-ticker: 13px;
  --gb-size-record: 12px;
  --gb-size-watchpoint-id: 12px;
}

@media (max-width: 759.98px) {
  :root {
    --gb-size-h2: 22px;
    --gb-size-h3: 19px;
    --gb-size-wordmark: 22px;
    --gb-size-section: 22px;
    --gb-size-body: 17px;
    --gb-size-dek: 18px;
    --gb-size-body-l: 17px;
    --gb-size-deck: 18px;
    --gb-size-meta: 13px;
    --gb-size-ui: 15px;
    --gb-size-small: 14px;
    --gb-size-figure: 14px;
    --gb-size-ticker: 12px;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gb-ground: #0f1115;
    --gb-paper: #161a20;
    --gb-ink: #e6e8eb;
    --gb-secondary: #b8bec8;
    --gb-muted: #b8bec8;
    --gb-label: #9aa3af;
    --gb-rule: #5a6472;
    --gb-hairline: #2a3039;
    --gb-field: #3a414b;
    --gb-accent: #7d9cf0;
    --gb-accent-tint: #1b2540;
    --gb-brief-tint: #171d2a;
    --gb-brief-rule: #3c4d7b;
    --gb-up: #4cc38a;
    --gb-down: #f28b82;
  }
}
:root[data-theme="dark"] {
  --gb-ground: #0f1115;
  --gb-paper: #161a20;
  --gb-ink: #e6e8eb;
  --gb-secondary: #b8bec8;
  --gb-muted: #b8bec8;
  --gb-label: #9aa3af;
  --gb-rule: #5a6472;
  --gb-hairline: #2a3039;
  --gb-field: #3a414b;
  --gb-accent: #7d9cf0;
  --gb-accent-tint: #1b2540;
  --gb-brief-tint: #171d2a;
  --gb-brief-rule: #3c4d7b;
  --gb-up: #4cc38a;
  --gb-down: #f28b82;
}

/* ---- type styles: one class per design-system style ---- */
/* The home lead headline only. 52px desktop, 32px phone, fluid between. */
.display { font-family: var(--gb-font-display); font-size: var(--gb-size-display); line-height: 1.05; font-weight: 560; letter-spacing: -0.015em; font-variation-settings: 'opsz' 72; font-variant-numeric: lining-nums tabular-nums; }
/* Page and piece titles. 40px desktop, 30px phone, fluid between (clamp). */
.h1 { font-family: var(--gb-font-display); font-size: var(--gb-size-h1); line-height: 1.1; font-weight: 600; letter-spacing: -0.01em; font-variation-settings: 'opsz' 48; font-variant-numeric: lining-nums tabular-nums; }
/* Section heads inside a piece and on every page. */
.h2 { font-family: var(--gb-font-display); font-size: var(--gb-size-h2); line-height: 1.2; font-weight: 600; font-variation-settings: 'opsz' 30; font-variant-numeric: lining-nums tabular-nums; }
/* List headlines: the secondary list, cards, the case for and against. */
.h3 { font-family: var(--gb-font-display); font-size: var(--gb-size-h3); line-height: 1.25; font-weight: 600; font-variation-settings: 'opsz' 20; font-variant-numeric: lining-nums tabular-nums; }
/* 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; font-variant-numeric: lining-nums tabular-nums; }
/* Legacy name: same as display. */
.display-xl { font-family: var(--gb-font-display); font-size: var(--gb-size-display-xl); line-height: 1.05; font-weight: 560; letter-spacing: -0.015em; font-variation-settings: 'opsz' 72; font-variant-numeric: lining-nums tabular-nums; }
/* Legacy name: same as display. */
.display-l { font-family: var(--gb-font-display); font-size: var(--gb-size-display-l); line-height: 1.05; font-weight: 560; letter-spacing: -0.015em; font-variation-settings: 'opsz' 72; font-variant-numeric: lining-nums tabular-nums; }
/* Legacy name: same as h1. */
.headline { font-family: var(--gb-font-display); font-size: var(--gb-size-headline); line-height: 1.1; font-weight: 600; letter-spacing: -0.01em; font-variation-settings: 'opsz' 48; font-variant-numeric: lining-nums tabular-nums; }
/* Legacy name: same as h2. */
.section { font-family: var(--gb-font-display); font-size: var(--gb-size-section); line-height: 1.2; font-weight: 600; font-variation-settings: 'opsz' 30; font-variant-numeric: lining-nums tabular-nums; }
/* Running text. Measure 40rem at 18px. Ink on ground. */
.body { font-family: var(--gb-font-text); font-size: var(--gb-size-body); line-height: 1.55; font-weight: 400; font-variation-settings: 'opsz' 16; font-variant-numeric: lining-nums tabular-nums; }
/* The deck under a headline: one sentence, at most two lines. Secondary colour. */
.dek { font-family: var(--gb-font-text); font-size: var(--gb-size-dek); line-height: 1.4; font-weight: 400; font-variation-settings: 'opsz' 20; font-variant-numeric: lining-nums tabular-nums; }
/* Legacy name: same as body. */
.body-l { font-family: var(--gb-font-text); font-size: var(--gb-size-body-l); line-height: 1.55; font-weight: 400; font-variation-settings: 'opsz' 16; font-variant-numeric: lining-nums tabular-nums; }
/* Legacy name: same as dek. */
.deck { font-family: var(--gb-font-text); font-size: var(--gb-size-deck); line-height: 1.4; font-weight: 400; font-variation-settings: 'opsz' 20; font-variant-numeric: lining-nums tabular-nums; }
/* Kickers and micro labels, in capitals. */
.micro { font-family: var(--gb-font-sans); font-size: var(--gb-size-micro); line-height: 1.3; font-weight: 600; letter-spacing: 0.06em; font-variant-numeric: lining-nums tabular-nums; text-transform: uppercase; }
/* Meta lines: byline, dates, reading time, as-of stamps, table notes. */
.meta { font-family: var(--gb-font-sans); font-size: var(--gb-size-meta); line-height: 1.4; font-weight: 400; font-variant-numeric: lining-nums tabular-nums; }
/* Navigation, tables, forms, the email body. */
.ui { font-family: var(--gb-font-sans); font-size: var(--gb-size-ui); line-height: 1.45; font-weight: 400; font-variant-numeric: lining-nums tabular-nums; }
/* Captions, changelog rows, footers. */
.small { font-family: var(--gb-font-sans); font-size: var(--gb-size-small); line-height: 1.5; font-weight: 400; font-variant-numeric: lining-nums tabular-nums; }
/* Masthead navigation. Ink; accent on hover. */
.nav { font-family: var(--gb-font-sans); font-size: var(--gb-size-nav); line-height: 1; font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }
/* Buttons: ink fill, ground text, radius-0, 44px tall. */
.button { font-family: var(--gb-font-sans); font-size: var(--gb-size-button); line-height: 1; font-weight: 600; letter-spacing: 0.02em; font-variant-numeric: lining-nums tabular-nums; }
/* Legacy name: same as micro. */
.label { font-family: var(--gb-font-sans); font-size: var(--gb-size-label); line-height: 1.3; font-weight: 600; letter-spacing: 0.06em; font-variant-numeric: lining-nums tabular-nums; text-transform: uppercase; }
/* Status stamps: OPEN accent outline, REVISED ink outline, CLOSED ink fill. */
.stamp { font-family: var(--gb-font-sans); font-size: var(--gb-size-stamp); line-height: 1; font-weight: 600; letter-spacing: 0.08em; font-variant-numeric: lining-nums tabular-nums; text-transform: uppercase; }
/* Figures in tables: tabular lining numerals, right-aligned. */
.figure { font-family: var(--gb-font-sans); font-size: var(--gb-size-figure); line-height: 1.4; font-weight: 400; font-variant-numeric: lining-nums tabular-nums; }
/* Tickers and ids. Mono is for tickers, ids and timestamps only. */
.ticker { font-family: var(--gb-font-mono); font-size: var(--gb-size-ticker); line-height: 1.3; font-weight: 500; letter-spacing: 0.02em; font-variant-numeric: lining-nums tabular-nums; }
/* Timestamps and the record line. Label colour, tabular figures. */
.record { font-family: var(--gb-font-mono); font-size: var(--gb-size-record); line-height: 1.5; font-weight: 400; font-variant-numeric: lining-nums tabular-nums; }
/* Claim ids (W-n, HV-2026-nnn). 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: lining-nums tabular-nums; }

/* ---- base ---- */
html { background: var(--gb-ground); }
body { margin: 0; background: var(--gb-ground); color: var(--gb-ink); font-family: var(--gb-font-sans); font-variant-numeric: lining-nums 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; }