:root {
  color-scheme: light;

  /* Core colour roles — technical editorial, not decorative. */
  --color-canvas: #eef1f1;
  --color-surface: #ffffff;
  --color-surface-raised: #f7f8f8;
  --color-surface-hover: #f0f2f2;
  --color-surface-inverse: #171c1f;
  --color-text: #101416;
  --color-text-soft: #343b3f;
  --color-text-muted: #626b70;
  --color-text-faint: #858d91;
  --color-text-inverse: #ffffff;
  --color-text-inverse-muted: #c7d0d4;
  --color-brand-inverse: #ff8b95;
  --color-border: #d8dddf;
  --color-border-strong: #aeb6ba;
  --color-border-inverse: #414a4f;
  --color-brand: #e21f2f;
  --color-brand-strong: #c41422;
  --color-brand-deep: #8e101a;
  --color-brand-soft: #fff0f1;
  --color-signal: #e21f2f;
  --color-danger: #b42318;
  --color-warning: #9a5b00;
  --color-info: #075985;
  --color-success: #176b45;
  --color-focus: #005fcc;
  --color-overlay: rgba(255, 255, 255, 0.96);

  /* Typography */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-weight-regular: 430;
  --font-weight-medium: 650;
  --font-weight-bold: 780;
  --font-weight-black: 920;
  --type-display: clamp(2.8rem, 6.2vw, 5.75rem);
  --type-h1: clamp(2.45rem, 5vw, 4.75rem);
  --type-h2: clamp(1.85rem, 3.5vw, 3.25rem);
  --type-h3: clamp(1.25rem, 2vw, 1.75rem);
  --type-lead: clamp(1rem, 1.25vw, 1.16rem);
  --type-body: 1rem;
  --type-body-reading: clamp(1rem, 1.08vw, 1.075rem);
  --type-label: 0.82rem;
  --type-meta: 0.72rem;
  --leading-tight: 0.92;
  --leading-heading: 1;
  --leading-body: 1.58;
  --tracking-tight: -0.055em;
  --tracking-label: 0.075em;

  /* Layout */
  --layout-max: 82rem;
  --reading-max: 54rem;
  --page-pad: clamp(1.125rem, 4vw, 3.5rem);
  --section-space: clamp(3.75rem, 7vw, 6.75rem);
  --header-height: 4.25rem;
  --content-gap: clamp(1.25rem, 2.5vw, 2.5rem);
  --touch-target: 2.75rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Shape, depth and motion */
  --radius-sm: 0.125rem;
  --radius-md: 0.35rem;
  --radius-lg: 0.55rem;
  --radius-pill: 999px;
  --shadow-panel: 0 0.75rem 2rem rgba(20, 28, 32, 0.07);
  --shadow-menu: 0 1.25rem 3rem rgba(20, 28, 32, 0.16);
  --motion-fast: 140ms;
  --motion-medium: 240ms;
  --motion-slow: 420ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --z-header: 40;
  --z-menu: 50;

  /* Existing section aliases */
  --bg: var(--color-canvas);
  --panel: var(--color-surface);
  --panel2: var(--color-surface-raised);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-raised);
  --ink: var(--color-text);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --purple: var(--color-brand);
  --purple2: var(--color-brand-deep);
  --acid: var(--color-signal);
  --red: var(--color-danger);
  --amber: var(--color-warning);
  --warning: var(--color-warning);
  --radius: var(--radius-sm);
  --max: var(--layout-max);
  --h1-size: var(--type-h1);
  --h2-size: var(--type-h2);
  --h3-size: var(--type-h3);
  --body-reading: var(--type-body-reading);
  --text-secondary: var(--type-label);
}

@media (max-width: 45rem) {
  :root {
    --page-pad: clamp(1rem, 5vw, 1.35rem);
    --section-space: clamp(3rem, 13vw, 4.5rem);
    --header-height: 4rem;
    --type-display: clamp(2.6rem, 12vw, 4.15rem);
    --type-h1: clamp(2.3rem, 10vw, 3.6rem);
    --type-h2: clamp(1.75rem, 8vw, 2.8rem);
  }
}