:root {
  /* Colors - see DESIGN.md. Background uses the cream shown in the
     mockups (#FFF1E7); the token file's own #f9f9fc doesn't match
     what's actually in the screenshots, so the visual reference wins. */
  --color-background: #FFF1E7;
  --color-surface: #ffffff;
  --color-surface-dim: #d9dadd;
  --color-surface-container: #edeef0;
  --color-surface-container-high: #e8e8eb;
  --color-on-surface: #1a1c1e;
  --color-on-surface-variant: #41474d;
  --color-outline: #72787e;
  --color-outline-variant: #c1c7ce;

  --color-primary: #154867;
  --color-primary-hover: #103a54;
  --color-on-primary: #ffffff;
  --color-primary-container: #326080;

  --color-secondary: #466273;
  --color-secondary-container: #c9e7fb;
  --color-on-secondary-container: #4c6879;

  --color-tertiary: #805232;
  --color-tertiary-15: rgba(128, 82, 50, 0.15);

  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  --color-success: #1e7a3d;
  --color-success-container: #d7f2df;

  /* Typography */
  --font-family: 'Manrope', -apple-system, sans-serif;

  --display-lg-size: 48px; --display-lg-weight: 700; --display-lg-lh: 60px; --display-lg-tracking: -0.02em;
  --headline-lg-size: 32px; --headline-lg-weight: 700; --headline-lg-lh: 40px;
  --headline-md-size: 24px; --headline-md-weight: 600; --headline-md-lh: 32px;
  --headline-sm-size: 20px; --headline-sm-weight: 600; --headline-sm-lh: 28px;
  --body-lg-size: 18px; --body-lg-lh: 28px;
  --body-md-size: 16px; --body-md-lh: 24px;
  --body-sm-size: 14px; --body-sm-lh: 20px;
  --label-md-size: 12px; --label-md-weight: 600; --label-md-lh: 16px; --label-md-tracking: 0.05em;

  /* Spacing (8px rhythm) */
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px;

  /* Radius */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px;

  /* Elevation */
  --shadow-card: 0 4px 12px rgba(50, 96, 128, 0.04);
  --shadow-card-hover: 0 8px 20px rgba(50, 96, 128, 0.10);
  --shadow-floating: 0 8px 24px rgba(50, 96, 128, 0.08);

  /* Motion - calm, quick, never flashy */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;

  --max-width: 1440px;
}