/* ==========================================================================
   VERTIGO CO - DESIGN TOKENS & CSS VARIABLES
   ========================================================================== */

:root {
  /* Color Palette - Dark Fantasy Palette */
  --bg-dark-void: #06020a;
  --bg-dark-purple: #0f071a;
  --bg-card: rgba(18, 9, 31, 0.75);
  --bg-card-hover: rgba(30, 14, 51, 0.85);
  --bg-glass: rgba(15, 7, 26, 0.65);

  /* Primary Accent - Glowing Purple Energy */
  --purple-glow: #9d34ff;
  --purple-bright: #c06cff;
  --purple-dark: #4a1280;
  --purple-border: rgba(157, 52, 255, 0.4);
  --purple-border-glow: rgba(157, 52, 255, 0.8);

  /* Secondary Accent - Fiery Dragon Orange & Gold */
  --fire-orange: #ff5a1f;
  --fire-red: #ff2200;
  --fire-yellow: #ffaa22;
  --gold-accent: #ffd700;
  --orange-border: rgba(255, 90, 31, 0.5);
  --orange-glow: rgba(255, 90, 31, 0.8);

  /* Status Colors */
  --status-online: #00ff66;
  --status-online-glow: rgba(0, 255, 102, 0.6);

  /* Metal & Neutral Colors */
  --metal-silver: #d1d8e0;
  --text-muted: #a097b5;
  --text-bright: #ffffff;
  --border-gothic: rgba(140, 100, 190, 0.25);
  --border-gold: rgba(255, 180, 50, 0.35);

  /* Fonts */
  --font-title: 'Cinzel Decorative', 'Cinzel', serif;
  --font-sub: 'Cinzel', serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Shadows & Glows */
  --glow-purple-sm: 0 0 10px rgba(157, 52, 255, 0.5);
  --glow-purple-lg: 0 0 25px rgba(157, 52, 255, 0.7), 0 0 50px rgba(157, 52, 255, 0.3);
  --glow-orange-sm: 0 0 10px rgba(255, 90, 31, 0.6);
  --glow-orange-lg: 0 0 25px rgba(255, 90, 31, 0.8), 0 0 50px rgba(255, 34, 0, 0.4);
  --glow-gold: 0 0 15px rgba(255, 215, 0, 0.6);
  
  /* 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.4, 0, 0.2, 1);
}

/* Common Keyframe Animations */
@keyframes pulseGlowPurple {
  0%, 100% {
    box-shadow: 0 0 15px rgba(157, 52, 255, 0.4), inset 0 0 10px rgba(157, 52, 255, 0.2);
    border-color: rgba(157, 52, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 25px rgba(157, 52, 255, 0.8), inset 0 0 18px rgba(157, 52, 255, 0.4);
    border-color: rgba(192, 108, 255, 0.9);
  }
}

@keyframes pulseGlowOrange {
  0%, 100% {
    box-shadow: 0 0 15px rgba(255, 90, 31, 0.5), inset 0 0 10px rgba(255, 90, 31, 0.2);
    border-color: rgba(255, 90, 31, 0.6);
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 90, 31, 0.9), 0 0 60px rgba(255, 34, 0, 0.4), inset 0 0 20px rgba(255, 170, 34, 0.5);
    border-color: rgba(255, 170, 34, 1);
  }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

@keyframes lightningFlash {
  0%, 94%, 96%, 100% { opacity: 0; }
  95% { opacity: 0.45; }
}

@keyframes titleFlame {
  0%, 100% {
    text-shadow: 0 0 15px rgba(255, 90, 31, 0.8), 0 0 30px rgba(255, 34, 0, 0.6);
  }
  50% {
    text-shadow: 0 0 25px rgba(255, 170, 34, 1), 0 0 50px rgba(255, 90, 31, 0.8);
  }
}