:root {
  --ink: #0a0d10;
  --panel: #0e1318;
  --field: #11161b;

  --rule: #232c35;
  --rule-soft: #1b2229;
  --field-border: #2c3742;
  --grid: #1b232b;
  --ring: #26313b;
  --spoke: #1f2831;

  --text-heading: #e8edf2;
  --text-body: #c3ccd4;
  --text-label: #9aa7b3;

  --accent: #4ea3ff;
  --accent-lit: #6bb2ff;
  --on-accent: #04121f;
  --go: #4fd39a;
  --warn: #ffc247;
  --alert: #ff5b5b;

  --font-display: 'Barlow Condensed', 'Arial Narrow', Helvetica, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --size-display: clamp(38px, 7vw, 74px);
  --size-lede: 16.5px;
  --size-kicker: 12px;
  --size-micro: 11.5px;
  --size-label: 10px;
  --size-mono: 13.5px;
  --size-figure: 25px;

  --gutter: 22px;
  --column: 620px;
  --lede-column: 430px;
  --capture-column: 440px;
  --control-height: 40px;
  --radius: 3px;

  --scope-size: min(86vh, 640px);
}

@media (max-width: 700px) {
  :root {
    --gutter: 16px;
    --size-lede: 15.5px;
    --size-mono: 12.5px;
    --size-figure: 21px;
  }
}