:root {

  --font-main: font-family: "Inter"; 

  /* 🌌 Base Colors (unchanged) */
  --color-bg: #1c1c1c;
  --color-bg-alt: #1a1f4b;
  --color-surface: #23285a;
  --color-surface-hover: #2b3070;

   --color-heading:white;
   --color-heading-opp:black;

  /* 🧊 Text Colors */
  --color-text: #e0e3ff;
  --color-text-muted: #9ca3db;
  --color-heading: #ffffff;

  /* 🔮 Accent Colors */
  --color-primary: #7551ff;
  --color-primary-focus: #8c68ff;
  --color-secondary: #1e88e5;
  --color-accent: #17c1e8;
  --color-success: #01b574;
  --color-warning: #fbcf33;
  --color-danger: #ea0606;

  /* ⚪ Neutral / Utility */
  --color-white: #ffffff;
  --color-dark: #1b1e36;
  --color-border: #2f3470;
  --color-card-shadow: rgba(0, 0, 0, 0.25);

  /* 🌈 Gradients — muted variants for secondary use */
  --gradient-purple: linear-gradient(135deg, #5e3aa7, #8c6fd1);
  --gradient-blue: linear-gradient(135deg, #1c4a86, #3b7ad9);
  --gradient-red: linear-gradient(135deg, #8b1e2b, #c94b59);
  --gradient-darkred: linear-gradient(135deg, #75242c, #944148);
  --gradient-green: linear-gradient(135deg, #166b43, #2f9d6a);
  --gradient-teal: linear-gradient(135deg, #18796c, #2fb69a);
  --gradient-pink: linear-gradient(135deg, #883657, #b7648b);
  --gradient-purplegreen: linear-gradient(135deg, #523a94, #228f72);

  /* 🌟 Keep these vibrant — main accents */
  --gradient-primary: linear-gradient(135deg, #7551ff 0%, #17c1e8 100%);
  --gradient-surface: linear-gradient(145deg, #1a1f4b 0%, #23285a 100%);
  --gradient-accent: linear-gradient(120deg, #01b574 0%, #17c1e8 100%);

  /* ✨ Glassmorphism */
  --nav-bg: rgba(160, 160, 160, 0.6);
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: 1px solid rgba(255, 255, 255, 0.1);
  --glass-blur: blur(20px);

  /* 📏 Spacing & Typography */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 20px rgba(117, 81, 255, 0.6);
  --font-main: 'Inter', 'Poppins', sans-serif;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-sm: 14px;
  --container-max: 1200px;
  --gutter: 6%;
}




:root[data-theme='light'] {
  --color-bg: #ffffff;
  --color-bg-alt: #f5f5f5;
  --color-surface: #ffffff;
  --color-surface-hover: #e0e0e0;

  --color-text: #1b1e36;
  --color-text-muted: #6b7280;
  --color-heading: #1b1e36;

  --color-primary: #7551ff;
  --color-primary-focus: #8c68ff;
  --color-secondary: #1e88e5;
  --color-accent: #17c1e8;
  --color-success: #01b574;
  --color-warning: #fbcf33;
  --color-danger: #ea0606;

  --color-white: #ffffff;
  --color-dark: #f9f9f9;
  --color-border: #d1d5db;
  --color-card-shadow: rgba(0, 0, 0, 0.1);
  --nav-bg: rgba(255, 255, 255, 0.6);

  /* 🌈 Refined muted gradients for a calmer light UI */
  --gradient-purple: linear-gradient(135deg, #cbb7f6, #a58be4);
  --gradient-blue: linear-gradient(135deg, #b3d4fc, #6aa8f7);
  --gradient-red: linear-gradient(135deg, #f3b3b3, #e37b7b);
  --gradient-green: linear-gradient(135deg, #aee5c2, #63c48f);
  --gradient-teal: linear-gradient(135deg, #a7e6d4, #4fd1b2);
  --gradient-pink: linear-gradient(135deg, #f7bfd7, #ee93b9);
  --gradient-purplegreen: linear-gradient(135deg, #cdb4f8, #83e6b6);
  --gradient-darkred: linear-gradient(135deg, #df4e5c, #ad3f48);

 
  /* Keep key gradients vibrant */
  --gradient-primary: linear-gradient(135deg, #7551ff 0%, #17c1e8 100%);
  --gradient-surface: linear-gradient(145deg, #f5f5f5 0%, #ffffff 100%);
  --gradient-accent: linear-gradient(120deg, #17c1e8 0%, #01b574 100%);

  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-glow: 0 0 20px rgba(117, 81, 255, 0.3);
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-border: 1px solid rgba(0, 0, 0, 0.08);
  --glass-blur: blur(12px);

  --color-heading:black;
  --color-heading-opp:white;
}