:root {
  /* === Primary Purple Palette === */
  --purple-50:  #F5F3FF;
  --purple-100: #EDE9FE;
  --purple-200: #DDD6FE;
  --purple-300: #C4B5FD;
  --purple-400: #A78BFA;
  --purple-500: #8B5CF6;
  --purple-600: #7C3AED;
  --purple-700: #6D28D9;
  --purple-800: #5B21B6;
  --purple-900: #4C1D95;
  --purple-950: #2E1065;

  /* === Neon Green Accent === */
  --neon-green: #39FF14;
  --neon-green-dim: rgba(57, 255, 20, 0.6);
  --neon-green-bg: rgba(57, 255, 20, 0.08);
  --neon-green-border: rgba(57, 255, 20, 0.25);
  --neon-green-glow: rgba(57, 255, 20, 0.3);

  /* === Semantic Colors === */
  --bg-primary:     #0A0A0F;
  --bg-secondary:   #12121A;
  --bg-surface:     rgba(124, 58, 237, 0.06);
  --bg-glass:       rgba(124, 58, 237, 0.08);
  --bg-glass-hover: rgba(124, 58, 237, 0.14);
  --bg-glass-active:rgba(124, 58, 237, 0.18);

  --text-primary:   #F5F3FF;
  --text-secondary: #A78BFA;
  --text-muted:     rgba(167, 139, 250, 0.6);
  --text-dim:       rgba(167, 139, 250, 0.35);

  --glass-bg:       rgba(124, 58, 237, 0.08);
  --glass-border:   rgba(124, 58, 237, 0.15);
  --border-glow:    rgba(124, 58, 237, 0.4);
  --border-subtle:  rgba(124, 58, 237, 0.08);

  --success: #10B981;
  --success-bg: rgba(16, 185, 129, 0.1);
  --warning: #F59E0B;
  --warning-bg: rgba(245, 158, 11, 0.1);
  --error:   #EF4444;
  --error-bg: rgba(239, 68, 68, 0.1);
  --info:    #A78BFA;
  --info-bg: rgba(167, 139, 250, 0.1);

  /* === Spacing Scale (8px base) === */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* === Typography === */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  --weight-light:    300;
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* === Effects === */
  --blur-glass:  20px;
  --blur-subtle: 8px;
  --shadow-glow:  0 0 20px rgba(124, 58, 237, 0.3);
  --shadow-glow-lg: 0 0 40px rgba(124, 58, 237, 0.4);
  --shadow-card:  0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.5);

  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   500ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Layout === */
  --max-content:   1200px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* === Cinematic Home === */
  --neon-bloom: rgba(124, 58, 237, 0.6);
  --neon-soft: rgba(167, 139, 250, 0.3);

  /* === Surface for modals === */
  --surface-1: #1a1028;

  /* === Gradient Text === */
  --gradient-primary: linear-gradient(135deg, #7C3AED, #6D28D9);

  /* === Cinematic Core System === */
  --core-size: 220px;
  --core-size-mobile: 140px;
  --core-size-sm: 90px;

  /* Energy system */
  --energy-primary: rgba(167, 139, 250, 0.9);
  --energy-secondary: rgba(124, 58, 237, 0.7);

  /* Holographic node system */
  --holo-frame-color: rgba(167, 139, 250, 0.35);

  /* Side panel glassmorphism */
  --panel-bg: rgba(38, 38, 42, 0.55);
  --panel-border: rgba(255, 255, 255, 0.06);
  --panel-border-top: rgba(255, 255, 255, 0.15);
  --panel-blur: 28px;
  --panel-width: 280px;

  /* Volumetric lighting */
  --vol-light-color: rgba(124, 58, 237, 0.09);
  --vol-light-intensity: 0.9;
}