:root {
  color-scheme: light;

  /* Semantic color roles */
  --color-page: #e7e4de;
  --color-surface: #f5f3ee;
  --color-text: #111315;
  /* Slightly deepened from the #676d71 steel-grey reference for small text. */
  --color-text-muted: #5f6569;
  --color-structure: #292d30;
  --color-border: rgb(17 19 21 / 18%);
  --color-border-strong: rgb(17 19 21 / 38%);
  --color-accent: #a98555;
  --color-focus: #76562f;
  --color-grid: rgb(17 19 21 / 6%);
  --color-overlay: rgb(17 19 21 / 72%);
  --color-shadow: rgb(17 19 21 / 14%);
  --color-on-structure: #f5f3ee;

  /* Replace these temporary local/system stacks with licensed self-hosted faces later. */
  --font-display: "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --font-interface: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-technical: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;

  --text-display: clamp(3.5rem, 11vw, 9.5rem);
  --text-heading: clamp(1.75rem, 4vw, 3.5rem);
  --text-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --text-label: 0.6875rem;
  --leading-display: 0.82;
  --leading-heading: 0.95;
  --leading-body: 1.6;
  --tracking-display: -0.055em;
  --tracking-label: 0.16em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  --page-gutter: clamp(1rem, 4vw, 4.5rem);
  --content-max: 78rem;
  --content-narrow: 42rem;
  --rule-size: 1px;
  --border-subtle: var(--rule-size) solid var(--color-border);
  --radius-small: 0.125rem;
  --shadow-plate: 0 1.25rem 3.5rem var(--color-shadow);
  --clip-corner: 1.125rem;

  --motion-fast: 120ms;
  --motion-standard: 220ms;
  --ease-mechanical: cubic-bezier(0.2, 0.75, 0.25, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 1ms;
    --motion-standard: 1ms;
  }
}