:root {
  /* Color Palette - Deep Charcoal, Rich Purple Accent, Off-White */
  --bg-dark: #0B0C10;
  --bg-card: #12151E;
  --bg-card-hover: #181C2A;
  --bg-surface: #171A24;
  --bg-glass: rgba(18, 21, 30, 0.85);
  --bg-light: #F8F9FA;
  --bg-light-card: #FFFFFF;

  /* Brand Accents */
  --purple-primary: #7C3AED;
  --purple-hover: #6D28D9;
  --purple-light: #8B5CF6;
  --purple-glow: rgba(124, 58, 237, 0.35);
  --purple-subtle: rgba(124, 58, 237, 0.12);
  --purple-gradient: linear-gradient(135deg, #7C3AED 0%, #A855F7 100%);
  --purple-dark-gradient: linear-gradient(180deg, rgba(124, 58, 237, 0.15) 0%, rgba(11, 12, 16, 0) 100%);

  /* Text Colors */
  --text-white: #FFFFFF;
  --text-main: #F3F4F6;
  --text-muted: #9CA3AF;
  --text-dark: #111827;
  --text-dark-muted: #4B5563;

  /* Borders & Shadows */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-active: rgba(124, 58, 237, 0.5);
  --border-light: #E5E7EB;

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
  --shadow-purple: 0 15px 35px -5px rgba(124, 58, 237, 0.25);
  --shadow-glow: 0 0 40px rgba(124, 58, 237, 0.3);

  /* Typography */
  --font-heading: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Dimensions & Spacing */
  --container-max: 1280px;
  --header-height: 80px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}