/* ==========================================================================
   DESIGN SYSTEM - VARIABLES
   ========================================================================== */

:root {
   /* ==========================================
     COLOR SYSTEM (Dark Premium Palette)
     ========================================== */
   /* Background Colors */
   --color-bg-dark: #050508;
   --color-bg-dark-rgb: 5, 5, 8;
   --color-bg-panel: rgba(13, 12, 21, 0.4);
   --color-bg-panel-rgb: 13, 12, 21;
   --color-bg-panel-hover: rgba(20, 18, 32, 0.65);

   /* Primary Brand Colors */
   --color-primary: #6C5DD3;
   --color-primary-rgb: 108, 93, 211;
   --color-primary-hover: #5A4CBE;
   --color-primary-glow: rgba(108, 93, 211, 0.15);

   /* Accents */
   --color-accent-purple: #A855F7;
   --color-accent-purple-rgb: 168, 85, 247;
   --color-accent-blue: #6366F1;
   --color-accent-blue-rgb: 99, 102, 241;

   /* Typography Colors */
   --color-text-light: #F8FAFC;
   --color-text-light-rgb: 248, 250, 252;
   --color-text-muted: #94A3B8;
   --color-text-muted-rgb: 148, 163, 184;
   --color-text-dark: #0F172A;

   /* Borders & Dividers */
   --color-border: rgba(255, 255, 255, 0.08);
   --color-border-hover: rgba(255, 255, 255, 0.16);
   --color-border-glow: rgba(108, 93, 211, 0.3);

   /* State Colors */
   --color-success: #10B981;
   --color-error: #EF4444;
   --color-warning: #F59E0B;

   /* Gradients */
   --gradient-text: linear-gradient(135deg, #A855F7 0%, #6366F1 100%);
   --gradient-primary: linear-gradient(135deg, #7C3AED 0%, #4F46E5 100%);
   --gradient-bg-glow: radial-gradient(circle, rgba(108, 93, 211, 0.15) 0%, rgba(5, 5, 8, 0) 70%);

   /* ==========================================
     TYPOGRAPHY SYSTEM
     ========================================== */
   /* Fonts */
   --font-primary: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   --font-secondary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

   /* Font Sizes (Fluid Hierarchy) */
   --fs-xs: 0.75rem;
   /* 12px */
   --fs-sm: 0.875rem;
   /* 14px */
   --fs-base: 1rem;
   /* 16px */
   --fs-md: 1.125rem;
   /* 18px */
   --fs-lg: 1.25rem;
   /* 20px */
   --fs-xl: 1.5rem;
   /* 24px */
   --fs-2xl: 1.875rem;
   /* 30px */
   --fs-3xl: 2.25rem;
   /* 36px */
   --fs-4xl: 3rem;
   /* 48px */
   --fs-5xl: 3.75rem;
   /* 60px */
   --fs-hero: 4.5rem;
   /* 72px */

   /* Font Weights */
   --fw-light: 300;
   --fw-regular: 400;
   --fw-medium: 500;
   --fw-semibold: 600;
   --fw-bold: 700;
   --fw-extrabold: 800;

   /* Line Heights */
   --lh-tight: 1.15;
   --lh-heading: 1.25;
   --lh-base: 1.6;
   --lh-loose: 1.8;

   /* Letter Spacing */
   --ls-tight: -0.02em;
   --ls-normal: 0em;
   --ls-wide: 0.05em;
   --ls-widest: 0.1em;

   /* ==========================================
     LAYOUT, SPACING & DECORATION
     ========================================== */
   /* Border Radius */
   --radius-xs: 4px;
   --radius-sm: 8px;
   --radius-md: 16px;
   --radius-lg: 24px;
   --radius-xl: 32px;
   --radius-pill: 9999px;

   /* Shadows & Glows */
   --shadow-flat: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
   --shadow-glow: 0 0 25px rgba(108, 93, 211, 0.25);
   --shadow-glow-hover: 0 0 35px rgba(108, 93, 211, 0.4);
   --shadow-navbar: 0 4px 30px rgba(0, 0, 0, 0.5);

   /* Spacing */
   --spacing-xxs: 4px;
   --spacing-xs: 8px;
   --spacing-sm: 16px;
   --spacing-md: 24px;
   --spacing-lg: 32px;
   --spacing-xl: 48px;
   --spacing-xxl: 64px;
   --spacing-section: 50px;

   /* Transitions */
   --transition-fast: 0.2s ease;
   --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
   --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);

   /* Z-index Scale */
   --z-background: -10;
   --z-bg-glow: -5;
   --z-decorations: 1;
   --z-hero-content: 5;
   --z-navbar: 1000;
   --z-navbar-dropdown: 1010;

   /* ==========================================
      THEME-SPECIFIC VARIABLES (Default: Dark)
      ========================================== */
   --color-navbar-bg: rgba(5, 5, 8, 0.75);
   --color-navbar-mobile-bg: rgba(5, 5, 8, 0.95);
   --color-dropdown-bg: rgba(13, 12, 21, 0.95);
   --color-dropdown-item-hover: rgba(108, 93, 211, 0.1);
   --color-megamenu-bg: rgba(9, 8, 14, 0.98);
   --color-megamenu-mobile-bg: rgba(20, 18, 33, 0.4);
   --color-service-icon-bg: rgba(20, 18, 33, 0.7);
   --color-megamenu-bottom-bg: rgba(15, 14, 23, 0.6);
   --color-megamenu-bottom-border: rgba(108, 93, 211, 0.15);
   --color-megamenu-cta-text: #FFF;
   --color-megamenu-cta-border: rgba(108, 93, 211, 0.4);
   --gradient-featured-card: linear-gradient(145deg, rgba(20, 18, 33, 0.7) 0%, rgba(10, 9, 16, 0.9) 100%);
   --color-featured-card-border: rgba(108, 93, 211, 0.45);
   --color-stat-badge-bg: rgba(20, 18, 33, 0.5);
   --color-brand-badge-bg: rgba(20, 18, 33, 0.85);
   --color-btn-secondary-bg: rgba(13, 12, 21, 0.4);
   --color-btn-secondary-hover-bg: rgba(13, 12, 21, 0.7);
   --color-always-light: #F8FAFC;

   /* Decorative Spheres Variables */
   --sphere-opacity: 0.85;
   --sphere-blend-mode: screen;
   --sphere-drop-shadow: none;
   --sphere-filter: none;
   --logo-filter: invert(1) hue-rotate(180deg);

   /* Hero Background & Glows (Default: Dark) */
   --hero-bg: var(--color-bg-dark);
   --gradient-glow-left: var(--gradient-bg-glow);
   --gradient-glow-right: var(--gradient-bg-glow);
}

/* ==========================================================================
   LIGHT THEME OVERRIDES
   ========================================================================== */
[data-theme="light"] {
   /* Background Colors */
   --color-bg-dark: #FAF9FF;
   --color-bg-dark-rgb: 250, 249, 255;
   --color-bg-panel: rgba(255, 255, 255, 0.75);
   --color-bg-panel-rgb: 255, 255, 255;
   --color-bg-panel-hover: rgba(255, 255, 255, 0.9);

   /* Typography Colors */
   --color-text-light: #090814;
   --color-text-light-rgb: 9, 8, 20;
   --color-text-muted: #475569;
   --color-text-muted-rgb: 71, 85, 105;

   /* Borders & Dividers */
   --color-border: rgba(108, 93, 211, 0.12);
   --color-border-hover: rgba(108, 93, 211, 0.25);
   --color-border-glow: rgba(108, 93, 211, 0.4);

   /* Gradients */
   --gradient-bg-glow: radial-gradient(circle, rgba(108, 93, 211, 0.08) 0%, rgba(250, 249, 255, 0) 70%);

   /* Shadows & Glows */
   --shadow-navbar: 0 10px 30px rgba(108, 93, 211, 0.06);
   --shadow-glow: 0 8px 25px rgba(108, 93, 211, 0.2);
   --shadow-glow-hover: 0 12px 35px rgba(108, 93, 211, 0.35);

   /* Theme-specific Overrides */
   --color-navbar-bg: rgba(255, 255, 255, 0.75);
   --color-navbar-mobile-bg: rgba(255, 255, 255, 0.95);
   --color-dropdown-bg: rgba(255, 255, 255, 0.95);
   --color-dropdown-item-hover: rgba(108, 93, 211, 0.08);
   --color-megamenu-bg: rgba(255, 255, 255, 0.98);
   --color-megamenu-mobile-bg: rgba(108, 93, 211, 0.04);
   --color-service-icon-bg: rgba(108, 93, 211, 0.06);
   --color-megamenu-bottom-bg: rgba(108, 93, 211, 0.03);
   --color-megamenu-bottom-border: rgba(108, 93, 211, 0.1);
   --color-megamenu-cta-text: #6C5DD3;
   --color-megamenu-cta-border: rgba(108, 93, 211, 0.3);
   --gradient-featured-card: linear-gradient(145deg, #FFFFFF 0%, #F5F4FA 100%);
   --color-featured-card-border: rgba(108, 93, 211, 0.15);
   --color-stat-badge-bg: rgba(108, 93, 211, 0.04);
   --color-brand-badge-bg: rgba(255, 255, 255, 0.9);
   --color-btn-secondary-bg: rgba(255, 255, 255, 0.6);
   --color-btn-secondary-hover-bg: rgba(255, 255, 255, 0.9);

   /* Decorative Spheres Overrides */
   --sphere-opacity: 0.8;
   --sphere-blend-mode: multiply;
   --sphere-filter: invert(1) hue-rotate(180deg);
   --logo-filter: none;

   /* Hero Background & Glows Overrides (Light Theme) */
   --hero-bg: radial-gradient(circle at 50% 50%, #FFFFFF 35%, #F4F2FF 100%);
   --gradient-glow-left: radial-gradient(circle, rgba(168, 85, 247, 0.22) 0%, rgba(250, 249, 255, 0) 70%);
   --gradient-glow-right: radial-gradient(circle, rgba(99, 102, 241, 0.22) 0%, rgba(250, 249, 255, 0) 70%);
}