/* ==========================================================================
   Aeonfall - Design Tokens & Variables
   Theme: Dark Mythological Greek Fantasy / Astral Cosmic Energy
   ========================================================================== */

:root {
  /* Color Palette - Obsidian & Charcoal Base */
  --bg-darkest: #050608;
  --bg-main: #08090d;
  --bg-surface: #0f1219;
  --bg-surface-elevated: #151a24;
  --bg-surface-glass: rgba(15, 18, 25, 0.78);
  --bg-card: rgba(21, 26, 36, 0.85);
  --bg-card-hover: rgba(28, 35, 50, 0.95);
  
  /* Color Palette - Lighting & Astral Energies */
  --astral-cyan: #00f0ff;
  --astral-cyan-glow: rgba(0, 240, 255, 0.4);
  --astral-cyan-deep: #0098a6;
  --lightning-lavender: #a855f7;
  --lightning-purple: #7c3aed;
  --lightning-glow: rgba(168, 85, 247, 0.35);
  --astral-gradient: linear-gradient(135deg, #00f0ff 0%, #a855f7 50%, #ec4899 100%);
  --astral-gradient-subtle: linear-gradient(135deg, rgba(0, 240, 255, 0.15) 0%, rgba(124, 58, 237, 0.15) 100%);
  
  /* Color Palette - Accents & UI */
  --gold-primary: #d4af37;
  --gold-light: #f3cf58;
  --gold-dark: #997c1e;
  --gold-glow: rgba(212, 175, 55, 0.4);
  --gold-gradient: linear-gradient(135deg, #fce079 0%, #d4af37 50%, #947113 100%);
  --pariah-crimson: #991b1b;
  --pariah-crimson-bright: #ef4444;
  --pariah-crimson-glow: rgba(239, 68, 68, 0.4);
  
  /* Typography */
  --font-display: 'Cinzel', 'Cinzel Decorative', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, monospace;
  
  /* Text Colors */
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-gold: #f3cf58;
  --text-cyan: #38bdf8;
  
  /* Border & Gradients */
  --border-subtle: rgba(212, 175, 55, 0.2);
  --border-gold: rgba(212, 175, 55, 0.45);
  --border-cyan: rgba(0, 240, 255, 0.4);
  --border-purple: rgba(168, 85, 247, 0.4);
  
  /* Box Shadows & Glows */
  --glow-gold-sm: 0 0 15px rgba(212, 175, 55, 0.25);
  --glow-gold-lg: 0 0 35px rgba(212, 175, 55, 0.45), 0 0 70px rgba(212, 175, 55, 0.2);
  --glow-cyan-sm: 0 0 15px rgba(0, 240, 255, 0.3);
  --glow-cyan-lg: 0 0 35px rgba(0, 240, 255, 0.5), 0 0 80px rgba(0, 240, 255, 0.25);
  --glow-purple-lg: 0 0 35px rgba(168, 85, 247, 0.5), 0 0 80px rgba(124, 58, 237, 0.25);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-card-hover: 0 20px 48px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 240, 255, 0.2);
  
  /* Layout & Spacing */
  --max-width: 1280px;
  --header-height: 80px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  
  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}