: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;

  /* === 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-glass:   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 === */
  --sidebar-width: 260px;
  --header-height: 64px;
  --max-content:   1200px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* === Monolith / Cinematic Home === */
  --monolith-width: 180px;
  --monolith-height: 300px;
  --monolith-radius: 4px;
  --neon-core: rgba(124, 58, 237, 1);
  --neon-bloom: rgba(124, 58, 237, 0.6);
  --neon-soft: rgba(167, 139, 250, 0.3);
  --neon-dim: rgba(124, 58, 237, 0.15);
  --surface-glass: linear-gradient(
    180deg,
    rgba(167, 139, 250, 0.12) 0%,
    rgba(124, 58, 237, 0.04) 40%,
    rgba(76, 29, 149, 0.08) 100%
  );
  --surface-sheen: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.06) 0%,
    transparent 50%,
    rgba(167, 139, 250, 0.04) 100%
  );

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

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