:root {
  --bg: #0E1B36;
  --bg-2: #142445;
  --surface: #1A2D55;
  --surface-2: #0A3D6A;
  --accent: #22ADFE;
  --accent-2: #1F84C8;
  --accent-soft: rgba(34, 173, 254, 0.12);
  --border: #19588D;
  --border-soft: rgba(25, 88, 141, 0.45);
  --hairline: rgba(230, 240, 250, 0.08);
  --text: #E6F0FA;
  --text-muted: #7A9BC2;
  --text-dim: #4F6E96;

  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-22: 1.375rem;
  --fs-28: 1.75rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-84: 5.25rem;

  --lh-tight: 1.05;
  --lh-snug: 1.18;
  --lh-body: 1.55;

  --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;
  --space-10: 128px;
  --space-11: 192px;

  --radius-1: 6px;
  --radius-2: 10px;
  --radius-3: 16px;
  --radius-pill: 999px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
  --dur-reveal: 700ms;

  --container: 1280px;
  --container-narrow: 960px;

  --shadow-1: 0 1px 0 0 var(--hairline) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 0 1px var(--accent), 0 0 28px -6px rgba(34, 173, 254, 0.55);

  --scroll-progress: 0;
}

@media (max-width: 768px) {
  :root {
    --fs-48: 2.25rem;
    --fs-64: 2.75rem;
    --fs-84: 3.25rem;
    --space-9: 64px;
    --space-10: 88px;
    --space-11: 128px;
  }
}