/* css/variables.css */
:root {
  /* Colors */
  --color-bg: #000138;
  --color-text: #F8FAFC;
  --color-text-muted: #CBD5E1;
  
  --color-accent: #0EA4F1;
  --color-accent-hover: #03689e;
  
  --color-secondary-1: #EFB410;
  --color-secondary-2: #E41857;
  --color-secondary-3: #10C054;
  
  /* Typography */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'Geist', monospace;
  
  /* Modular Type Scale */
  --text-14: 0.875rem; /* 14px */
  --text-16: 1rem;     /* 16px */
  --text-20: 1.25rem;  /* 20px */
  --text-32: 2rem;     /* 32px */
  --text-56: 3.5rem;   /* 56px */
  --text-72: 4.5rem;   /* 72px */
  
  /* Spacing Grid (8px base) */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-96: 6rem;
  --space-128: 8rem;
  
  /* Layout */
  --max-width: 1280px;
  --radius-card: 12px;
  
  /* Motion */
  --transition-fast: 150ms ease;
  --transition-cinematic: 400ms cubic-bezier(0.25, 1, 0.5, 1);
}