:root {
  --color-bg: #f8f9fc;
  --color-bg-alt: #f0f2f7;
  --color-bg-card: #ffffff;
  --color-bg-card-hover: #f5f6fa;
  --color-surface: rgba(0,0,0,0.02);
  --color-border: rgba(0,0,0,0.08);
  --color-border-hover: rgba(0,0,0,0.15);
  --color-text: #1a1a2e;
  --color-text-muted: #6b7280;
  --color-text-dim: #9ca3af;
  --color-primary: #7c3aed;
  --color-primary-light: #7c3aed;
  --color-primary-glow: rgba(124,58,237,0.25);
  --color-secondary: #06b6d4;
  --color-secondary-glow: rgba(6,182,212,0.2);
  --color-accent: #f43f5e;
  --color-accent-glow: rgba(244,63,94,0.2);
  --color-warm: #f59e0b;
  --color-warm-glow: rgba(245,158,11,0.2);
  --color-success: #10b981;
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Syne', 'Space Grotesk', sans-serif;
  --font-mono: 'Space Grotesk', monospace;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --container-max: 1200px;
  --section-padding: clamp(80px, 12vw, 160px);
}