/* ============================================
   DESIGN TOKENS — Full Design System
   ============================================ */

:root {
  /* ── Backgrounds ── */
  --bg-deepest:    #040814;
  --bg-deep:       #07111E;
  --bg-surface:    #091827;
  --bg-elevated:   #0C1F35;
  --bg-card:       rgba(9, 24, 39, 0.6);

  /* ── Primary Blues ── */
  --blue-electric: #00A3FF;
  --blue-azure:    #007AFF;
  --blue-cyan:     #00D4FF;
  --blue-neon:     #0066FF;
  --blue-deep:     #0044CC;
  --blue-dark:     #002266;

  /* ── Accent Purple (very subtle) ── */
  --purple-subtle: rgba(108, 92, 231, 0.15);
  --purple-glow:   rgba(108, 92, 231, 0.08);

  /* ── Text ── */
  --text-primary:    #FFFFFF;
  --text-secondary:  rgba(255, 255, 255, 0.7);
  --text-tertiary:   rgba(255, 255, 255, 0.45);
  --text-muted:      rgba(255, 255, 255, 0.3);
  --text-blue:       #00A3FF;
  --text-cyan:       #00D4FF;

  /* ── Warning (for problem section) ── */
  --warning-red:     #FF4757;
  --warning-amber:   #FFAA00;
  --warning-red-bg:  rgba(255, 71, 87, 0.1);
  --warning-amber-bg:rgba(255, 170, 0, 0.1);

  /* ── Glass ── */
  --glass-bg:        rgba(255, 255, 255, 0.04);
  --glass-bg-hover:  rgba(255, 255, 255, 0.07);
  --glass-bg-active: rgba(255, 255, 255, 0.10);
  --glass-border:    rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.15);
  --glass-blur:      20px;
  --glass-blur-heavy:40px;
  --glass-blur-nav:  24px;

  /* ── Glow ── */
  --glow-blue:       0 0 30px rgba(0, 163, 255, 0.3);
  --glow-blue-lg:    0 0 60px rgba(0, 163, 255, 0.2), 0 0 120px rgba(0, 163, 255, 0.1);
  --glow-blue-xl:    0 0 80px rgba(0, 163, 255, 0.3), 0 0 160px rgba(0, 163, 255, 0.15), 0 0 240px rgba(0, 163, 255, 0.05);
  --glow-cyan:       0 0 30px rgba(0, 212, 255, 0.3);
  --glow-purple:     0 0 40px rgba(108, 92, 231, 0.15);

  /* ── Shadows ── */
  --shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:       0 4px 16px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 163, 255, 0.05);
  --shadow-lg:       0 8px 32px rgba(0, 0, 0, 0.5), 0 0 60px rgba(0, 163, 255, 0.08);
  --shadow-xl:       0 16px 64px rgba(0, 0, 0, 0.6), 0 0 80px rgba(0, 163, 255, 0.1);

  /* ── Border Radius ── */
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-2xl:   32px;
  --radius-full:  9999px;

  /* ── Spacing ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ── Typography ── */
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:  'Outfit', 'Inter', sans-serif;

  --text-xs:   clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  --text-sm:   clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);
  --text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
  --text-lg:   clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
  --text-xl:   clamp(1.15rem, 1rem + 0.75vw, 1.5rem);
  --text-2xl:  clamp(1.4rem, 1.1rem + 1.5vw, 2rem);
  --text-3xl:  clamp(1.8rem, 1.3rem + 2.5vw, 3rem);
  --text-4xl:  clamp(2.2rem, 1.5rem + 3.5vw, 4rem);
  --text-5xl:  clamp(2.8rem, 1.8rem + 5vw, 5.5rem);
  --text-6xl:  clamp(3.5rem, 2rem + 7vw, 7.5rem);
  --text-hero: clamp(3rem, 1.5rem + 7.5vw, 8rem);

  /* ── Transitions ── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
  --duration-slower:  800ms;

  /* ── Z-Index Scale ── */
  --z-base:      1;
  --z-card:      10;
  --z-overlay:   100;
  --z-nav:       1000;
  --z-modal:     10000;

  /* ── Cursor position (updated by JS) ── */
  --cursor-x: 50%;
  --cursor-y: 50%;
}