:root {
  /* ---- Surfaces ---- */
  --surface: #f8f9ff;
  --surface-dim: #cddbf0;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #eef4ff;
  --surface-container: #e5efff;
  --surface-container-high: #dbe9fe;
  --surface-container-highest: #d6e4f9;
  --on-surface: #0f1c2c;
  --on-surface-variant: #414751;
  --inverse-surface: #243141;
  --inverse-on-surface: #e9f1ff;
  --outline: #717782;
  --outline-variant: #c1c7d2;

  /* ---- Primary Signal (blue) ---- */
  --primary: #2e75bb;
  --primary-text-safe: #20568c;
  --primary-strong: #005c9f;
  --primary-hover: #20568c;
  --on-primary: #ffffff;
  --primary-tint-50: #eaf2f9;
  --primary-tint-200: #90bce3;
  --primary-dark-ink: #0f2537;
  --primary-midnight: #0a1926;

  /* ---- Secondary Pulse (red) — <5% of viewport ---- */
  --secondary: #ed1d24;
  --secondary-hover: #c7141a;
  --on-secondary: #ffffff;

  /* ---- Neutrals / tertiary ---- */
  --tertiary-surface: #edf5f5;
  --obsidian: #0d1b2a;

  /* ---- Semantic ---- */
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;

  /* ---- Typography ---- */
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* ---- Radius ---- */
  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* ---- Spacing ---- */
  --gutter: 1.5rem;
  --gutter-mobile: 1rem;
  --margin: 3rem;
  --margin-mobile: 1rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;

  /* ---- Elevation ---- */
  --shadow-1: 0 2px 8px -2px rgba(15, 37, 55, 0.04);
  --shadow-2: 0 12px 24px -6px rgba(10, 25, 38, 0.08);
  --shadow-3: 0 24px 48px -12px rgba(10, 25, 38, 0.16), 0 0 0 1px rgba(15, 37, 55, 0.06);
  --border-hairline: 1px solid rgba(13, 27, 42, 0.08);
}

/* Type scale */
.text-display { font: 800 56px/64px var(--font-display); letter-spacing: -0.03em; }
.text-headline-xl { font: 700 40px/48px var(--font-display); letter-spacing: -0.025em; }
.text-headline-lg { font: 700 32px/40px var(--font-display); letter-spacing: -0.02em; }
.text-headline-md { font: 600 24px/32px var(--font-display); letter-spacing: -0.015em; }
.text-headline-sm { font: 600 20px/28px var(--font-display); letter-spacing: -0.01em; }
.text-title-md { font: 600 16px/24px var(--font-body); letter-spacing: -0.005em; }
.text-body-lg { font: 400 18px/28px var(--font-body); }
.text-body-md { font: 400 15px/24px var(--font-body); }
.text-body-sm { font: 400 13px/20px var(--font-body); letter-spacing: 0.005em; }
.text-label-md { font: 600 12px/16px var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; }
.text-label-sm { font: 500 11px/14px var(--font-body); letter-spacing: 0.05em; text-transform: uppercase; }

@media (max-width: 1279px) {
  .text-headline-xl { font: 700 32px/40px var(--font-display); letter-spacing: -0.02em; }
  .text-headline-lg { font: 700 26px/34px var(--font-display); letter-spacing: -0.015em; }
}

@media (max-width: 767px) {
  .text-display { font: 800 36px/44px var(--font-display); letter-spacing: -0.02em; }
}