/* === DESIGN TOKENS v6 — Aurora Gradient === */
:root {
  /* Brand Colors */
  --color-primary: #0ea5e9;
  --color-primary-hover: #0284c7;
  --color-accent: #8b5cf6;
  --color-warm: #f97316;
  --color-cool: #06b6d4;
  --color-hot: #ec4899;
  
  /* Neutrals */
  --color-bg: #fafaf9;
  --color-bg-alt: #f5f4f2;
  --color-surface: #ffffff;
  --color-border: #e2e8f0;
  --color-border-subtle: #f0f0ee;
  
  /* Text */
  --color-text: #0f172a;
  --color-text-muted: #64748b;
  --color-text-subtle: #a8a29e;
  
  /* Aurora gradient tokens */
  --aurora-1: #0ea5e9;
  --aurora-2: #8b5cf6;
  --aurora-3: #ec4899;
  --aurora-4: #06b6d4;
  --aurora-blur: 80px;
  
  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  
  /* Spacing (8px base) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
  
  /* Radii */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px;
  --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.1);
  --shadow-primary: 0 4px 20px rgba(14,165,233,0.3);
  --shadow-accent: 0 4px 20px rgba(139,92,246,0.3);
  
  /* Layout */
  --container-max: 1200px;
  --header-height: 64px;
}