:root {
  /* Primitive color tokens */
  --color-ink-900: #18211f;
  --color-ink-700: #465149;
  --color-ink-600: #52605a;
  --color-ink-500: #59635e;
  --color-ink-400: #89938d;
  --color-paper-100: #fffef9;
  --color-paper-200: #f7f5ee;
  --color-paper-300: #f6f1e7;
  --color-paper-400: #ece9dd;
  --color-line: #d8d8cc;
  --color-coral-500: #ef7259;
  --color-coral-700: #bd503f;
  --color-lime-300: #dce98b;
  --color-sky-400: #8bd5d1;
  --color-success: #38936e;
  --color-warning: #baa34e;
  --color-danger-muted: #c9cec9;

  /* Semantic color tokens */
  --color-canvas: var(--color-paper-200);
  --color-surface: var(--color-paper-100);
  --color-surface-subtle: var(--color-paper-300);
  --color-surface-muted: var(--color-paper-400);
  --color-text: var(--color-ink-900);
  --color-text-muted: var(--color-ink-500);
  --color-border: var(--color-line);
  --color-action: var(--color-coral-500);
  --color-action-hover: var(--color-coral-700);
  --color-live: var(--color-coral-500);

  /* Type tokens */
  --font-sans: "Manrope", sans-serif;
  --font-mono: "DM Mono", monospace;
  --font-size-body: 16px;
  --line-height-body: 1.5;
  --line-height-reading: 1.65;

  /* Space, shape, elevation, and motion tokens */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --radius-1: 8px;
  --radius-2: 12px;
  --radius-3: 16px;
  --radius-4: 24px;
  --shadow-offset-coral: 7px 7px 0 var(--color-action);
  --shadow-offset-lime: 14px 14px 0 var(--color-lime-300);
  --shadow-offset-sky: 11px 11px 0 var(--color-sky-400);
  --duration-feedback: 160ms;
  --duration-transition: 200ms;
  --duration-reveal: 600ms;
  --ease-standard: ease;
  --z-skip-link: 20;

  /* Layout tokens */
  --container-wide: 1240px;
  --container-content: 1120px;
  --gutter-desktop: 48px;
  --gutter-mobile: 32px;
  --section-space-desktop: 132px;
  --section-space-mobile: 84px;
  --breakpoint-content-collapse: 900px;
  --breakpoint-mobile: 620px;

  /* Backward-compatible homepage aliases */
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --paper: var(--color-canvas);
  --paper-deep: var(--color-surface-muted);
  --line: var(--color-border);
  --coral: var(--color-action);
  --coral-dark: var(--color-action-hover);
  --lime: var(--color-lime-300);
  --sky: var(--color-sky-400);
  --white: var(--color-surface);
  --mono: var(--font-mono);
  --sans: var(--font-sans);
}