:root {
  --white: #ffffff;
  --paper: #fafaf8;
  --paper-2: #f4f2ee;
  --paper-3: #eceae5;
  --ink: #111111;
  --ink-1: #333333;
  --ink-2: #333333;
  --ink-3: #555555;
  --ink-4: #888888;
  --ink-5: #bbbbbb;
  --red: #cc0000;
  --red-dark: #aa0000;
  --red-bg: #fdf2f2;
  --red-border: #f0cece;
  --yellow-bg: #fefbf0;
  --yel-border: #f0e4b0;
  --green: #1a6b35;
  --green-bg: #f0f8f3;
  --green-border: #b8dfc7;
  --blue: #1a4a8a;
  --blue-bdr: #b8ceee;
  --blue-bg: #eef4fc;
  --rule: #e8e4de;
  --radius: 6px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.07);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);

  /* Spacing — state/specs/DESIGN_SYSTEM.md §3 */
  --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;

  /* Typography — §2 (mobile-first) */
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Playfair Display", Georgia, serif;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 34px;

  /* Semantic colours — §4 */
  --color-primary: var(--red);
  --color-primary-hover: var(--red-dark);
  --color-surface: var(--white);
  --color-background: var(--paper);
  --color-background-alt: var(--paper-2);
  --color-text: var(--ink);
  --color-text-secondary: var(--ink-2);
  --color-text-tertiary: var(--ink-3);
  --color-text-muted: var(--ink-4);
  --color-border: var(--rule);
  --color-success: var(--green);
  --color-success-bg: var(--green-bg);
  --color-warning-bg: var(--yellow-bg);
  --color-danger: var(--red);
  --color-danger-bg: var(--red-bg);
  --color-info: var(--blue);
  --color-info-bg: var(--blue-bg);

  /* Legacy aliases (pages/components not yet migrated to §4 names) */
  --color-text-primary: var(--color-text);
  --color-success-border: var(--green-border);
  --color-warning-border: var(--yel-border);
  --color-error: var(--red);
  --color-error-bg: var(--red-bg);
  --color-error-border: var(--red-border);
  --color-info-border: var(--blue-bdr);
}

@media (min-width: 768px) {
  :root {
    --text-xl: 24px;
    --text-2xl: 32px;
    --text-3xl: 40px;
  }
}

@media (min-width: 1440px) {
  :root {
    --text-2xl: 36px;
    --text-3xl: 46px;
  }
}