/* ═══════════════════════════════════════════════════════════════
   TEMPLUXO — CSS VARIABLES
   Central design tokens — edit here to retheme everything
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Rajdhani:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ── Colors ── */
  --bg:             #050510;
  --bg2:            #0a0a1a;
  --panel:          rgba(10, 15, 35, .65);
  --panel2:         rgba(15, 20, 45, .55);
  --stroke:         rgba(0, 240, 255, .12);
  --stroke2:        rgba(255, 45, 123, .10);
  --text:           rgba(230, 235, 255, .94);
  --muted:          rgba(180, 190, 220, .72);

  /* ── Accent palette ── */
  --neon:           #00f0ff;
  --neon-glow:      rgba(0, 240, 255, .4);
  --pink:           #ff2d7b;
  --pink-glow:      rgba(255, 45, 123, .35);
  --violet:         #8b5cf6;
  --violet-glow:    rgba(139, 92, 246, .35);
  --green:          #00ff88;
  --green-glow:     rgba(0, 255, 136, .3);
  --gold:           #ffd700;

  /* ── Shadows & Shape ── */
  --shadow:         0 20px 60px rgba(0, 0, 0, .7);
  --radius:         16px;
  --radius2:        22px;
  --container:      1180px;

  /* ── Typography ── */
  --font-display:   'Orbitron', sans-serif;
  --font-heading:   'Rajdhani', sans-serif;
  --font-body:      'Chakra Petch', sans-serif;
}