/* ==========================================================
   ArcadeHub — CSS Custom Properties
   Neon Glassmorphism Arcade Theme
   ========================================================== */

:root {
  /* --- Neon Accents --- */
  --clr-neon-cyan:     #00f0ff;
  --clr-neon-green:    #00ff9c;
  --clr-neon-purple:   #a855f7;
  --clr-neon-pink:     #ff3cac;
  --clr-neon-yellow:   #ffc857;
  --clr-neon-red:      #ef4444;
  /* Legacy aliases — existing code keeps working */
  --clr-neon-orange:   var(--clr-neon-cyan);
  --clr-neon-amber:    var(--clr-neon-green);

  /* --- Backgrounds (crispy-arcade-play HSL palette) --- */
  --clr-bg-base:       hsl(250, 25%, 6%);
  --clr-bg-surface:    hsl(250, 22%, 8%);
  --clr-bg-raised:     hsl(250, 20%, 13%);
  --clr-bg-card:       hsl(250, 20%, 10%);
  --clr-bg-muted:      hsl(250, 15%, 16%);
  --clr-bg-overlay:    hsla(250, 25%, 6%, 0.94);
  --clr-bg-glass:      hsla(250, 20%, 10%, 0.30);

  /* --- Text --- */
  --clr-text-primary:   hsl(180, 100%, 95%);
  --clr-text-secondary: hsl(220, 15%, 55%);
  --clr-text-muted:     hsl(220, 12%, 40%);
  --clr-text-accent:    var(--clr-neon-green);

  /* --- Crispy Cash --- */
  --clr-cc:            hsl(45, 100%, 55%);
  --clr-cc-glow:       hsl(45, 100%, 55%);

  /* --- Borders --- */
  --clr-border:        hsl(250, 20%, 18%);
  --clr-border-accent: var(--clr-neon-green);

  /* --- Rarity --- */
  --clr-common:        #8ea0c0;
  --clr-rare:          #60a5fa;
  --clr-epic:          var(--clr-neon-purple);
  --clr-legendary:     var(--clr-cc);

  /* --- Typography --- */
  --font-display: 'Orbitron', sans-serif;
  --font-pixel:   'Orbitron', sans-serif;
  --font-ui:      'Rajdhani', sans-serif;
  --font-body:    'Rajdhani', sans-serif;

  /* --- Spacing Scale --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-9:  2.25rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* --- Border Radius --- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill: 9999px;

  /* --- Transitions --- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* --- Glow Effects (multi-layer neon from crispy-arcade-play) --- */
  --glow-green:  0 0 10px hsl(160,100%,50%,0.3), 0 0 30px hsl(160,100%,50%,0.15), 0 0 60px hsl(160,100%,50%,0.05);
  --glow-purple: 0 0 10px hsl(280,80%,55%,0.3),  0 0 30px hsl(280,80%,55%,0.15),  0 0 60px hsl(280,80%,55%,0.05);
  --glow-gold:   0 0 10px hsl(45,100%,55%,0.3),  0 0 30px hsl(45,100%,55%,0.15),  0 0 60px hsl(45,100%,55%,0.05);
  --glow-cyan:   0 0 10px hsl(180,100%,55%,0.3), 0 0 30px hsl(180,100%,55%,0.15), 0 0 60px hsl(180,100%,55%,0.05);
  --glow-pink:   0 0 10px hsl(320,100%,60%,0.3), 0 0 30px hsl(320,100%,60%,0.15), 0 0 60px hsl(320,100%,60%,0.05);
  --glow-cc:     var(--glow-gold);
  --glow-yellow: var(--glow-gold);
  --glow-orange: var(--glow-cyan);
  --glow-amber:  var(--glow-green);
  --glow:        0 0 30px hsl(160,100%,50%,0.1);
  --shadow:      0 8px 32px rgba(0, 0, 0, 0.6);

  /* Shorthand aliases used by component CSS */
  --neon-cyan:    var(--clr-neon-cyan);
  --neon-green:   var(--clr-neon-green);
  --neon-purple:  var(--clr-neon-purple);
  --neon-pink:    var(--clr-neon-pink);
  --neon-yellow:  var(--clr-neon-yellow);
  --bg-card:      var(--clr-bg-card);
  --bg-secondary: var(--clr-bg-surface);
  --border-glow:  hsl(250, 20%, 22%);
  --text-primary: var(--clr-text-primary);
  --text-secondary: var(--clr-text-secondary);
  --text-muted:   var(--clr-text-muted);

  /* --- Layout --- */
  --navbar-height: 64px;
  --max-width:     1280px;
  --sidebar-width: 240px;

  /* --- Z-Index --- */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-modal:    10000;
  --z-toast:    300;
  --z-navbar:   400;
}

/* ==========================================================
   Theme Overrides — applied via body class
   ========================================================== */

/* Cyber Purple — unlock in rewards shop */
body.theme-cyber {
  --clr-neon-cyan:     #a855f7;
  --clr-neon-orange:   #a855f7;
  --clr-neon-pink:     #7c3aed;
  --clr-bg-base:       #0d0722;
  --clr-bg-surface:    #130a2e;
  --clr-bg-card:       #1a0e3d;
  --clr-border:        #4c1d95;
  --clr-text-accent:   #a855f7;
  --clr-border-accent: #7c3aed;
  --glow-cyan:         0 0 8px #a855f7, 0 0 24px rgba(168,85,247,0.4);
  --glow-orange:       0 0 8px #a855f7, 0 0 24px rgba(168,85,247,0.4);
}

/* Matrix Green */
body.theme-matrix {
  --clr-neon-cyan:     #00ff41;
  --clr-neon-orange:   #00ff41;
  --clr-neon-pink:     #00cc33;
  --clr-neon-yellow:   #00ff41;
  --clr-bg-base:       #000a00;
  --clr-bg-surface:    #001200;
  --clr-bg-card:       #001a00;
  --clr-border:        #004400;
  --clr-text-primary:  #00ff41;
  --clr-text-accent:   #00ff41;
  --clr-border-accent: #00ff41;
  --glow-cyan:         0 0 8px #00ff41, 0 0 24px rgba(0,255,65,0.4);
  --glow-orange:       0 0 8px #00ff41, 0 0 24px rgba(0,255,65,0.4);
}

/* Synthwave Sunset */
body.theme-sunset {
  --clr-neon-cyan:     #ff6ec7;
  --clr-neon-orange:   #ff6ec7;
  --clr-neon-pink:     #ff9d4d;
  --clr-neon-yellow:   #ff6ec7;
  --clr-bg-base:       #12001e;
  --clr-bg-surface:    #1e0030;
  --clr-bg-card:       #240038;
  --clr-border:        #6b0057;
  --clr-text-accent:   #ff6ec7;
  --clr-border-accent: #ff9d4d;
  --glow-cyan:         0 0 8px #ff6ec7, 0 0 24px rgba(255,110,199,0.4);
  --glow-orange:       0 0 8px #ff6ec7, 0 0 24px rgba(255,110,199,0.4);
}

/* Arctic Ice */
body.theme-ice {
  --clr-neon-cyan:     #00d4ff;
  --clr-neon-orange:   #00d4ff;
  --clr-neon-pink:     #80e5ff;
  --clr-bg-base:       #010f1a;
  --clr-bg-surface:    #021628;
  --clr-bg-card:       #041f35;
  --clr-border:        #0a4060;
  --clr-text-accent:   #00d4ff;
  --clr-border-accent: #80e5ff;
  --glow-cyan:         0 0 8px #00d4ff, 0 0 24px rgba(0,212,255,0.4);
  --glow-orange:       0 0 8px #00d4ff, 0 0 24px rgba(0,212,255,0.4);
}