:root {
  /* Purple */
  --color-purple-200: #bfbbfe;
  --color-purple-300: #afaafe;
  --color-purple-400: #8e87fe;
  --color-purple-500: #6e65fd;
  --color-purple-600: #5e54fd;
  --color-purple-700: #4b43ca;
  --color-purple-800: #423bb1;

  /* Gray */
  --color-gray-25: #f5f7f9;
  --color-gray-100: #e9ecef;
  --color-gray-200: #dee3e7;
  --color-gray-300: #cfd6dd;
  --color-gray-400: #9ea8b3;
  --color-gray-500: #7e8b99;
  --color-gray-600: #555f6d;
  --color-gray-700: #4a545e;
  --color-gray-800: #3a424a;
  --color-gray-900: #272e35;
  --color-gray-950: #1b242c;

  /* Accent */
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-950: #172554;
  --color-green-400: #75cc9e;
  --color-green-600: #1d7c4d;
  --color-green-700: #1e714a;
  --color-red-600: #dc2626;
  --color-yellow-400: #fdb022;
  --color-teal-600: #196c85;
  --color-blue-gray-200: #c8cce5;
  --color-blue-gray-300: #9ea5d1;
  --color-blue-gray-500: #4e5ba6;
  --color-blue-gray-700: #363f72;
  --color-card-stroke: #dbdbdf;

  --color-white: #ffffff;
  --color-footer-bg: #0f0f0f;
  --color-footer-muted: #9194a6;
  --color-page-bg: #fefeff;
  --color-section-muted: #f6f8fc;

  /* Spacing */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-14: 56px;

  /* Layout */
  --container-max: 1200px;
  --page-gutter: 120px;
  --page-gutter-md: 48px;
  --page-gutter-sm: 24px;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'new-spirit', Georgia, serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --text-hero: 56px;
  --text-section: 44px;
  --text-card: 24px;
  --text-lead: 18px;
  --text-body: 16px;
  --text-ui: 16px;
  --text-dashboard-title: 20px;
  --text-secondary: 14px;
  --text-label: 12px;
  --text-caption: 12px;
  --text-metric: 32px;

  --leading-hero: 1.10;
  --leading-section: 1.15;
  --leading-card: 1.25;
  --leading-lead: 1.55;
  --leading-body: 1.55;
  --leading-ui: 1.25;
  --leading-dashboard-title: 1.25;
  --leading-secondary: 1.40;
  --leading-label: 1.40;
  --leading-caption: 1.50;
  --leading-metric: 1.10;

  --tracking-display: -0.02em;
  --tracking-body: 0;
  --measure-prose: 65ch;

  --shadow-m: 0 6px 20px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 8px 12px rgba(0, 0, 0, 0.05);
  --shadow-elevated:
    0 5px 12px rgba(10, 17, 77, 0.06),
    0 22px 22px rgba(10, 17, 77, 0.05);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 48px;
}

@media (max-width: 1024px) {
  :root {
    --page-gutter: var(--page-gutter-md);
  }
}

@media (max-width: 768px) {
  :root {
    --page-gutter: var(--page-gutter-sm);
    --text-hero: 36px;
    --text-section: 30px;
    --text-card: 22px;
    --text-metric: 28px;
    --leading-hero: 1.15;
    --leading-section: 1.20;
    --leading-card: 1.30;
    --leading-body: 1.60;
    --leading-metric: 1.15;
  }
}