/* ==========================================================================
   THE VISIBLE HAND — design tokens
   Transcribed verbatim from: Web Style Guide v1, October 2026.
   The tokens are the contract. Never hard-code a hex, size or line height.
   ========================================================================== */

:root {
  /* Colour — light theme */
  --surface-page: #ffffff;
  --surface-paper: #eeede9;
  --surface-inverse: #231f20;
  --ink: #231f20;
  --ink-muted: #55504e;
  --ink-inverse: #ffffff;
  --yellow: #feed01;
  --blue: #4180a9;
  --pink: #fcbcb3;
  --red: #f44743;
  --gold-cover: #d2ad49;
  --on-yellow: #231f20;
  --on-blue: #feed01;
  --on-pink: #231f20;
  --on-red: #231f20;
  --rule: #231f20;
  --hairline: #d6d3cd;
  --focus: #231f20;

  /* Type */
  --font-sans: "Pragmatica", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-condensed: "Pragmatica Condensed", "Helvetica Neue Condensed", "Arial Narrow", Helvetica, Arial, sans-serif;

  /* Spacing — 4px grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Radius */
  --radius-none: 0;
  --radius-pill: 999px;
  --radius-circle: 50%;
}

[data-theme="dark"] {
  --surface-page: #1d1d1b;
  --surface-paper: #262422;
  --surface-inverse: #eeede9;
  --ink: #eeede9;
  --ink-muted: #b3aca6;
  --ink-inverse: #231f20;
  --blue: #7fb3d6;
  --red: #f97c79;
  --on-blue: #231f20;
  --rule: #eeede9;
  --hairline: #3a3734;
  --focus: #eeede9;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page: #1d1d1b;
    --surface-paper: #262422;
    --surface-inverse: #eeede9;
    --ink: #eeede9;
    --ink-muted: #b3aca6;
    --ink-inverse: #231f20;
    --blue: #7fb3d6;
    --red: #f97c79;
    --on-blue: #231f20;
    --rule: #eeede9;
    --hairline: #3a3734;
    --focus: #eeede9;
  }
}