/* ==========================================================================
   Design Tokens — Dramatic Dark Tech
   ========================================================================== */

:root {
  --bg-primary: #06060e;
  --bg-secondary: #0a0a18;
  --bg-card: rgba(255, 255, 255, 0.03);
  --bg-card-hover: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.12);
  --text-primary: #ffffff;
  --text-secondary: #a1a1aa;
  --text-muted: #52525b;
  --accent: #f97316;
  --accent-hover: #fb923c;
  --accent-glow: rgba(249, 115, 22, 0.25);
  --gradient-accent: linear-gradient(135deg, #f97316, #fb923c);
  --gradient-purple: linear-gradient(135deg, #7c3aed, #3b82f6);
  --gradient-mesh:
    radial-gradient(ellipse at 20% 50%, rgba(124,58,237,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(59,130,246,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(249,115,22,0.06) 0%, transparent 50%);
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --text-hero: clamp(3.5rem, 9vw, 7rem);
  --text-4xl: clamp(2.5rem, 5vw, 4rem);
  --text-3xl: clamp(2rem, 4vw, 3rem);
  --text-2xl: clamp(1.5rem, 3vw, 2rem);
  --space-section: clamp(80px, 10vw, 140px);
  --container: 1280px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 300ms;
  --z-header: 100;
}

[data-theme="light"] {
  --bg-primary: #fafafa;
  --bg-secondary: #f0f0f5;
  --bg-card: rgba(0, 0, 0, 0.02);
  --bg-card-hover: rgba(0, 0, 0, 0.05);
  --border: rgba(0, 0, 0, 0.08);
  --border-hover: rgba(0, 0, 0, 0.15);
  --text-primary: #0a0a0f;
  --text-secondary: #52525b;
  --text-muted: #a1a1aa;
  --accent: #ea580c;
  --accent-hover: #f97316;
  --accent-glow: rgba(234, 88, 12, 0.15);
  --gradient-mesh:
    radial-gradient(ellipse at 20% 50%, rgba(124,58,237,0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(59,130,246,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(249,115,22,0.03) 0%, transparent 50%);
}