:root {
   /* ==========================================================================
     COLOR SYSTEM (DARK MODE - DEFAULT)
     ========================================================================== */
   --bg-gradient-start: #0E1742;
   --bg-gradient-end: #052D5D;

   /* Pink/purple mouse glow - hex #361134 with transparency */
   --glow-color: rgba(255, 0, 242, 0.45);

   /* Grid settings */
   --grid-line-color: rgba(255, 255, 255, 0.06);
   --grid-ripple-color: rgba(255, 255, 255, 0.15);

   /* Text colors */
   --text-primary: #FFFFFF;
   --text-secondary: #94A3B8;
   --text-muted: #64748B;

   /* Accents & Brand */
   --accent-orange: #F89A0B;
   --accent-orange-hover: #D97706;
   --accent-orange-glow: rgba(245, 158, 11, 0.35);
   --accent-blue-border: rgba(255, 255, 255, 0.1);
   --accent-blue-bg-glow: rgba(5, 45, 93, 0.4);

   /* Glassmorphism elements */
   --glass-bg: rgba(255, 255, 255, 0.03);
   --glass-bg-hover: rgba(255, 255, 255, 0.06);
   --glass-border: rgba(255, 255, 255, 0.08);
   --glass-border-hover: rgba(255, 255, 255, 0.2);
   --glass-shadow: rgba(0, 0, 0, 0.3);
   --glass-glow: rgba(255, 255, 255, 0.02);

   /* Custom Cursor */
   --cursor-color-inner: #F59E0B;
   --cursor-color-outer: rgba(245, 158, 11, 0.3);

   /* Theme Button */
   --theme-btn-bg: rgba(255, 255, 255, 0.05);
   --theme-btn-border: rgba(255, 255, 255, 0.1);

   /* other colors  */
   --color-black: #000000;
   --color-orange: #F89A0B;
   --color-steel-blue: #444472;
   --navy-950: #15163A;
   --navy-900: #203060;
   --navy-800: #1E3475;
   --color-lavender-100: #E0E0FF;




   --active-card-bg: #FFFFFF;
   --inactive-card-bg: rgba(255, 255, 255, 0.6);
   --inactive-card-border: rgba(15, 23, 42, 0.08);
   --circle-inactive-border: rgba(15, 23, 42, 0.15);
   --circle-inactive-text: var(--text-secondary);

   /* ==========================================================================
     SPACING SYSTEM (FLUID CLAMPS FROM MOBILE TO DESKTOP)
     ========================================================================== */
   --space-xs: clamp(0.25rem, 0.22rem + 0.16vw, 0.375rem);
   /* 4px -> 6px */
   --space-sm: clamp(0.5rem, 0.44rem + 0.31vw, 0.75rem);
   /* 8px -> 12px */
   --space-md: clamp(1rem, 0.88rem + 0.63vw, 1.5rem);
   /* 16px -> 24px */
   --space-lg: clamp(1.5rem, 1.31rem + 0.94vw, 2.25rem);
   /* 24px -> 36px */
   --space-xl: clamp(2rem, 1.75rem + 1.25vw, 3rem);
   /* 32px -> 48px */
   --space-2xl: clamp(3rem, 2.63rem + 1.88vw, 4.5rem);
   /* 48px -> 72px */
   --space-3xl: clamp(4rem, 3.5rem + 2.5vw, 6rem);
   /* 64px -> 96px */

   /* ==========================================================================
     TYPOGRAPHY SYSTEM (FLUID CLAMPS FROM MOBILE TO DESKTOP)
     ========================================================================== */
   --font-display: clamp(2rem, 1.5rem + 2.5vw, 3.75rem);
   /* 32px -> 60px */
   --font-h1: clamp(2rem, 1.5rem + 2.5vw, 3.75rem);
   /* 32px -> 60px */
   --font-h2: clamp(1.75rem, 1.4rem + 1.75vw, 3rem);
   /* 28px -> 48px */
   --font-h3: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
   /* 24px -> 36px */
   --font-body-large: clamp(1.125rem, 1.05rem + 0.38vw, 1.375rem);
   /* 18px -> 22px */
   --font-body: clamp(0.938rem, 0.92rem + 0.09vw, 1rem);
   /* 15px -> 16px */
   --font-small: clamp(0.813rem, 0.79rem + 0.09vw, 0.875rem);
   /* 13px -> 14px */
   --font-caption: clamp(0.688rem, 0.67rem + 0.09vw, 0.75rem);
   /* 11px -> 12px */

   /* ==========================================================================
     TRANSITION & ELEVATION TOKENS
     ========================================================================== */
   --transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
   --transition-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
   --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   COLOR SYSTEM (LIGHT MODE OVERRIDES)
   ========================================================================== */
/* body.light-theme {
   --bg-gradient-start: #F8FAFC;
   --bg-gradient-end: #E2E8F0;

   --glow-color: rgba(219, 39, 119, 0.08);

   --grid-line-color: rgba(15, 23, 42, 0.05);
   --grid-ripple-color: rgba(15, 23, 42, 0.12);

   --text-primary: #0F172A;
   --text-secondary: #475569;
   --text-muted: #64748B;

   --accent-orange: #D97706;
   --accent-orange-hover: #B45309;
   --accent-orange-glow: rgba(217, 119, 6, 0.25);
   --accent-blue-border: rgba(15, 23, 42, 0.08);
   --accent-blue-bg-glow: rgba(5, 45, 93, 0.05);

   --glass-bg: rgba(255, 255, 255, 0.45);
   --glass-bg-hover: rgba(255, 255, 255, 0.7);
   --glass-border: rgba(15, 23, 42, 0.08);
   --glass-border-hover: rgba(15, 23, 42, 0.2);
   --glass-shadow: rgba(15, 23, 42, 0.06);
   --glass-glow: rgba(255, 255, 255, 0.2);

   --cursor-color-inner: #D97706;
   --cursor-color-outer: rgba(217, 119, 6, 0.2);

   --theme-btn-bg: rgba(15, 23, 42, 0.05);
   --theme-btn-border: rgba(15, 23, 42, 0.08);

   --active-card-bg: #121B47;
  --inactive-card-bg: rgba(255, 255, 255, 0.02);
  --inactive-card-border: rgba(255, 255, 255, 0.08);
  --circle-inactive-border: rgba(255, 255, 255, 0.15);
  --circle-inactive-text: var(--text-secondary);
} */