:root {
  /* Ink / structure */
  --ink-900: #151a2e;
  --ink-800: #1e2540;
  --ink-700: #2b3454;
  --text-primary: #151a2e;
  --text-secondary: #4a5268;
  --text-muted: #626a80;
  --on-dark: #ffffff;
  --on-dark-soft: #c9cfdd;
  --on-dark-muted: #8b93a8;

  /* Surfaces */
  --bg-page: #eef0f4;
  --bg-card: #ffffff;
  --bg-sunken: #e4e7ee;
  --line: #d7dbe4;
  --line-input: #868ea1;

  /* Accent (two-token system — see spec Color section for the legal-use rule) */
  --accent-bright: #1fc4c4;
  --accent-ink: #0b7575;
  --accent-press: #0e5c5c;
  --accent-wash: #e6f5f5;

  /* Warm support — fills only, never text except --ember-ink */
  --ember: #e08a3c;
  --ember-ink: #8a4a12;
  --ember-wash: #fdf1e5;

  /* Semantic */
  --danger: #b3261e;
  --disabled-bg: #dfe3ea;
  --disabled-text: #565d70;

  /* Spacing (px, named by value — no other spacing values are used) */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;

  /* Radii */
  --radius-input: 6px;
  --radius-card: 12px;
  --radius-sheet: 20px;
  --radius-pill: 999px;

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 240ms;
  /* Ambient background motion only (e.g. the homepage hero crossfade) —
     deliberately outside the 120/180/240ms interaction-feedback scale
     above, which that trio is reserved for. Never use this for anything
     the user's action triggers. */
  --duration-ambient: 1200ms;
  --ease-in: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.3, 0, 0.8, 0.15);

  /* Breakpoints, referenced in comments only — CSS can't read these in
     media queries, kept here as the single source of truth for the values */
  /* sm: 480px, md: 768px, lg: 1024px, xl: 1280px */
}