:root {
  /* Extracted against the current hero, resolved to DESIGN.md brand truth. */
  --color-primary: #111311;
  --color-on-primary: #ffffff;
  --color-canvas: #f3f4f1;
  --color-surface: #ffffff;
  --color-surface-muted: #e7e9e4;
  --color-text: #111311;
  --color-text-muted: #5b615b;
  --color-border: #ced2cc;
  --color-focus: #111311;
  --color-success: #2f674e;
  --color-error: #9b3d3d;

  --font-display: "Satoshi", "General Sans", Arial, sans-serif;
  --font-body: "General Sans", Arial, sans-serif;
  --font-data: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-display: clamp(3.5rem, 6vw, 4.75rem);
  --text-heading-lg: clamp(2.625rem, 5vw, 3rem);
  --text-heading-md: 2rem;
  --text-body-lg: 1.25rem;
  --text-body: 1.0625rem;
  --text-label: 0.8125rem;
  --text-data: 0.875rem;

  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 9999px;

  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 72px;
  --space-4xl: 104px;
  --space-5xl: 144px;
  --section-space: clamp(64px, 10vw, 144px);
  --container: 1200px;
  --gutter: clamp(20px, 3vw, 32px);

  --shadow-surface: 0 18px 48px rgb(17 19 17 / 8%);
  --shadow-stage: 0 28px 78px rgb(17 19 17 / 12%);

  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-settle: cubic-bezier(.32, .72, 0, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
  --dur-micro: 80ms;
  --dur-short: 180ms;
  --dur-medium: 320ms;
  --dur-long: 600ms;
}