/**
 * Window.Events - CSS Custom Properties (Variables)
 * Cyberpunk Theme
 */

:root {
  /* ========================================
     COLORS - Backgrounds
     ======================================== */
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-tertiary: #1a1a2e;
  --bg-card: #16162a;
  --bg-code: #0d0d14;
  --bg-overlay: rgba(10, 10, 15, 0.95);

  /* ========================================
     COLORS - Neon Accents
     ======================================== */
  --neon-pink: #ff00ff;
  --neon-pink-light: #ff66ff;
  --neon-pink-dark: #cc00cc;
  --neon-cyan: #00ffff;
  --neon-cyan-light: #66ffff;
  --neon-cyan-dark: #00cccc;
  --neon-purple: #9d4edd;
  --neon-purple-light: #b366e6;
  --neon-purple-dark: #7b2cbf;
  --neon-green: #39ff14;
  --neon-yellow: #ffff00;
  --neon-orange: #ff6600;
  --neon-red: #ff0040;

  /* ========================================
     COLORS - Text
     ======================================== */
  --text-primary: #ffffff;
  --text-secondary: #c0c0c0;
  --text-muted: #9a9aaa;
  --text-accent: var(--neon-cyan);
  --text-link: var(--neon-pink);
  --text-link-hover: var(--neon-cyan);

  /* ========================================
     COLORS - Borders
     ======================================== */
  --border-color: #2a2a3e;
  --border-glow: var(--neon-purple);

  /* ========================================
     GLOW EFFECTS
     ======================================== */
  --glow-pink: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 40px #ff00ff;
  --glow-pink-subtle: 0 0 5px rgba(255, 0, 255, 0.5), 0 0 10px rgba(255, 0, 255, 0.3);
  --glow-cyan: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 40px #00ffff;
  --glow-cyan-subtle: 0 0 5px rgba(0, 255, 255, 0.5), 0 0 10px rgba(0, 255, 255, 0.3);
  --glow-purple: 0 0 5px #9d4edd, 0 0 10px #9d4edd, 0 0 20px #9d4edd;
  --glow-green: 0 0 5px #39ff14, 0 0 10px #39ff14, 0 0 20px #39ff14;
  --glow-text-pink: 0 0 10px rgba(255, 0, 255, 0.8), 0 0 20px rgba(255, 0, 255, 0.5), 0 0 30px rgba(255, 0, 255, 0.3);
  --glow-text-cyan: 0 0 10px rgba(0, 255, 255, 0.8), 0 0 20px rgba(0, 255, 255, 0.5), 0 0 30px rgba(0, 255, 255, 0.3);

  /* ========================================
     TYPOGRAPHY
     ======================================== */
  --font-display: 'Orbitron', 'WindowEvents', 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-code: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 4rem;

  --line-height-tight: 1.2;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;

  /* ========================================
     SPACING
     ======================================== */
  --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;

  /* ========================================
     LAYOUT
     ======================================== */
  --container-max: 1400px;
  --container-narrow: 900px;
  --container-wide: 1600px;
  --sidebar-width: 300px;
  --header-height: 80px;

  /* ========================================
     BORDERS & RADIUS
     ======================================== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --border-width: 1px;
  --border-width-thick: 2px;

  /* ========================================
     SHADOWS
     ======================================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
  --shadow-neon: 0 0 20px rgba(157, 78, 221, 0.3);

  /* ========================================
     TRANSITIONS
     ======================================== */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-glow: 300ms ease-in-out;

  /* ========================================
     Z-INDEX LAYERS
     ======================================== */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-tooltip: 600;
  --z-notification: 700;
  --z-scanlines: 800;
}

/* ========================================
   LIGHT MODE OVERRIDES (optional)
   ======================================== */
[data-theme="light"] {
  --bg-primary: #f5f5f7;
  --bg-secondary: #e8e8ec;
  --bg-tertiary: #d8d8dc;
  --bg-card: #ffffff;
  --bg-code: #1a1a2e;

  --text-primary: #1a1a2e;
  --text-secondary: #3a3a4e;
  --text-muted: #5a5a6e;

  --border-color: #c8c8d8;
}