/* ============================================
   CSS VARIABLES - Design Tokens
   Premium Dark Theme with Glassmorphism
   ============================================ */

:root {
  /* ---------- Color Palette - Dark Theme ---------- */
  --bg-primary: #05060f;
  --bg-secondary: #0a0b1a;
  --bg-tertiary: #11132a;
  --bg-glass: rgba(255, 255, 255, 0.04);
  --bg-glass-strong: rgba(255, 255, 255, 0.08);
  --bg-card: rgba(17, 19, 42, 0.6);

  /* ---------- Brand / Accent ---------- */
  --accent-primary: #7c5cff;     /* Electric Violet */
  --accent-secondary: #00d4ff;   /* Cyan */
  --accent-tertiary: #ff3df0;    /* Magenta */
  --accent-success: #00ffa3;     /* Neon Green */
  --accent-warning: #ffb547;
  --accent-error: #ff4d6d;

  /* ---------- Gradients ---------- */
  --gradient-primary: linear-gradient(135deg, #7c5cff 0%, #00d4ff 100%);
  --gradient-secondary: linear-gradient(135deg, #ff3df0 0%, #7c5cff 100%);
  --gradient-aurora: linear-gradient(135deg, #7c5cff 0%, #ff3df0 50%, #00d4ff 100%);
  --gradient-mesh: radial-gradient(at 20% 30%, rgba(124, 92, 255, 0.4) 0px, transparent 50%),
                   radial-gradient(at 80% 20%, rgba(0, 212, 255, 0.3) 0px, transparent 50%),
                   radial-gradient(at 60% 80%, rgba(255, 61, 240, 0.25) 0px, transparent 50%);
  --gradient-border: linear-gradient(135deg, rgba(124, 92, 255, 0.6), rgba(0, 212, 255, 0.6));
  --gradient-text: linear-gradient(135deg, #ffffff 0%, #b8b9d4 100%);
  --gradient-glow: radial-gradient(circle, rgba(124, 92, 255, 0.4) 0%, transparent 70%);

  /* ---------- Text Colors ---------- */
  --text-primary: #ffffff;
  --text-secondary: #b8b9d4;
  --text-muted: #6b6d8c;
  --text-inverse: #05060f;

  /* ---------- Borders ---------- */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.2);
  --border-glow: rgba(124, 92, 255, 0.4);

  /* ---------- Shadows - Soft Premium ---------- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 40px rgba(124, 92, 255, 0.4);
  --shadow-glow-cyan: 0 0 40px rgba(0, 212, 255, 0.4);
  --shadow-neumorph: 8px 8px 24px rgba(0, 0, 0, 0.4), -8px -8px 24px rgba(255, 255, 255, 0.02);

  /* ---------- Typography ---------- */
  --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --fs-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.85rem);
  --fs-sm: clamp(0.85rem, 0.8rem + 0.25vw, 0.95rem);
  --fs-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --fs-md: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --fs-xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
  --fs-2xl: clamp(2rem, 1.5rem + 2vw, 3.2rem);
  --fs-3xl: clamp(2.5rem, 1.8rem + 3.2vw, 4.8rem);
  --fs-hero: clamp(2.8rem, 2rem + 4.5vw, 6.5rem);

  /* ---------- Spacing ---------- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* ---------- Radius ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-full: 9999px;

  /* ---------- Transitions ---------- */
  --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 600ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-smooth: 800ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Container ---------- */
  --container-max: 1280px;
  --container-padding: clamp(1rem, 4vw, 2.5rem);

  /* ---------- Z-Index ---------- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-nav: 500;
  --z-modal: 1000;
  --z-cursor: 9999;
  --z-toast: 10000;
  --z-loader: 99999;
}

/* ---------- Light Theme Override ---------- */
[data-theme="light"] {
  --bg-primary: #f7f8fc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #eef0fa;
  --bg-glass: rgba(255, 255, 255, 0.7);
  --bg-glass-strong: rgba(255, 255, 255, 0.9);
  --bg-card: rgba(255, 255, 255, 0.85);

  --text-primary: #0a0b1a;
  --text-secondary: #4a4c6b;
  --text-muted: #8a8da8;

  --border-subtle: rgba(10, 11, 26, 0.06);
  --border-default: rgba(10, 11, 26, 0.1);
  --border-strong: rgba(10, 11, 26, 0.18);

  --gradient-text: linear-gradient(135deg, #0a0b1a 0%, #4a4c6b 100%);
  --gradient-mesh: radial-gradient(at 20% 30%, rgba(124, 92, 255, 0.18) 0px, transparent 50%),
                   radial-gradient(at 80% 20%, rgba(0, 212, 255, 0.15) 0px, transparent 50%),
                   radial-gradient(at 60% 80%, rgba(255, 61, 240, 0.12) 0px, transparent 50%);

  --shadow-sm: 0 2px 8px rgba(10, 11, 26, 0.06);
  --shadow-md: 0 8px 24px rgba(10, 11, 26, 0.1);
  --shadow-lg: 0 20px 60px rgba(10, 11, 26, 0.12);
}