:root {
  color-scheme: light;

  /* Brand primitives */
  --brand-evergreen-950: #0d2f2c;
  --brand-evergreen-900: #163f3a;
  --brand-evergreen-800: #1e554f;
  --brand-evergreen-700: #2a6d65;
  --brand-harbor-teal: #39796f;
  --brand-sea-glass: #a9cec5;
  --brand-learning-gold: #d9aa4e;
  --brand-gold-dark: #a86f18;
  --brand-gold-light: #f5e7c8;
  --brand-warm-ivory: #f7f3e8;
  --brand-paper: #fffdf8;
  --brand-charcoal-green: #20302e;

  /* Semantic color tokens */
  --color-canvas: var(--brand-warm-ivory);
  --color-surface: var(--brand-paper);
  --color-surface-raised: #ffffff;
  --color-surface-subtle: #eef6f3;
  --color-surface-glass: rgba(255, 253, 248, 0.86);
  --color-surface-disabled: rgba(255, 253, 248, 0.55);
  --color-certificate-surface: #fffdf6;
  --color-surface-inverse: var(--brand-evergreen-900);
  --color-text-primary: var(--brand-charcoal-green);
  --color-text-secondary: #526560;
  --color-text-inverse: #ffffff;
  --color-text-inverse-muted: #cde0dc;
  --color-link: #24675f;
  --color-link-hover: var(--brand-evergreen-950);
  --color-action-primary: var(--brand-learning-gold);
  --color-action-primary-hover: #e5b85e;
  --color-action-secondary: var(--brand-evergreen-900);
  --color-action-secondary-hover: var(--brand-evergreen-800);
  --color-border: #d5e0dc;
  --color-border-strong: #a8bbb6;
  --color-focus: #1e756b;
  --color-overlay: rgba(8, 31, 29, 0.76);
  --color-inverse-border: rgba(255, 255, 255, 0.16);
  --color-inverse-fill: rgba(255, 255, 255, 0.11);
  --color-inverse-fill-muted: rgba(255, 255, 255, 0.18);
  --color-gold-glow: rgba(217, 170, 78, 0.3);

  --color-success: #216847;
  --color-success-surface: #e7f4ec;
  --color-success-border: #94c6aa;
  --color-warning: #765015;
  --color-warning-surface: #fff3d6;
  --color-warning-border: #e2c170;
  --color-error: #96382f;
  --color-error-surface: #faebe7;
  --color-error-border: #e0a199;
  --color-info: #2b6375;
  --color-info-surface: #e8f3f6;
  --color-info-border: #9fc4d0;
  --color-contrast-border: #8ca39d;
  --color-contrast-border-strong: #5f7d76;
  --color-contrast-text-secondary: #344a45;

  /* Typography */
  --font-ui: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Newsreader", Georgia, serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: clamp(2.125rem, 4.5vw, 3.25rem);
  --text-display: clamp(2.5rem, 5.5vw, 4rem);
  --text-display-xl: clamp(3rem, 7vw, 5rem);
  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-body: 1.55;
  --leading-relaxed: 1.7;

  /* Four-pixel spacing scale */
  --space-0: 0;
  --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;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --container-reading: 44rem;
  --container-standard: 72rem;
  --container-wide: 88rem;
  --container-shell: 90rem;
  --page-gutter: clamp(1.25rem, 5vw, 4.5rem);
  --grid-gap: clamp(1rem, 2vw, 1.5rem);

  /* Shape, controls, and elevation */
  --radius-xs: 0.375rem;
  --radius-sm: 0.625rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;
  --control-sm: 2.25rem;
  --control-md: 2.75rem;
  --control-lg: 3.25rem;
  --shadow-sm: 0 4px 14px rgba(20, 54, 50, 0.06);
  --shadow-md: 0 14px 40px rgba(20, 54, 50, 0.1);
  --shadow-lg: 0 28px 80px rgba(8, 31, 29, 0.2);
  --shadow-action: 0 8px 20px rgba(116, 75, 18, 0.18);
  --color-skeleton-highlight: rgba(255, 255, 255, 0.58);

  /* Motion */
  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --duration-slow: 280ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Layering */
  --z-sticky: 20;
  --z-overlay: 40;
  --z-dialog: 50;
  --z-toast: 60;
  --z-skip-link: 70;

  /* Temporary aliases for page-specific Phase 2 styles */
  --ink: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --teal-950: var(--brand-evergreen-950);
  --teal-900: var(--brand-evergreen-900);
  --teal-800: var(--brand-evergreen-800);
  --teal-700: var(--brand-harbor-teal);
  --teal-100: #dcebe7;
  --teal-50: var(--color-surface-subtle);
  --cream: var(--color-canvas);
  --paper: var(--color-surface);
  --gold: var(--brand-learning-gold);
  --gold-light: var(--brand-gold-light);
  --coral: #c65f4c;
  --green: var(--color-success);
  --red: var(--color-error);
  --border: var(--color-border);
  --shadow: var(--shadow-md);
  --font-sans: var(--font-ui);
}