/* ============================================================
   PRIMESTAKE — Design Token System
   ============================================================ */

:root {
  /* ── Backgrounds ─────────────────────────────────────────── */
  --bg-base:        #0A0C1E;
  --bg-deep:        #060814;
  --bg-surface:     #111328;
  --bg-card:        rgba(255,255,255,0.04);
  --bg-card-hover:  rgba(255,255,255,0.07);
  --bg-glass:       rgba(17,19,40,0.75);

  /* ── Accent Colors ───────────────────────────────────────── */
  --accent-violet:  #6C63FF;
  --accent-violet2: #8B83FF;
  --accent-orange:  #FF6B35;
  --accent-orange2: #FF8C5A;
  --accent-teal:    #00D4AA;
  --accent-gold:    #F5C518;
  --accent-red:     #FF3B5C;

  /* ── Gradients ───────────────────────────────────────────── */
  --grad-violet:    linear-gradient(135deg, #6C63FF 0%, #4A42CC 100%);
  --grad-orange:    linear-gradient(135deg, #FF6B35 0%, #FF3B5C 100%);
  --grad-teal:      linear-gradient(135deg, #00D4AA 0%, #00A884 100%);
  --grad-hero:      linear-gradient(135deg, #0A0C1E 0%, #1a1040 50%, #0d1630 100%);
  --grad-card:      linear-gradient(135deg, rgba(108,99,255,0.1) 0%, rgba(255,107,53,0.05) 100%);

  /* ── Text ────────────────────────────────────────────────── */
  --text-primary:   #FFFFFF;
  --text-secondary: #94A3B8;
  --text-muted:     #64748B;
  --text-accent:    #6C63FF;

  /* ── Borders ─────────────────────────────────────────────── */
  --border-subtle:  rgba(108,99,255,0.15);
  --border-card:    rgba(255,255,255,0.08);
  --border-glow:    rgba(108,99,255,0.4);

  /* ── Typography ──────────────────────────────────────────── */
  --font-display:   'Space Grotesk', sans-serif;
  --font-body:      'Inter', sans-serif;
  --font-mono:      'Orbitron', monospace;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:     0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg:     0 8px 40px rgba(0,0,0,0.5);
  --shadow-violet: 0 0 30px rgba(108,99,255,0.3);
  --shadow-orange: 0 0 30px rgba(255,107,53,0.3);
  --shadow-glow:   0 0 60px rgba(108,99,255,0.2);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;
  --transition-spring: 0.4s cubic-bezier(0.34,1.56,0.64,1);

  /* ── Z-Index ─────────────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── Container ───────────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
}