/* ================================
   THEME  0: Canada (Maple Spirit) - FIXED
   ================================ */

body.theme-canada {
  --color-primary: #D42D2D;
  --color-primary-light: #FF6B6B;
  --color-primary-dark: #A52323;
  --color-primary-darker: #3A0F0F;
  
  --color-secondary: #FFFFFF;
  --color-secondary-light: #F8F9FA;
  --color-secondary-dark: #E9ECEF;
  
  --color-accent: #FFD700;
  --color-accent-light: #FFE55C;
  --color-accent-dark: #CCAA00;
  
  /* RGB values */
  --color-primary-rgb: 212, 45, 45;
  --color-primary-light-rgb: 255, 107, 107;
  --color-primary-dark-rgb: 165, 35, 35;
  --color-primary-darker-rgb: 58, 15, 15;
  
  --color-secondary-rgb: 255, 255, 255;
  --color-secondary-light-rgb: 248, 249, 250;
  --color-secondary-dark-rgb: 233, 236, 239;
  
  --color-accent-rgb: 255, 215, 0;
  
  /* Borders */
  --border-primary: rgba(212, 45, 45, 0.2);
  --border-secondary: rgba(255, 215, 0, 0.15);
  
  /* Gradients - FIXED */
  --gradient-horizontal: linear-gradient(90deg, #D42D2D, #A52323, #8B1A1A);
  --gradient-primary: linear-gradient(135deg, #A52323, #D42D2D, #FF6B6B);
  --gradient-card-header: linear-gradient(145deg, #3A0F0F, #A52323, #D42D2D);
  --gradient-overlay: linear-gradient(135deg, 
    rgba(58, 15, 15, 0.95), 
    rgba(212, 45, 45, 0.7), 
    rgba(165, 35, 35, 0.5)
  );
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(212, 45, 45, 0.3);
  --shadow-lg: 0 15px 30px rgba(212, 45, 45, 0.4);
  --shadow-xl: 0 20px 40px rgba(212, 45, 45, 0.2);
  --shadow-glow: 0 0 35px rgba(212, 45, 45, 0.5);
}



/* ================================
   THEME 1: UnderHost Navy (Clean Corporate Tech)
   ================================ */

body.theme-navy {
  --color-primary: #0077FF;
  --color-primary-light: #00B6E7;
  --color-primary-dark: #176EA5;
  --color-primary-darker: #0D1F3C;
  
  --color-secondary: #176EA5;
  --color-secondary-light: #00B6E7;
  --color-secondary-dark: #0D1F3C;
  
  --color-accent: #334155;
  --color-accent-light: #4B5565;
  --color-accent-dark: #1F2937;
  
  /* RGB values */
  --color-primary-rgb: 0, 119, 255;
  --color-primary-light-rgb: 0, 182, 231;
  --color-primary-dark-rgb: 23, 110, 165;
  --color-primary-darker-rgb: 13, 31, 60;
  
  --color-secondary-rgb: 23, 110, 165;
  --color-secondary-light-rgb: 0, 182, 231;
  --color-secondary-dark-rgb: 13, 31, 60;
  
  --color-accent-rgb: 51, 65, 85;
  
  /* Borders */
  --border-primary: rgba(13, 31, 60, 0.10);
  --border-secondary: rgba(13, 31, 60, 0.05);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #00B6E7, #0077FF);
  --gradient-primary: linear-gradient(135deg, #176EA5, #0077FF, #00B6E7);
  --gradient-card-header: linear-gradient(145deg, #0D1F3C, #176EA5, #0077FF);
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(0, 119, 255, 0.2);
  --shadow-lg: 0 15px 30px rgba(0, 119, 255, 0.3);
  --shadow-xl: 0 20px 40px rgba(0, 119, 255, 0.15);
  --shadow-glow: 0 0 30px rgba(0, 119, 255, 0.3);
}

/* ================================
   THEME 2: Gold / Premium UnderHost
   ================================ */

body.theme-gold {
  --color-primary: #D4AF37;
  --color-primary-light: #F2D27C;
  --color-primary-dark: #B88A1E;
  --color-primary-darker: #0B1B34;
  
  --color-secondary: #B88A1E;
  --color-secondary-light: #D4AF37;
  --color-secondary-dark: #0B1B34;
  
  --color-accent: #111827;
  --color-accent-light: #1F2937;
  --color-accent-dark: #0B0F17;
  
  /* RGB values */
  --color-primary-rgb: 212, 175, 55;
  --color-primary-light-rgb: 242, 210, 124;
  --color-primary-dark-rgb: 184, 138, 30;
  --color-primary-darker-rgb: 11, 27, 52;
  
  --color-secondary-rgb: 184, 138, 30;
  --color-secondary-light-rgb: 212, 175, 55;
  --color-secondary-dark-rgb: 11, 27, 52;
  
  --color-accent-rgb: 17, 24, 39;
  
  /* Borders */
  --border-primary: rgba(212, 175, 55, 0.22);
  --border-secondary: rgba(212, 175, 55, 0.12);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #D4AF37, #B88A1E);
  --gradient-primary: linear-gradient(135deg, #B88A1E, #D4AF37, #F2D27C);
  --gradient-card-header: linear-gradient(145deg, #0B1B34, #B88A1E, #D4AF37);
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(212, 175, 55, 0.2);
  --shadow-lg: 0 15px 30px rgba(212, 175, 55, 0.3);
  --shadow-xl: 0 20px 40px rgba(212, 175, 55, 0.15);
  --shadow-glow: 0 0 30px rgba(212, 175, 55, 0.3);
  
  /* Optional highlight */
  --color-highlight: #FFF4CC;
}

/* ================================
   THEME 3: Cyber (Neon)
   ================================ */

body.theme-cyber {
  --color-primary: #00D4FF;
  --color-primary-light: #7CFF00;
  --color-primary-dark: #2563EB;
  --color-primary-darker: #0B1220;
  
  --color-secondary: #2563EB;
  --color-secondary-light: #00D4FF;
  --color-secondary-dark: #0B1220;
  
  --color-accent: #FF2BD6;
  --color-accent-light: #FF54DD;
  --color-accent-dark: #D600B0;
  
  /* RGB values */
  --color-primary-rgb: 0, 212, 255;
  --color-primary-light-rgb: 124, 255, 0;
  --color-primary-dark-rgb: 37, 99, 235;
  --color-primary-darker-rgb: 11, 18, 32;
  
  --color-secondary-rgb: 37, 99, 235;
  --color-secondary-light-rgb: 0, 212, 255;
  --color-secondary-dark-rgb: 11, 18, 32;
  
  --color-accent-rgb: 255, 43, 214;
  
  /* Borders */
  --border-primary: rgba(0, 212, 255, 0.25);
  --border-secondary: rgba(0, 212, 255, 0.15);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #00D4FF, #2563EB);
  --gradient-primary: linear-gradient(135deg, #2563EB, #00D4FF, #7CFF00);
  --gradient-card-header: linear-gradient(145deg, #0B1220, #2563EB, #00D4FF);
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(0, 212, 255, 0.25);
  --shadow-lg: 0 15px 30px rgba(0, 212, 255, 0.35);
  --shadow-xl: 0 20px 40px rgba(0, 212, 255, 0.2);
  --shadow-glow: 0 0 30px rgba(0, 212, 255, 0.4);
}

/* ================================
   THEME 4: Luxury Black + Burgundy
   ================================ */

body.theme-burgundy {
  --color-primary: #7A1028;
  --color-primary-light: #C08F7A;
  --color-primary-dark: #5A0B1D;
  --color-primary-darker: #0B0B0F;
  
  --color-secondary: #5A0B1D;
  --color-secondary-light: #7A1028;
  --color-secondary-dark: #0B0B0F;
  
  --color-accent: #E7D8B1;
  --color-accent-light: #F0E5CA;
  --color-accent-dark: #D4BF8A;
  
  /* RGB values */
  --color-primary-rgb: 122, 16, 40;
  --color-primary-light-rgb: 192, 143, 122;
  --color-primary-dark-rgb: 90, 11, 29;
  --color-primary-darker-rgb: 11, 11, 15;
  
  --color-secondary-rgb: 90, 11, 29;
  --color-secondary-light-rgb: 122, 16, 40;
  --color-secondary-dark-rgb: 11, 11, 15;
  
  --color-accent-rgb: 231, 216, 177;
  
  /* Borders */
  --border-primary: rgba(90, 11, 29, 0.18);
  --border-secondary: rgba(90, 11, 29, 0.09);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #7A1028, #5A0B1D);
  --gradient-primary: linear-gradient(135deg, #5A0B1D, #7A1028, #C08F7A);
  --gradient-card-header: linear-gradient(145deg, #0B0B0F, #5A0B1D, #7A1028);
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(90, 11, 29, 0.2);
  --shadow-lg: 0 15px 30px rgba(90, 11, 29, 0.3);
  --shadow-xl: 0 20px 40px rgba(90, 11, 29, 0.15);
  --shadow-glow: 0 0 30px rgba(122, 16, 40, 0.3);
}

/* ================================
   THEME 5: Electric Purple
   ================================ */

body.theme-purple {
  --color-primary: #7C3AED;
  --color-primary-light: #A855F7;
  --color-primary-dark: #4F46E5;
  --color-primary-darker: #3B1B6D;
  
  --color-secondary: #4F46E5;
  --color-secondary-light: #7C3AED;
  --color-secondary-dark: #3B1B6D;
  
  --color-accent: #FF4FD8;
  --color-accent-light: #FF72E0;
  --color-accent-dark: #E62EC0;
  
  /* RGB values */
  --color-primary-rgb: 124, 58, 237;
  --color-primary-light-rgb: 168, 85, 247;
  --color-primary-dark-rgb: 79, 70, 229;
  --color-primary-darker-rgb: 59, 27, 109;
  
  --color-secondary-rgb: 79, 70, 229;
  --color-secondary-light-rgb: 124, 58, 237;
  --color-secondary-dark-rgb: 59, 27, 109;
  
  --color-accent-rgb: 255, 79, 216;
  
  /* Borders */
  --border-primary: rgba(124, 58, 237, 0.18);
  --border-secondary: rgba(124, 58, 237, 0.09);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #7C3AED, #A855F7);
  --gradient-primary: linear-gradient(135deg, #4F46E5, #7C3AED, #A855F7);
  --gradient-card-header: linear-gradient(145deg, #3B1B6D, #4F46E5, #7C3AED);
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(124, 58, 237, 0.2);
  --shadow-lg: 0 15px 30px rgba(124, 58, 237, 0.3);
  --shadow-xl: 0 20px 40px rgba(124, 58, 237, 0.15);
  --shadow-glow: 0 0 30px rgba(124, 58, 237, 0.3);
}

/* ================================
   THEME 6: Arctic Ice
   ================================ */

body.theme-arctic {
  --color-primary: #60A5FA;
  --color-primary-light: #22D3EE;
  --color-primary-dark: #475569;
  --color-primary-darker: #0B1F3A;
  
  --color-secondary: #22D3EE;
  --color-secondary-light: #60A5FA;
  --color-secondary-dark: #0B1F3A;
  
  --color-accent: #94A3B8;
  --color-accent-light: #CBD5E1;
  --color-accent-dark: #64748B;
  
  /* RGB values */
  --color-primary-rgb: 96, 165, 250;
  --color-primary-light-rgb: 34, 211, 238;
  --color-primary-dark-rgb: 71, 85, 105;
  --color-primary-darker-rgb: 11, 31, 58;
  
  --color-secondary-rgb: 34, 211, 238;
  --color-secondary-light-rgb: 96, 165, 250;
  --color-secondary-dark-rgb: 11, 31, 58;
  
  --color-accent-rgb: 148, 163, 184;
  
  /* Borders */
  --border-primary: rgba(34, 211, 238, 0.20);
  --border-secondary: rgba(34, 211, 238, 0.10);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #22D3EE, #60A5FA);
  --gradient-primary: linear-gradient(135deg, #475569, #22D3EE, #60A5FA);
  --gradient-card-header: linear-gradient(145deg, #0B1F3A, #475569, #22D3EE);
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(34, 211, 238, 0.2);
  --shadow-lg: 0 15px 30px rgba(34, 211, 238, 0.3);
  --shadow-xl: 0 20px 40px rgba(34, 211, 238, 0.15);
  --shadow-glow: 0 0 30px rgba(34, 211, 238, 0.25);
}

/* ================================
   THEME 7: Emerald Pro
   ================================ */

body.theme-emerald {
  --color-primary: #10B981;
  --color-primary-light: #14B8A6;
  --color-primary-dark: #047857;
  --color-primary-darker: #0F172A;
  
  --color-secondary: #047857;
  --color-secondary-light: #10B981;
  --color-secondary-dark: #0F172A;
  
  --color-accent: #34D399;
  --color-accent-light: #6EE7B7;
  --color-accent-dark: #059669;
  
  /* RGB values */
  --color-primary-rgb: 16, 185, 129;
  --color-primary-light-rgb: 20, 184, 166;
  --color-primary-dark-rgb: 4, 120, 87;
  --color-primary-darker-rgb: 15, 23, 42;
  
  --color-secondary-rgb: 4, 120, 87;
  --color-secondary-light-rgb: 16, 185, 129;
  --color-secondary-dark-rgb: 15, 23, 42;
  
  --color-accent-rgb: 52, 211, 153;
  
  /* Borders */
  --border-primary: rgba(16, 185, 129, 0.18);
  --border-secondary: rgba(16, 185, 129, 0.09);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #10B981, #14B8A6);
  --gradient-primary: linear-gradient(135deg, #047857, #10B981, #14B8A6);
  --gradient-card-header: linear-gradient(145deg, #0F172A, #047857, #10B981);
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(16, 185, 129, 0.2);
  --shadow-lg: 0 15px 30px rgba(16, 185, 129, 0.3);
  --shadow-xl: 0 20px 40px rgba(16, 185, 129, 0.15);
  --shadow-glow: 0 0 30px rgba(16, 185, 129, 0.25);
}

/* ================================
   THEME 8: Sunset Orange
   ================================ */

body.theme-sunset {
  --color-primary: #F97316;
  --color-primary-light: #FDBA74;
  --color-primary-dark: #C2410C;
  --color-primary-darker: #0D1F3C;
  
  --color-secondary: #C2410C;
  --color-secondary-light: #F97316;
  --color-secondary-dark: #0D1F3C;
  
  --color-accent: #FB923C;
  --color-accent-light: #FDB47E;
  --color-accent-dark: #EA580C;
  
  /* RGB values */
  --color-primary-rgb: 249, 115, 22;
  --color-primary-light-rgb: 253, 186, 116;
  --color-primary-dark-rgb: 194, 65, 12;
  --color-primary-darker-rgb: 13, 31, 60;
  
  --color-secondary-rgb: 194, 65, 12;
  --color-secondary-light-rgb: 249, 115, 22;
  --color-secondary-dark-rgb: 13, 31, 60;
  
  --color-accent-rgb: 251, 146, 60;
  
  /* Borders */
  --border-primary: rgba(249, 115, 22, 0.18);
  --border-secondary: rgba(249, 115, 22, 0.09);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #F97316, #C2410C);
  --gradient-primary: linear-gradient(135deg, #C2410C, #F97316, #FDBA74);
  --gradient-card-header: linear-gradient(145deg, #0D1F3C, #C2410C, #F97316);
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(249, 115, 22, 0.2);
  --shadow-lg: 0 15px 30px rgba(249, 115, 22, 0.3);
  --shadow-xl: 0 20px 40px rgba(249, 115, 22, 0.15);
  --shadow-glow: 0 0 30px rgba(249, 115, 22, 0.25);
}

/* ================================
   THEME 9: Graphite + Blue
   ================================ */

body.theme-graphite {
  --color-primary: #2563EB;
  --color-primary-light: #38BDF8;
  --color-primary-dark: #1E293B;
  --color-primary-darker: #111827;
  
  --color-secondary: #334155;
  --color-secondary-light: #4B5565;
  --color-secondary-dark: #111827;
  
  --color-accent: #60A5FA;
  --color-accent-light: #93C5FD;
  --color-accent-dark: #3B82F6;
  
  /* RGB values */
  --color-primary-rgb: 37, 99, 235;
  --color-primary-light-rgb: 56, 189, 248;
  --color-primary-dark-rgb: 30, 41, 59;
  --color-primary-darker-rgb: 17, 24, 39;
  
  --color-secondary-rgb: 51, 65, 85;
  --color-secondary-light-rgb: 75, 85, 101;
  --color-secondary-dark-rgb: 17, 24, 39;
  
  --color-accent-rgb: 96, 165, 250;
  
  /* Borders */
  --border-primary: rgba(17, 24, 39, 0.10);
  --border-secondary: rgba(17, 24, 39, 0.05);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #2563EB, #38BDF8);
  --gradient-primary: linear-gradient(135deg, #1E293B, #2563EB, #38BDF8);
  --gradient-card-header: linear-gradient(145deg, #111827, #1E293B, #2563EB);
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(37, 99, 235, 0.15);
  --shadow-lg: 0 15px 30px rgba(37, 99, 235, 0.25);
  --shadow-xl: 0 20px 40px rgba(37, 99, 235, 0.12);
  --shadow-glow: 0 0 30px rgba(37, 99, 235, 0.2);
}

/* ================================
   THEME 10: Neo Mint
   ================================ */

body.theme-mint {
  --color-primary: #34D399;
  --color-primary-light: #06B6D4;
  --color-primary-dark: #059669;
  --color-primary-darker: #0D1F3C;
  
  --color-secondary: #059669;
  --color-secondary-light: #34D399;
  --color-secondary-dark: #0D1F3C;
  
  --color-accent: #14B8A6;
  --color-accent-light: #2DD4BF;
  --color-accent-dark: #0F766E;
  
  /* RGB values */
  --color-primary-rgb: 52, 211, 153;
  --color-primary-light-rgb: 6, 182, 212;
  --color-primary-dark-rgb: 5, 150, 105;
  --color-primary-darker-rgb: 13, 31, 60;
  
  --color-secondary-rgb: 5, 150, 105;
  --color-secondary-light-rgb: 52, 211, 153;
  --color-secondary-dark-rgb: 13, 31, 60;
  
  --color-accent-rgb: 20, 184, 166;
  
  /* Borders */
  --border-primary: rgba(52, 211, 153, 0.18);
  --border-secondary: rgba(52, 211, 153, 0.09);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #34D399, #06B6D4);
  --gradient-primary: linear-gradient(135deg, #059669, #34D399, #06B6D4);
  --gradient-card-header: linear-gradient(145deg, #0D1F3C, #059669, #34D399);
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(52, 211, 153, 0.2);
  --shadow-lg: 0 15px 30px rgba(52, 211, 153, 0.3);
  --shadow-xl: 0 20px 40px rgba(52, 211, 153, 0.15);
  --shadow-glow: 0 0 30px rgba(52, 211, 153, 0.25);
}

/* ================================
   THEME 11: Ocean Depth (Trust & Stability)
   ================================ */

body.theme-ocean {
  --color-primary: #0891B2;
  --color-primary-light: #22D3EE;
  --color-primary-dark: #0E7490;
  --color-primary-darker: #164E63;
  
  --color-secondary: #0E7490;
  --color-secondary-light: #0891B2;
  --color-secondary-dark: #164E63;
  
  --color-accent: #334155;
  --color-accent-light: #475569;
  --color-accent-dark: #1E293B;
  
  /* RGB values */
  --color-primary-rgb: 8, 145, 178;
  --color-primary-light-rgb: 34, 211, 238;
  --color-primary-dark-rgb: 14, 116, 144;
  --color-primary-darker-rgb: 22, 78, 99;
  
  --color-secondary-rgb: 14, 116, 144;
  --color-secondary-light-rgb: 8, 145, 178;
  --color-secondary-dark-rgb: 22, 78, 99;
  
  --color-accent-rgb: 51, 65, 85;
  
  /* Borders */
  --border-primary: rgba(8, 145, 178, 0.18);
  --border-secondary: rgba(8, 145, 178, 0.09);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #0891B2, #0E7490);
  --gradient-primary: linear-gradient(135deg, #0E7490, #0891B2, #22D3EE);
  --gradient-card-header: linear-gradient(145deg, #164E63, #0E7490, #0891B2);
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(8, 145, 178, 0.2);
  --shadow-lg: 0 15px 30px rgba(8, 145, 178, 0.3);
  --shadow-xl: 0 20px 40px rgba(8, 145, 178, 0.15);
  --shadow-glow: 0 0 30px rgba(8, 145, 178, 0.3);
}

/* ================================
   THEME 12: Royal Plum (Luxury/E-commerce)
   ================================ */

body.theme-plum {
  --color-primary: #9333EA;
  --color-primary-light: #C084FC;
  --color-primary-dark: #7E22CE;
  --color-primary-darker: #581C87;
  
  --color-secondary: #7E22CE;
  --color-secondary-light: #9333EA;
  --color-secondary-dark: #581C87;
  
  --color-accent: #F59E0B;
  --color-accent-light: #FBBF24;
  --color-accent-dark: #D97706;
  
  /* RGB values */
  --color-primary-rgb: 147, 51, 234;
  --color-primary-light-rgb: 192, 132, 252;
  --color-primary-dark-rgb: 126, 34, 206;
  --color-primary-darker-rgb: 88, 28, 135;
  
  --color-secondary-rgb: 126, 34, 206;
  --color-secondary-light-rgb: 147, 51, 234;
  --color-secondary-dark-rgb: 88, 28, 135;
  
  --color-accent-rgb: 245, 158, 11;
  
  /* Borders */
  --border-primary: rgba(147, 51, 234, 0.18);
  --border-secondary: rgba(147, 51, 234, 0.09);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #9333EA, #7E22CE);
  --gradient-primary: linear-gradient(135deg, #7E22CE, #9333EA, #C084FC);
  --gradient-card-header: linear-gradient(145deg, #581C87, #7E22CE, #9333EA);
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(147, 51, 234, 0.2);
  --shadow-lg: 0 15px 30px rgba(147, 51, 234, 0.3);
  --shadow-xl: 0 20px 40px rgba(147, 51, 234, 0.15);
  --shadow-glow: 0 0 30px rgba(147, 51, 234, 0.3);
}

/* ================================
   THEME 13: Terra Cotta (Warm/Conversion)
   ================================ */

body.theme-terra {
  --color-primary: #B45309;
  --color-primary-light: #F59E0B;
  --color-primary-dark: #92400E;
  --color-primary-darker: #78350F;
  
  --color-secondary: #92400E;
  --color-secondary-light: #B45309;
  --color-secondary-dark: #78350F;
  
  --color-accent: #DC2626;
  --color-accent-light: #EF4444;
  --color-accent-dark: #B91C1C;
  
  /* RGB values */
  --color-primary-rgb: 180, 83, 9;
  --color-primary-light-rgb: 245, 158, 11;
  --color-primary-dark-rgb: 146, 64, 14;
  --color-primary-darker-rgb: 120, 53, 15;
  
  --color-secondary-rgb: 146, 64, 14;
  --color-secondary-light-rgb: 180, 83, 9;
  --color-secondary-dark-rgb: 120, 53, 15;
  
  --color-accent-rgb: 220, 38, 38;
  
  /* Borders */
  --border-primary: rgba(180, 83, 9, 0.18);
  --border-secondary: rgba(180, 83, 9, 0.09);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #B45309, #92400E);
  --gradient-primary: linear-gradient(135deg, #92400E, #B45309, #F59E0B);
  --gradient-card-header: linear-gradient(145deg, #78350F, #92400E, #B45309);
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(180, 83, 9, 0.2);
  --shadow-lg: 0 15px 30px rgba(180, 83, 9, 0.3);
  --shadow-xl: 0 20px 40px rgba(180, 83, 9, 0.15);
  --shadow-glow: 0 0 30px rgba(180, 83, 9, 0.3);
}

/* ================================
   THEME 14: Slate Tech (Modern B2B/SaaS)
   ================================ */

body.theme-slate {
  --color-primary: #3B82F6;
  --color-primary-light: #60A5FA;
  --color-primary-dark: #2563EB;
  --color-primary-darker: #1E3A8A;
  
  --color-secondary: #475569;
  --color-secondary-light: #64748B;
  --color-secondary-dark: #334155;
  
  --color-accent: #F97316;
  --color-accent-light: #FB923C;
  --color-accent-dark: #EA580C;
  
  /* RGB values */
  --color-primary-rgb: 59, 130, 246;
  --color-primary-light-rgb: 96, 165, 250;
  --color-primary-dark-rgb: 37, 99, 235;
  --color-primary-darker-rgb: 30, 58, 138;
  
  --color-secondary-rgb: 71, 85, 105;
  --color-secondary-light-rgb: 100, 116, 139;
  --color-secondary-dark-rgb: 51, 65, 85;
  
  --color-accent-rgb: 249, 115, 22;
  
  /* Borders */
  --border-primary: rgba(59, 130, 246, 0.15);
  --border-secondary: rgba(59, 130, 246, 0.08);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #3B82F6, #2563EB);
  --gradient-primary: linear-gradient(135deg, #2563EB, #3B82F6, #60A5FA);
  --gradient-card-header: linear-gradient(145deg, #1E3A8A, #2563EB, #3B82F6);
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(59, 130, 246, 0.15);
  --shadow-lg: 0 15px 30px rgba(59, 130, 246, 0.25);
  --shadow-xl: 0 20px 40px rgba(59, 130, 246, 0.12);
  --shadow-glow: 0 0 30px rgba(59, 130, 246, 0.2);
}

/* ================================
   THEME 15: Midnight Aurora (Gaming/Creative)
   ================================ */

body.theme-aurora {
  --color-primary: #8B5CF6;
  --color-primary-light: #A78BFA;
  --color-primary-dark: #7C3AED;
  --color-primary-darker: #2D1B4E;
  
  --color-secondary: #EC4899;
  --color-secondary-light: #F472B6;
  --color-secondary-dark: #DB2777;
  
  --color-accent: #06B6D4;
  --color-accent-light: #22D3EE;
  --color-accent-dark: #0891B2;
  
  /* RGB values */
  --color-primary-rgb: 139, 92, 246;
  --color-primary-light-rgb: 167, 139, 250;
  --color-primary-dark-rgb: 124, 58, 237;
  --color-primary-darker-rgb: 45, 27, 78;
  
  --color-secondary-rgb: 236, 72, 153;
  --color-secondary-light-rgb: 244, 114, 182;
  --color-secondary-dark-rgb: 219, 39, 119;
  
  --color-accent-rgb: 6, 182, 212;
  
  /* Borders */
  --border-primary: rgba(139, 92, 246, 0.18);
  --border-secondary: rgba(139, 92, 246, 0.09);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #8B5CF6, #EC4899);
  --gradient-primary: linear-gradient(135deg, #7C3AED, #8B5CF6, #EC4899);
  --gradient-card-header: linear-gradient(145deg, #2D1B4E, #7C3AED, #8B5CF6);
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(139, 92, 246, 0.2);
  --shadow-lg: 0 15px 30px rgba(139, 92, 246, 0.3);
  --shadow-xl: 0 20px 40px rgba(139, 92, 246, 0.15);
  --shadow-glow: 0 0 30px rgba(139, 92, 246, 0.3);
}

/* ================================
   THEME 16: Forest Canopy (Eco/Hosting)
   ================================ */

body.theme-forest {
  --color-primary: #059669;
  --color-primary-light: #10B981;
  --color-primary-dark: #047857;
  --color-primary-darker: #064E3B;
  
  --color-secondary: #D97706;
  --color-secondary-light: #F59E0B;
  --color-secondary-dark: #B45309;
  
  --color-accent: #7C3AED;
  --color-accent-light: #8B5CF6;
  --color-accent-dark: #6D28D9;
  
  /* RGB values */
  --color-primary-rgb: 5, 150, 105;
  --color-primary-light-rgb: 16, 185, 129;
  --color-primary-dark-rgb: 4, 120, 87;
  --color-primary-darker-rgb: 6, 78, 59;
  
  --color-secondary-rgb: 217, 119, 6;
  --color-secondary-light-rgb: 245, 158, 11;
  --color-secondary-dark-rgb: 180, 83, 9;
  
  --color-accent-rgb: 124, 58, 237;
  
  /* Borders */
  --border-primary: rgba(5, 150, 105, 0.18);
  --border-secondary: rgba(5, 150, 105, 0.09);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #059669, #D97706);
  --gradient-primary: linear-gradient(135deg, #047857, #059669, #10B981);
  --gradient-card-header: linear-gradient(145deg, #064E3B, #047857, #059669);
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(5, 150, 105, 0.2);
  --shadow-lg: 0 15px 30px rgba(5, 150, 105, 0.3);
  --shadow-xl: 0 20px 40px rgba(5, 150, 105, 0.15);
  --shadow-glow: 0 0 30px rgba(5, 150, 105, 0.3);
}

/* ================================
   THEME 17: Ruby Red (Energetic/Urgent)
   ================================ */

body.theme-ruby {
  --color-primary: #DC2626;
  --color-primary-light: #EF4444;
  --color-primary-dark: #B91C1C;
  --color-primary-darker: #7F1D1D;
  
  --color-secondary: #F97316;
  --color-secondary-light: #FB923C;
  --color-secondary-dark: #EA580C;
  
  --color-accent: #F59E0B;
  --color-accent-light: #FBBF24;
  --color-accent-dark: #D97706;
  
  /* RGB values */
  --color-primary-rgb: 220, 38, 38;
  --color-primary-light-rgb: 239, 68, 68;
  --color-primary-dark-rgb: 185, 28, 28;
  --color-primary-darker-rgb: 127, 29, 29;
  
  --color-secondary-rgb: 249, 115, 22;
  --color-secondary-light-rgb: 251, 146, 60;
  --color-secondary-dark-rgb: 234, 88, 12;
  
  --color-accent-rgb: 245, 158, 11;
  
  /* Borders */
  --border-primary: rgba(220, 38, 38, 0.18);
  --border-secondary: rgba(220, 38, 38, 0.09);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #DC2626, #B91C1C);
  --gradient-primary: linear-gradient(135deg, #B91C1C, #DC2626, #EF4444);
  --gradient-card-header: linear-gradient(145deg, #7F1D1D, #B91C1C, #DC2626);
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(220, 38, 38, 0.2);
  --shadow-lg: 0 15px 30px rgba(220, 38, 38, 0.3);
  --shadow-xl: 0 20px 40px rgba(220, 38, 38, 0.15);
  --shadow-glow: 0 0 30px rgba(220, 38, 38, 0.3);
}

/* ================================
   THEME 18: Cosmic Purple (Creative/Tech)
   ================================ */

body.theme-cosmic {
  --color-primary: #6D28D9;
  --color-primary-light: #8B5CF6;
  --color-primary-dark: #5B21B6;
  --color-primary-darker: #2E1065;
  
  --color-secondary: #2563EB;
  --color-secondary-light: #3B82F6;
  --color-secondary-dark: #1D4ED8;
  
  --color-accent: #7C3AED;
  --color-accent-light: #A78BFA;
  --color-accent-dark: #6D28D9;
  
  /* RGB values */
  --color-primary-rgb: 109, 40, 217;
  --color-primary-light-rgb: 139, 92, 246;
  --color-primary-dark-rgb: 91, 33, 182;
  --color-primary-darker-rgb: 46, 16, 101;
  
  --color-secondary-rgb: 37, 99, 235;
  --color-secondary-light-rgb: 59, 130, 246;
  --color-secondary-dark-rgb: 29, 78, 216;
  
  --color-accent-rgb: 124, 58, 237;
  
  /* Borders */
  --border-primary: rgba(109, 40, 217, 0.18);
  --border-secondary: rgba(109, 40, 217, 0.09);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #6D28D9, #2563EB);
  --gradient-primary: linear-gradient(135deg, #5B21B6, #6D28D9, #8B5CF6);
  --gradient-card-header: linear-gradient(145deg, #2E1065, #5B21B6, #6D28D9);
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(109, 40, 217, 0.2);
  --shadow-lg: 0 15px 30px rgba(109, 40, 217, 0.3);
  --shadow-xl: 0 20px 40px rgba(109, 40, 217, 0.15);
  --shadow-glow: 0 0 30px rgba(109, 40, 217, 0.3);
}

/* ================================
   THEME 19: Steel Blue (Industrial/Reliable)
   ================================ */

body.theme-steel {
  --color-primary: #4B5563;
  --color-primary-light: #6B7280;
  --color-primary-dark: #374151;
  --color-primary-darker: #1F2937;
  
  --color-secondary: #2563EB;
  --color-secondary-light: #3B82F6;
  --color-secondary-dark: #1D4ED8;
  
  --color-accent: #F59E0B;
  --color-accent-light: #FBBF24;
  --color-accent-dark: #D97706;
  
  /* RGB values */
  --color-primary-rgb: 75, 85, 99;
  --color-primary-light-rgb: 107, 114, 128;
  --color-primary-dark-rgb: 55, 65, 81;
  --color-primary-darker-rgb: 31, 41, 55;
  
  --color-secondary-rgb: 37, 99, 235;
  --color-secondary-light-rgb: 59, 130, 246;
  --color-secondary-dark-rgb: 29, 78, 216;
  
  --color-accent-rgb: 245, 158, 11;
  
  /* Borders */
  --border-primary: rgba(75, 85, 99, 0.15);
  --border-secondary: rgba(75, 85, 99, 0.08);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #4B5563, #374151);
  --gradient-primary: linear-gradient(135deg, #374151, #4B5563, #6B7280);
  --gradient-card-header: linear-gradient(145deg, #1F2937, #374151, #4B5563);
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(75, 85, 99, 0.15);
  --shadow-lg: 0 15px 30px rgba(75, 85, 99, 0.25);
  --shadow-xl: 0 20px 40px rgba(75, 85, 99, 0.12);
  --shadow-glow: 0 0 30px rgba(75, 85, 99, 0.2);
}

/* ================================
   THEME 20: Sunset Beach (Warm/Relaxed)
   ================================ */

body.theme-beach {
  --color-primary: #F97316;
  --color-primary-light: #FB923C;
  --color-primary-dark: #EA580C;
  --color-primary-darker: #9A3412;
  
  --color-secondary: #F59E0B;
  --color-secondary-light: #FBBF24;
  --color-secondary-dark: #D97706;
  
  --color-accent: #0D9488;
  --color-accent-light: #14B8A6;
  --color-accent-dark: #0F766E;
  
  /* RGB values */
  --color-primary-rgb: 249, 115, 22;
  --color-primary-light-rgb: 251, 146, 60;
  --color-primary-dark-rgb: 234, 88, 12;
  --color-primary-darker-rgb: 154, 52, 18;
  
  --color-secondary-rgb: 245, 158, 11;
  --color-secondary-light-rgb: 251, 191, 36;
  --color-secondary-dark-rgb: 217, 119, 6;
  
  --color-accent-rgb: 13, 148, 136;
  
  /* Borders */
  --border-primary: rgba(249, 115, 22, 0.18);
  --border-secondary: rgba(249, 115, 22, 0.09);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #F97316, #F59E0B);
  --gradient-primary: linear-gradient(135deg, #EA580C, #F97316, #FB923C);
  --gradient-card-header: linear-gradient(145deg, #9A3412, #EA580C, #F97316);
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(249, 115, 22, 0.2);
  --shadow-lg: 0 15px 30px rgba(249, 115, 22, 0.3);
  --shadow-xl: 0 20px 40px rgba(249, 115, 22, 0.15);
  --shadow-glow: 0 0 30px rgba(249, 115, 22, 0.3);
}

/* ================================
   THEME 21: Neon Genesis (Cyberpunk)
   ================================ */

body.theme-neon-genesis {
  --color-primary: #00FFFF;
  --color-primary-light: #7FFFD4;
  --color-primary-dark: #00CCCC;
  --color-primary-darker: #0B0B1F;
  
  --color-secondary: #FF00FF;
  --color-secondary-light: #FF69B4;
  --color-secondary-dark: #CC00CC;
  
  --color-accent: #FFFF00;
  --color-accent-light: #FFE55C;
  --color-accent-dark: #CCCC00;
  
  /* RGB values */
  --color-primary-rgb: 0, 255, 255;
  --color-primary-light-rgb: 127, 255, 212;
  --color-primary-dark-rgb: 0, 204, 204;
  --color-primary-darker-rgb: 11, 11, 31;
  
  --color-secondary-rgb: 255, 0, 255;
  --color-secondary-light-rgb: 255, 105, 180;
  --color-secondary-dark-rgb: 204, 0, 204;
  
  --color-accent-rgb: 255, 255, 0;
  
  /* Borders */
  --border-primary: rgba(0, 255, 255, 0.3);
  --border-secondary: rgba(255, 0, 255, 0.2);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #00FFFF, #FF00FF, #FFFF00);
  --gradient-primary: linear-gradient(135deg, #FF00FF, #00FFFF, #FFFF00);
  --gradient-card-header: linear-gradient(145deg, #0B0B1F, #FF00FF, #00FFFF);
  --gradient-overlay: linear-gradient(135deg, 
    rgba(11, 11, 31, 0.9), 
    rgba(255, 0, 255, 0.4), 
    rgba(0, 255, 255, 0.3)
  );
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(0, 255, 255, 0.4);
  --shadow-lg: 0 15px 30px rgba(255, 0, 255, 0.4);
  --shadow-xl: 0 20px 40px rgba(0, 255, 255, 0.3);
  --shadow-glow: 0 0 40px rgba(0, 255, 255, 0.6);
  --shadow-card: 0 30px 50px -15px rgba(255, 0, 255, 0.4);
}

/* ================================
   THEME 22: Quantum Pulse (Tech/Abstract)
   ================================ */

body.theme-quantum {
  --color-primary: #4F46E5;
  --color-primary-light: #818CF8;
  --color-primary-dark: #4338CA;
  --color-primary-darker: #14182F;
  
  --color-secondary: #C084FC;
  --color-secondary-light: #D8B4FE;
  --color-secondary-dark: #A855F7;
  
  --color-accent: #F472B6;
  --color-accent-light: #F9A8D4;
  --color-accent-dark: #DB2777;
  
  /* RGB values */
  --color-primary-rgb: 79, 70, 229;
  --color-primary-light-rgb: 129, 140, 248;
  --color-primary-dark-rgb: 67, 56, 202;
  --color-primary-darker-rgb: 20, 24, 47;
  
  --color-secondary-rgb: 192, 132, 252;
  --color-secondary-light-rgb: 216, 180, 254;
  --color-secondary-dark-rgb: 168, 85, 247;
  
  --color-accent-rgb: 244, 114, 182;
  
  /* Borders */
  --border-primary: rgba(79, 70, 229, 0.25);
  --border-secondary: rgba(192, 132, 252, 0.2);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #4F46E5, #C084FC, #F472B6);
  --gradient-primary: linear-gradient(135deg, #4338CA, #4F46E5, #C084FC);
  --gradient-card-header: linear-gradient(145deg, #14182F, #4F46E5, #C084FC);
  --gradient-overlay: linear-gradient(135deg, 
    rgba(20, 24, 47, 0.9), 
    rgba(79, 70, 229, 0.5), 
    rgba(192, 132, 252, 0.4)
  );
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(79, 70, 229, 0.3);
  --shadow-lg: 0 15px 30px rgba(192, 132, 252, 0.35);
  --shadow-xl: 0 20px 40px rgba(79, 70, 229, 0.25);
  --shadow-glow: 0 0 40px rgba(192, 132, 252, 0.5);
}

/* ================================
   THEME 23: Holographic (Sci-Fi)
   ================================ */

body.theme-holographic {
  --color-primary: #A855F7;
  --color-primary-light: #D8B4FE;
  --color-primary-dark: #7E22CE;
  --color-primary-darker: #1A0B2E;
  
  --color-secondary: #EC4899;
  --color-secondary-light: #F9A8D4;
  --color-secondary-dark: #BE185D;
  
  --color-accent: #38BDF8;
  --color-accent-light: #7DD3FC;
  --color-accent-dark: #0284C7;
  
  /* RGB values */
  --color-primary-rgb: 168, 85, 247;
  --color-primary-light-rgb: 216, 180, 254;
  --color-primary-dark-rgb: 126, 34, 206;
  --color-primary-darker-rgb: 26, 11, 46;
  
  --color-secondary-rgb: 236, 72, 153;
  --color-secondary-light-rgb: 249, 168, 212;
  --color-secondary-dark-rgb: 190, 24, 93;
  
  --color-accent-rgb: 56, 189, 248;
  
  /* Borders */
  --border-primary: rgba(168, 85, 247, 0.25);
  --border-secondary: rgba(236, 72, 153, 0.2);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #A855F7, #EC4899, #38BDF8);
  --gradient-primary: linear-gradient(135deg, #7E22CE, #A855F7, #EC4899);
  --gradient-card-header: linear-gradient(145deg, #1A0B2E, #A855F7, #EC4899);
  --gradient-overlay: linear-gradient(135deg, 
    rgba(26, 11, 46, 0.9), 
    rgba(168, 85, 247, 0.5), 
    rgba(236, 72, 153, 0.4)
  );
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(168, 85, 247, 0.3);
  --shadow-lg: 0 15px 30px rgba(236, 72, 153, 0.35);
  --shadow-xl: 0 20px 40px rgba(56, 189, 248, 0.25);
  --shadow-glow: 0 0 45px rgba(168, 85, 247, 0.5);
}

/* ================================
   THEME 24: Plasma Reactor (High Energy)
   ================================ */

body.theme-plasma {
  --color-primary: #FF3B3B;
  --color-primary-light: #FF6B6B;
  --color-primary-dark: #E02B2B;
  --color-primary-darker: #1A0B0B;
  
  --color-secondary: #FFB800;
  --color-secondary-light: #FFD966;
  --color-secondary-dark: #CC9200;
  
  --color-accent: #00E5FF;
  --color-accent-light: #70F0FF;
  --color-accent-dark: #00B7CC;
  
  /* RGB values */
  --color-primary-rgb: 255, 59, 59;
  --color-primary-light-rgb: 255, 107, 107;
  --color-primary-dark-rgb: 224, 43, 43;
  --color-primary-darker-rgb: 26, 11, 11;
  
  --color-secondary-rgb: 255, 184, 0;
  --color-secondary-light-rgb: 255, 217, 102;
  --color-secondary-dark-rgb: 204, 146, 0;
  
  --color-accent-rgb: 0, 229, 255;
  
  /* Borders */
  --border-primary: rgba(255, 59, 59, 0.3);
  --border-secondary: rgba(255, 184, 0, 0.25);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #FF3B3B, #FFB800, #00E5FF);
  --gradient-primary: linear-gradient(135deg, #E02B2B, #FF3B3B, #FFB800);
  --gradient-card-header: linear-gradient(145deg, #1A0B0B, #FF3B3B, #FFB800);
  --gradient-overlay: linear-gradient(135deg, 
    rgba(26, 11, 11, 0.9), 
    rgba(255, 59, 59, 0.6), 
    rgba(255, 184, 0, 0.5)
  );
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(255, 59, 59, 0.4);
  --shadow-lg: 0 15px 30px rgba(255, 184, 0, 0.4);
  --shadow-xl: 0 20px 40px rgba(0, 229, 255, 0.3);
  --shadow-glow: 0 0 50px rgba(255, 59, 59, 0.6);
}

/* ================================
   THEME 25: Synthwave (Retro-Futuristic)
   ================================ */

body.theme-synthwave {
  --color-primary: #FF1EAD;
  --color-primary-light: #FF7BDA;
  --color-primary-dark: #CC0099;
  --color-primary-darker: #1A0B1F;
  
  --color-secondary: #36F5F0;
  --color-secondary-light: #8FFCF8;
  --color-secondary-dark: #0BC5C0;
  
  --color-accent: #FFD300;
  --color-accent-light: #FFE766;
  --color-accent-dark: #CCAA00;
  
  /* RGB values */
  --color-primary-rgb: 255, 30, 173;
  --color-primary-light-rgb: 255, 123, 218;
  --color-primary-dark-rgb: 204, 0, 153;
  --color-primary-darker-rgb: 26, 11, 31;
  
  --color-secondary-rgb: 54, 245, 240;
  --color-secondary-light-rgb: 143, 252, 248;
  --color-secondary-dark-rgb: 11, 197, 192;
  
  --color-accent-rgb: 255, 211, 0;
  
  /* Borders */
  --border-primary: rgba(255, 30, 173, 0.3);
  --border-secondary: rgba(54, 245, 240, 0.25);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #FF1EAD, #36F5F0, #FFD300);
  --gradient-primary: linear-gradient(135deg, #CC0099, #FF1EAD, #36F5F0);
  --gradient-card-header: linear-gradient(145deg, #1A0B1F, #FF1EAD, #36F5F0);
  --gradient-overlay: linear-gradient(135deg, 
    rgba(26, 11, 31, 0.9), 
    rgba(255, 30, 173, 0.6), 
    rgba(54, 245, 240, 0.5)
  );
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(255, 30, 173, 0.4);
  --shadow-lg: 0 15px 30px rgba(54, 245, 240, 0.4);
  --shadow-xl: 0 20px 40px rgba(255, 211, 0, 0.3);
  --shadow-glow: 0 0 45px rgba(255, 30, 173, 0.6);
}

/* ================================
   THEME 26: Digital Void (Dark Futuristic)
   ================================ */

body.theme-void {
  --color-primary: #6C5CE7;
  --color-primary-light: #A29BFE;
  --color-primary-dark: #5649C0;
  --color-primary-darker: #0B0B15;
  
  --color-secondary: #E84342;
  --color-secondary-light: #FF7675;
  --color-secondary-dark: #C0392B;
  
  --color-accent: #00B894;
  --color-accent-light: #55EFC4;
  --color-accent-dark: #008E72;
  
  /* RGB values */
  --color-primary-rgb: 108, 92, 231;
  --color-primary-light-rgb: 162, 155, 254;
  --color-primary-dark-rgb: 86, 73, 192;
  --color-primary-darker-rgb: 11, 11, 21;
  
  --color-secondary-rgb: 232, 67, 66;
  --color-secondary-light-rgb: 255, 118, 117;
  --color-secondary-dark-rgb: 192, 57, 43;
  
  --color-accent-rgb: 0, 184, 148;
  
  /* Borders */
  --border-primary: rgba(108, 92, 231, 0.25);
  --border-secondary: rgba(232, 67, 66, 0.2);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #6C5CE7, #E84342, #00B894);
  --gradient-primary: linear-gradient(135deg, #5649C0, #6C5CE7, #E84342);
  --gradient-card-header: linear-gradient(145deg, #0B0B15, #6C5CE7, #E84342);
  --gradient-overlay: linear-gradient(135deg, 
    rgba(11, 11, 21, 0.95), 
    rgba(108, 92, 231, 0.6), 
    rgba(232, 67, 66, 0.4)
  );
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(108, 92, 231, 0.3);
  --shadow-lg: 0 15px 30px rgba(232, 67, 66, 0.3);
  --shadow-xl: 0 20px 40px rgba(0, 184, 148, 0.2);
  --shadow-glow: 0 0 40px rgba(108, 92, 231, 0.5);
}

/* ================================
   THEME 27: Liquid Crystal (Prismatic)
   ================================ */

body.theme-liquid {
  --color-primary: #0FB5E8;
  --color-primary-light: #6CD4FF;
  --color-primary-dark: #0A8FC0;
  --color-primary-darker: #0A1A2A;
  
  --color-secondary: #C77DFF;
  --color-secondary-light: #E0AAFF;
  --color-secondary-dark: #9D4EDD;
  
  --color-accent: #FF99C8;
  --color-accent-light: #FFC0E0;
  --color-accent-dark: #F26CA7;
  
  /* RGB values */
  --color-primary-rgb: 15, 181, 232;
  --color-primary-light-rgb: 108, 212, 255;
  --color-primary-dark-rgb: 10, 143, 192;
  --color-primary-darker-rgb: 10, 26, 42;
  
  --color-secondary-rgb: 199, 125, 255;
  --color-secondary-light-rgb: 224, 170, 255;
  --color-secondary-dark-rgb: 157, 78, 221;
  
  --color-accent-rgb: 255, 153, 200;
  
  /* Borders */
  --border-primary: rgba(15, 181, 232, 0.25);
  --border-secondary: rgba(199, 125, 255, 0.2);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #0FB5E8, #C77DFF, #FF99C8);
  --gradient-primary: linear-gradient(135deg, #0A8FC0, #0FB5E8, #C77DFF);
  --gradient-card-header: linear-gradient(145deg, #0A1A2A, #0FB5E8, #C77DFF);
  --gradient-overlay: linear-gradient(135deg, 
    rgba(10, 26, 42, 0.9), 
    rgba(15, 181, 232, 0.5), 
    rgba(199, 125, 255, 0.4)
  );
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(15, 181, 232, 0.3);
  --shadow-lg: 0 15px 30px rgba(199, 125, 255, 0.3);
  --shadow-xl: 0 20px 40px rgba(255, 153, 200, 0.2);
  --shadow-glow: 0 0 40px rgba(15, 181, 232, 0.5);
}

/* ================================
   THEME 28: Hyperdrive (Speed/Velocity)
   ================================ */

body.theme-hyperdrive {
  --color-primary: #FF4D4D;
  --color-primary-light: #FF8080;
  --color-primary-dark: #E63939;
  --color-primary-darker: #1A0A0A;
  
  --color-secondary: #4D9EFF;
  --color-secondary-light: #80B8FF;
  --color-secondary-dark: #3A7AD9;
  
  --color-accent: #FFD966;
  --color-accent-light: #FFE899;
  --color-accent-dark: #E6B84D;
  
  /* RGB values */
  --color-primary-rgb: 255, 77, 77;
  --color-primary-light-rgb: 255, 128, 128;
  --color-primary-dark-rgb: 230, 57, 57;
  --color-primary-darker-rgb: 26, 10, 10;
  
  --color-secondary-rgb: 77, 158, 255;
  --color-secondary-light-rgb: 128, 184, 255;
  --color-secondary-dark-rgb: 58, 122, 217;
  
  --color-accent-rgb: 255, 217, 102;
  
  /* Borders */
  --border-primary: rgba(255, 77, 77, 0.3);
  --border-secondary: rgba(77, 158, 255, 0.25);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #FF4D4D, #4D9EFF, #FFD966);
  --gradient-primary: linear-gradient(135deg, #E63939, #FF4D4D, #4D9EFF);
  --gradient-card-header: linear-gradient(145deg, #1A0A0A, #FF4D4D, #4D9EFF);
  --gradient-overlay: linear-gradient(135deg, 
    rgba(26, 10, 10, 0.9), 
    rgba(255, 77, 77, 0.6), 
    rgba(77, 158, 255, 0.5)
  );
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(255, 77, 77, 0.4);
  --shadow-lg: 0 15px 30px rgba(77, 158, 255, 0.4);
  --shadow-xl: 0 20px 40px rgba(255, 217, 102, 0.3);
  --shadow-glow: 0 0 50px rgba(255, 77, 77, 0.6);
}

/* ================================
   THEME 29: Aurora Borealis (Living Light)
   ================================ */

body.theme-aurora-borealis {
  --color-primary: #56F0C4;
  --color-primary-light: #9EF5DA;
  --color-primary-dark: #3CCF9F;
  --color-primary-darker: #0A2620;
  
  --color-secondary: #C77DFF;
  --color-secondary-light: #E0AAFF;
  --color-secondary-dark: #9D4EDD;
  
  --color-accent: #FFB347;
  --color-accent-light: #FFCD7E;
  --color-accent-dark: #E69533;
  
  /* RGB values */
  --color-primary-rgb: 86, 240, 196;
  --color-primary-light-rgb: 158, 245, 218;
  --color-primary-dark-rgb: 60, 207, 159;
  --color-primary-darker-rgb: 10, 38, 32;
  
  --color-secondary-rgb: 199, 125, 255;
  --color-secondary-light-rgb: 224, 170, 255;
  --color-secondary-dark-rgb: 157, 78, 221;
  
  --color-accent-rgb: 255, 179, 71;
  
  /* Borders */
  --border-primary: rgba(86, 240, 196, 0.25);
  --border-secondary: rgba(199, 125, 255, 0.2);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #56F0C4, #C77DFF, #FFB347);
  --gradient-primary: linear-gradient(135deg, #3CCF9F, #56F0C4, #C77DFF);
  --gradient-card-header: linear-gradient(145deg, #0A2620, #56F0C4, #C77DFF);
  --gradient-overlay: linear-gradient(135deg, 
    rgba(10, 38, 32, 0.9), 
    rgba(86, 240, 196, 0.5), 
    rgba(199, 125, 255, 0.4)
  );
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(86, 240, 196, 0.3);
  --shadow-lg: 0 15px 30px rgba(199, 125, 255, 0.3);
  --shadow-xl: 0 20px 40px rgba(255, 179, 71, 0.25);
  --shadow-glow: 0 0 45px rgba(86, 240, 196, 0.5);
}

/* ================================
   THEME 30: Cyber Fusion (Neon Mesh)
   ================================ */

body.theme-cyber-fusion {
  --color-primary: #F065E4;
  --color-primary-light: #F7A6F0;
  --color-primary-dark: #C74DBB;
  --color-primary-darker: #1F0F1E;
  
  --color-secondary: #4AD9D9;
  --color-secondary-light: #8FEDED;
  --color-secondary-dark: #2FB0B0;
  
  --color-accent: #F9C74F;
  --color-accent-light: #FCE38A;
  --color-accent-dark: #E6AD2F;
  
  /* RGB values */
  --color-primary-rgb: 240, 101, 228;
  --color-primary-light-rgb: 247, 166, 240;
  --color-primary-dark-rgb: 199, 77, 187;
  --color-primary-darker-rgb: 31, 15, 30;
  
  --color-secondary-rgb: 74, 217, 217;
  --color-secondary-light-rgb: 143, 237, 237;
  --color-secondary-dark-rgb: 47, 176, 176;
  
  --color-accent-rgb: 249, 199, 79;
  
  /* Borders */
  --border-primary: rgba(240, 101, 228, 0.3);
  --border-secondary: rgba(74, 217, 217, 0.25);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #F065E4, #4AD9D9, #F9C74F);
  --gradient-primary: linear-gradient(135deg, #C74DBB, #F065E4, #4AD9D9);
  --gradient-card-header: linear-gradient(145deg, #1F0F1E, #F065E4, #4AD9D9);
  --gradient-overlay: linear-gradient(135deg, 
    rgba(31, 15, 30, 0.95), 
    rgba(240, 101, 228, 0.6), 
    rgba(74, 217, 217, 0.5)
  );
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(240, 101, 228, 0.4);
  --shadow-lg: 0 15px 30px rgba(74, 217, 217, 0.4);
  --shadow-xl: 0 20px 40px rgba(249, 199, 79, 0.3);
  --shadow-glow: 0 0 50px rgba(240, 101, 228, 0.6);
}

/* ================================
   THEME 44: Aqua Pulse (Crystal Waters)
   ================================ */

body.theme-aqua-pulse {
  --color-primary: #00A3FF;
  --color-primary-light: #4DC3FF;
  --color-primary-dark: #0077FF;
  --color-primary-darker: #0A1A3A;
  
  --color-secondary: #00D4FF;
  --color-secondary-light: #70E4FF;
  --color-secondary-dark: #00A3CC;
  
  --color-accent: #7FAAFF;
  --color-accent-light: #A6C5FF;
  --color-accent-dark: #4D7FFF;
  
  /* RGB values */
  --color-primary-rgb: 0, 163, 255;
  --color-primary-light-rgb: 77, 195, 255;
  --color-primary-dark-rgb: 0, 119, 255;
  --color-primary-darker-rgb: 10, 26, 58;
  
  --color-secondary-rgb: 0, 212, 255;
  --color-secondary-light-rgb: 112, 228, 255;
  --color-secondary-dark-rgb: 0, 163, 204;
  
  --color-accent-rgb: 127, 170, 255;
  
  /* Borders */
  --border-primary: rgba(0, 163, 255, 0.2);
  --border-secondary: rgba(0, 212, 255, 0.15);
  
  /* Gradients */
  --gradient-horizontal: linear-gradient(90deg, #00d4ff, #0077ff, #0044aa);
  --gradient-primary: linear-gradient(135deg, #0077ff, #00d4ff, #4dc3ff);
  --gradient-card-header: linear-gradient(145deg, #0a1a3a, #0077ff, #00d4ff);
  --gradient-overlay: linear-gradient(135deg, 
    rgba(10, 26, 58, 0.95), 
    rgba(0, 119, 255, 0.6), 
    rgba(0, 212, 255, 0.5)
  );
  
  /* Shadows */
  --shadow-md: 0 10px 20px rgba(0, 119, 255, 0.3);
  --shadow-lg: 0 15px 30px rgba(0, 212, 255, 0.3);
  --shadow-xl: 0 20px 40px rgba(0, 163, 255, 0.2);
  --shadow-glow: 0 0 40px rgba(0, 212, 255, 0.5);
}

/* ================================
   THEME: Obsidian Blue (Premium Dark Infra)
   ================================ */
body.theme-obsidian {
  --color-primary: #3B82F6;
  --color-primary-light: #60A5FA;
  --color-primary-dark: #1D4ED8;
  --color-primary-darker: #0B1220;

  --color-secondary: #0EA5E9;
  --color-secondary-light: #38BDF8;
  --color-secondary-dark: #075985;

  --color-accent: #22C55E;
  --color-accent-light: #4ADE80;
  --color-accent-dark: #16A34A;

  --color-primary-rgb: 59, 130, 246;
  --color-primary-light-rgb: 96, 165, 250;
  --color-primary-dark-rgb: 29, 78, 216;
  --color-primary-darker-rgb: 11, 18, 32;

  --color-secondary-rgb: 14, 165, 233;
  --color-secondary-light-rgb: 56, 189, 248;
  --color-secondary-dark-rgb: 7, 89, 133;

  --color-accent-rgb: 34, 197, 94;

  --border-primary: rgba(59, 130, 246, 0.18);
  --border-secondary: rgba(14, 165, 233, 0.12);

  --gradient-horizontal: linear-gradient(90deg, #3B82F6, #0EA5E9, #22C55E);
  --gradient-primary: linear-gradient(135deg, #1D4ED8, #3B82F6, #0EA5E9);
  --gradient-card-header: linear-gradient(145deg, #0B1220, #1D4ED8, #3B82F6);
  --gradient-overlay: linear-gradient(135deg,
    rgba(11, 18, 32, 0.96),
    rgba(29, 78, 216, 0.55),
    rgba(14, 165, 233, 0.45)
  );

  --shadow-md: 0 10px 20px rgba(59, 130, 246, 0.20);
  --shadow-lg: 0 15px 30px rgba(14, 165, 233, 0.22);
  --shadow-xl: 0 20px 40px rgba(34, 197, 94, 0.12);
  --shadow-glow: 0 0 35px rgba(59, 130, 246, 0.35);
}

/* ================================
   THEME: Carbon Lime (Security / Cyber Infra)
   ================================ */
body.theme-carbon-lime {
  --color-primary: #A3E635;
  --color-primary-light: #BEF264;
  --color-primary-dark: #65A30D;
  --color-primary-darker: #0B140A;

  --color-secondary: #22C55E;
  --color-secondary-light: #4ADE80;
  --color-secondary-dark: #16A34A;

  --color-accent: #38BDF8;
  --color-accent-light: #7DD3FC;
  --color-accent-dark: #0284C7;

  --color-primary-rgb: 163, 230, 53;
  --color-primary-light-rgb: 190, 242, 100;
  --color-primary-dark-rgb: 101, 163, 13;
  --color-primary-darker-rgb: 11, 20, 10;

  --color-secondary-rgb: 34, 197, 94;
  --color-secondary-light-rgb: 74, 222, 128;
  --color-secondary-dark-rgb: 22, 163, 74;

  --color-accent-rgb: 56, 189, 248;

  --border-primary: rgba(163, 230, 53, 0.18);
  --border-secondary: rgba(34, 197, 94, 0.12);

  --gradient-horizontal: linear-gradient(90deg, #A3E635, #22C55E, #38BDF8);
  --gradient-primary: linear-gradient(135deg, #65A30D, #A3E635, #22C55E);
  --gradient-card-header: linear-gradient(145deg, #0B140A, #65A30D, #A3E635);
  --gradient-overlay: linear-gradient(135deg,
    rgba(11, 20, 10, 0.96),
    rgba(101, 163, 13, 0.45),
    rgba(34, 197, 94, 0.40)
  );

  --shadow-md: 0 10px 20px rgba(163, 230, 53, 0.18);
  --shadow-lg: 0 15px 30px rgba(34, 197, 94, 0.20);
  --shadow-xl: 0 20px 40px rgba(56, 189, 248, 0.12);
  --shadow-glow: 0 0 35px rgba(163, 230, 53, 0.30);
}

/* ================================
   THEME: Infra Violet (Datacenter / AI)
   ================================ */
body.theme-infra-violet {
  --color-primary: #8B5CF6;
  --color-primary-light: #A78BFA;
  --color-primary-dark: #6D28D9;
  --color-primary-darker: #120B2A;

  --color-secondary: #22D3EE;
  --color-secondary-light: #67E8F9;
  --color-secondary-dark: #0891B2;

  --color-accent: #F59E0B;
  --color-accent-light: #FBBF24;
  --color-accent-dark: #D97706;

  --color-primary-rgb: 139, 92, 246;
  --color-primary-light-rgb: 167, 139, 250;
  --color-primary-dark-rgb: 109, 40, 217;
  --color-primary-darker-rgb: 18, 11, 42;

  --color-secondary-rgb: 34, 211, 238;
  --color-secondary-light-rgb: 103, 232, 249;
  --color-secondary-dark-rgb: 8, 145, 178;

  --color-accent-rgb: 245, 158, 11;

  --border-primary: rgba(139, 92, 246, 0.18);
  --border-secondary: rgba(34, 211, 238, 0.12);

  --gradient-horizontal: linear-gradient(90deg, #8B5CF6, #22D3EE, #F59E0B);
  --gradient-primary: linear-gradient(135deg, #6D28D9, #8B5CF6, #22D3EE);
  --gradient-card-header: linear-gradient(145deg, #120B2A, #6D28D9, #8B5CF6);
  --gradient-overlay: linear-gradient(135deg,
    rgba(18, 11, 42, 0.96),
    rgba(109, 40, 217, 0.50),
    rgba(34, 211, 238, 0.40)
  );

  --shadow-md: 0 10px 20px rgba(139, 92, 246, 0.20);
  --shadow-lg: 0 15px 30px rgba(34, 211, 238, 0.18);
  --shadow-xl: 0 20px 40px rgba(245, 158, 11, 0.12);
  --shadow-glow: 0 0 38px rgba(139, 92, 246, 0.33);
}

/* ================================
   THEME: Datacenter Teal (Clean + Trust)
   ================================ */
body.theme-datacenter-teal {
  --color-primary: #14B8A6;
  --color-primary-light: #2DD4BF;
  --color-primary-dark: #0F766E;
  --color-primary-darker: #072A2A;

  --color-secondary: #1D4ED8;
  --color-secondary-light: #3B82F6;
  --color-secondary-dark: #1E3A8A;

  --color-accent: #F97316;
  --color-accent-light: #FB923C;
  --color-accent-dark: #EA580C;

  --color-primary-rgb: 20, 184, 166;
  --color-primary-light-rgb: 45, 212, 191;
  --color-primary-dark-rgb: 15, 118, 110;
  --color-primary-darker-rgb: 7, 42, 42;

  --color-secondary-rgb: 29, 78, 216;
  --color-secondary-light-rgb: 59, 130, 246;
  --color-secondary-dark-rgb: 30, 58, 138;

  --color-accent-rgb: 249, 115, 22;

  --border-primary: rgba(20, 184, 166, 0.18);
  --border-secondary: rgba(29, 78, 216, 0.12);

  --gradient-horizontal: linear-gradient(90deg, #14B8A6, #3B82F6);
  --gradient-primary: linear-gradient(135deg, #0F766E, #14B8A6, #3B82F6);
  --gradient-card-header: linear-gradient(145deg, #072A2A, #0F766E, #14B8A6);
  --gradient-overlay: linear-gradient(135deg,
    rgba(7, 42, 42, 0.96),
    rgba(20, 184, 166, 0.45),
    rgba(59, 130, 246, 0.40)
  );

  --shadow-md: 0 10px 20px rgba(20, 184, 166, 0.18);
  --shadow-lg: 0 15px 30px rgba(59, 130, 246, 0.18);
  --shadow-xl: 0 20px 40px rgba(249, 115, 22, 0.10);
  --shadow-glow: 0 0 34px rgba(20, 184, 166, 0.30);
}

/* ================================
   THEME: Copper Voltage (Warm + Speed CTA)
   ================================ */
body.theme-copper-voltage {
  --color-primary: #F97316;
  --color-primary-light: #FDBA74;
  --color-primary-dark: #C2410C;
  --color-primary-darker: #1C0F0A;

  --color-secondary: #0EA5E9;
  --color-secondary-light: #38BDF8;
  --color-secondary-dark: #075985;

  --color-accent: #FDE047;
  --color-accent-light: #FEF08A;
  --color-accent-dark: #EAB308;

  --color-primary-rgb: 249, 115, 22;
  --color-primary-light-rgb: 253, 186, 116;
  --color-primary-dark-rgb: 194, 65, 12;
  --color-primary-darker-rgb: 28, 15, 10;

  --color-secondary-rgb: 14, 165, 233;
  --color-secondary-light-rgb: 56, 189, 248;
  --color-secondary-dark-rgb: 7, 89, 133;

  --color-accent-rgb: 253, 224, 71;

  --border-primary: rgba(249, 115, 22, 0.18);
  --border-secondary: rgba(14, 165, 233, 0.12);

  --gradient-horizontal: linear-gradient(90deg, #F97316, #0EA5E9, #FDE047);
  --gradient-primary: linear-gradient(135deg, #C2410C, #F97316, #0EA5E9);
  --gradient-card-header: linear-gradient(145deg, #1C0F0A, #C2410C, #F97316);
  --gradient-overlay: linear-gradient(135deg,
    rgba(28, 15, 10, 0.96),
    rgba(194, 65, 12, 0.48),
    rgba(14, 165, 233, 0.40)
  );

  --shadow-md: 0 10px 20px rgba(249, 115, 22, 0.18);
  --shadow-lg: 0 15px 30px rgba(14, 165, 233, 0.18);
  --shadow-xl: 0 20px 40px rgba(253, 224, 71, 0.12);
  --shadow-glow: 0 0 38px rgba(249, 115, 22, 0.28);
}

/* ================================
   THEME: Sentinel Red (UnderHost Classic / Strong CTA)
   ================================ */
body.theme-sentinel-red {
  --color-primary: #E11D48;
  --color-primary-light: #FB7185;
  --color-primary-dark: #BE123C;
  --color-primary-darker: #210812;

  --color-secondary: #2563EB;
  --color-secondary-light: #60A5FA;
  --color-secondary-dark: #1D4ED8;

  --color-accent: #F59E0B;
  --color-accent-light: #FBBF24;
  --color-accent-dark: #D97706;

  --color-primary-rgb: 225, 29, 72;
  --color-primary-light-rgb: 251, 113, 133;
  --color-primary-dark-rgb: 190, 18, 60;
  --color-primary-darker-rgb: 33, 8, 18;

  --color-secondary-rgb: 37, 99, 235;
  --color-secondary-light-rgb: 96, 165, 250;
  --color-secondary-dark-rgb: 29, 78, 216;

  --color-accent-rgb: 245, 158, 11;

  --border-primary: rgba(225, 29, 72, 0.18);
  --border-secondary: rgba(37, 99, 235, 0.12);

  --gradient-horizontal: linear-gradient(90deg, #E11D48, #2563EB, #F59E0B);
  --gradient-primary: linear-gradient(135deg, #BE123C, #E11D48, #2563EB);
  --gradient-card-header: linear-gradient(145deg, #210812, #BE123C, #E11D48);
  --gradient-overlay: linear-gradient(135deg,
    rgba(33, 8, 18, 0.96),
    rgba(190, 18, 60, 0.52),
    rgba(37, 99, 235, 0.40)
  );

  --shadow-md: 0 10px 20px rgba(225, 29, 72, 0.18);
  --shadow-lg: 0 15px 30px rgba(37, 99, 235, 0.18);
  --shadow-xl: 0 20px 40px rgba(245, 158, 11, 0.12);
  --shadow-glow: 0 0 38px rgba(225, 29, 72, 0.30);
}

/* ================================
   THEME: Proton Gray (B2B Minimal / Enterprise)
   ================================ */
body.theme-proton-gray {
  --color-primary: #3B82F6;
  --color-primary-light: #93C5FD;
  --color-primary-dark: #1E40AF;
  --color-primary-darker: #0B1220;

  --color-secondary: #64748B;
  --color-secondary-light: #94A3B8;
  --color-secondary-dark: #334155;

  --color-accent: #22C55E;
  --color-accent-light: #86EFAC;
  --color-accent-dark: #16A34A;

  --color-primary-rgb: 59, 130, 246;
  --color-primary-light-rgb: 147, 197, 253;
  --color-primary-dark-rgb: 30, 64, 175;
  --color-primary-darker-rgb: 11, 18, 32;

  --color-secondary-rgb: 100, 116, 139;
  --color-secondary-light-rgb: 148, 163, 184;
  --color-secondary-dark-rgb: 51, 65, 85;

  --color-accent-rgb: 34, 197, 94;

  --border-primary: rgba(59, 130, 246, 0.14);
  --border-secondary: rgba(100, 116, 139, 0.10);

  --gradient-horizontal: linear-gradient(90deg, #3B82F6, #64748B);
  --gradient-primary: linear-gradient(135deg, #1E40AF, #3B82F6, #93C5FD);
  --gradient-card-header: linear-gradient(145deg, #0B1220, #1E40AF, #3B82F6);
  --gradient-overlay: linear-gradient(135deg,
    rgba(11, 18, 32, 0.96),
    rgba(30, 64, 175, 0.45),
    rgba(100, 116, 139, 0.35)
  );

  --shadow-md: 0 10px 20px rgba(59, 130, 246, 0.14);
  --shadow-lg: 0 15px 30px rgba(59, 130, 246, 0.20);
  --shadow-xl: 0 20px 40px rgba(34, 197, 94, 0.10);
  --shadow-glow: 0 0 30px rgba(59, 130, 246, 0.22);
}

/* ================================
   THEME: Polar Night (Dark + Crisp Cyan)
   ================================ */
body.theme-polar-night {
  --color-primary: #22D3EE;
  --color-primary-light: #67E8F9;
  --color-primary-dark: #0891B2;
  --color-primary-darker: #070B16;

  --color-secondary: #60A5FA;
  --color-secondary-light: #93C5FD;
  --color-secondary-dark: #2563EB;

  --color-accent: #A78BFA;
  --color-accent-light: #C4B5FD;
  --color-accent-dark: #8B5CF6;

  --color-primary-rgb: 34, 211, 238;
  --color-primary-light-rgb: 103, 232, 249;
  --color-primary-dark-rgb: 8, 145, 178;
  --color-primary-darker-rgb: 7, 11, 22;

  --color-secondary-rgb: 96, 165, 250;
  --color-secondary-light-rgb: 147, 197, 253;
  --color-secondary-dark-rgb: 37, 99, 235;

  --color-accent-rgb: 167, 139, 250;

  --border-primary: rgba(34, 211, 238, 0.18);
  --border-secondary: rgba(96, 165, 250, 0.10);

  --gradient-horizontal: linear-gradient(90deg, #22D3EE, #60A5FA, #A78BFA);
  --gradient-primary: linear-gradient(135deg, #0891B2, #22D3EE, #60A5FA);
  --gradient-card-header: linear-gradient(145deg, #070B16, #0891B2, #22D3EE);
  --gradient-overlay: linear-gradient(135deg,
    rgba(7, 11, 22, 0.97),
    rgba(8, 145, 178, 0.45),
    rgba(96, 165, 250, 0.35)
  );

  --shadow-md: 0 10px 20px rgba(34, 211, 238, 0.18);
  --shadow-lg: 0 15px 30px rgba(96, 165, 250, 0.16);
  --shadow-xl: 0 20px 40px rgba(167, 139, 250, 0.12);
  --shadow-glow: 0 0 38px rgba(34, 211, 238, 0.28);
}

body.theme-underhost-midnight{
  --color-primary:#3B82F6;
  --color-primary-light:#60A5FA;
  --color-primary-dark:#1D4ED8;
  --color-primary-darker:#071226;

  --color-secondary:#0EA5E9;
  --color-secondary-light:#38BDF8;
  --color-secondary-dark:#075985;

  --color-accent:#22C55E;
  --color-accent-light:#4ADE80;
  --color-accent-dark:#16A34A;

  --color-primary-rgb:59,130,246;
  --color-primary-light-rgb:96,165,250;
  --color-primary-dark-rgb:29,78,216;
  --color-primary-darker-rgb:7,18,38;

  --color-secondary-rgb:14,165,233;
  --color-secondary-dark-rgb:7,89,133;

  --color-accent-rgb:34,197,94;

  --surface-primary:#070B16;
  --surface-secondary:#0B1220;
  --surface-tertiary:#0F172A;
  --surface-dark:#050811;
  --surface-overlay:rgba(var(--color-black-rgb),0.88);
  --surface-overlay-light:rgba(var(--color-black-rgb),0.62);

  --text-primary:rgba(var(--color-white-rgb),0.92);
  --text-secondary:rgba(var(--color-white-rgb),0.72);
  --text-tertiary:rgba(var(--color-white-rgb),0.55);
  --text-inverse:var(--color-white);
  --text-accent:var(--color-primary);

  --border-primary:rgba(var(--color-primary-rgb),0.25);
  --border-secondary:rgba(var(--color-primary-rgb),0.12);
  --border-focus:var(--color-primary);

  --gradient-horizontal:linear-gradient(90deg,#1D4ED8,#0EA5E9,#22C55E);
  --gradient-primary:linear-gradient(135deg,#075985,#1D4ED8,#0EA5E9);
  --gradient-card-header:linear-gradient(145deg,#050811,#071226,#1D4ED8);
  --gradient-overlay:linear-gradient(135deg,
    rgba(5,8,17,0.92),
    rgba(29,78,216,0.45),
    rgba(14,165,233,0.38)
  );

  --shadow-md:0 10px 20px rgba(59,130,246,0.22);
  --shadow-lg:0 15px 30px rgba(14,165,233,0.22);
  --shadow-xl:0 20px 40px rgba(34,197,94,0.14);
  --shadow-glow:0 0 32px rgba(59,130,246,0.35);
  --shadow-card:0 30px 50px -15px rgba(59,130,246,0.18);
}

body.theme-graphite-pro{
  --color-primary:#2563EB;
  --color-primary-light:#60A5FA;
  --color-primary-dark:#1E40AF;
  --color-primary-darker:#0B1220;

  --color-secondary:#334155;
  --color-secondary-light:#475569;
  --color-secondary-dark:#1F2937;

  --color-accent:#22C55E;
  --color-accent-light:#4ADE80;
  --color-accent-dark:#16A34A;

  --color-primary-rgb:37,99,235;
  --color-primary-light-rgb:96,165,250;
  --color-primary-dark-rgb:30,64,175;
  --color-primary-darker-rgb:11,18,32;

  --color-secondary-rgb:51,65,85;
  --color-secondary-dark-rgb:31,41,55;

  --color-accent-rgb:34,197,94;

  --surface-primary:#0B1220;
  --surface-secondary:#0F172A;
  --surface-tertiary:#111827;
  --surface-dark:#070B16;

  --text-primary:rgba(255,255,255,0.92);
  --text-secondary:rgba(255,255,255,0.70);
  --text-tertiary:rgba(255,255,255,0.52);
  --text-inverse:#ffffff;

  --border-primary:rgba(96,165,250,0.18);
  --border-secondary:rgba(148,163,184,0.12);

  --gradient-horizontal:linear-gradient(90deg,#1E40AF,#2563EB,#60A5FA);
  --gradient-primary:linear-gradient(135deg,#1F2937,#2563EB,#60A5FA);
  --gradient-card-header:linear-gradient(145deg,#070B16,#0B1220,#1E40AF);
  --gradient-overlay:linear-gradient(135deg,
    rgba(7,11,22,0.94),
    rgba(37,99,235,0.38),
    rgba(96,165,250,0.28)
  );

  --shadow-md:0 10px 20px rgba(37,99,235,0.18);
  --shadow-lg:0 15px 30px rgba(37,99,235,0.22);
  --shadow-xl:0 20px 40px rgba(34,197,94,0.12);
  --shadow-glow:0 0 28px rgba(96,165,250,0.25);
}

body.theme-steel-cyan{
  --color-primary:#06B6D4;
  --color-primary-light:#22D3EE;
  --color-primary-dark:#0891B2;
  --color-primary-darker:#071926;

  --color-secondary:#334155;
  --color-secondary-light:#475569;
  --color-secondary-dark:#1F2937;

  --color-accent:#F59E0B;
  --color-accent-light:#FBBF24;
  --color-accent-dark:#D97706;

  --color-primary-rgb:6,182,212;
  --color-primary-light-rgb:34,211,238;
  --color-primary-dark-rgb:8,145,178;
  --color-primary-darker-rgb:7,25,38;

  --color-secondary-rgb:51,65,85;
  --color-secondary-dark-rgb:31,41,55;

  --color-accent-rgb:245,158,11;

  --surface-primary:#070B16;
  --surface-secondary:#0B1220;
  --surface-tertiary:#0F172A;
  --surface-dark:#050811;

  --text-primary:rgba(255,255,255,0.92);
  --text-secondary:rgba(255,255,255,0.70);
  --text-tertiary:rgba(255,255,255,0.52);
  --text-inverse:#ffffff;

  --border-primary:rgba(34,211,238,0.20);
  --border-secondary:rgba(148,163,184,0.10);

  --gradient-horizontal:linear-gradient(90deg,#0891B2,#06B6D4,#F59E0B);
  --gradient-primary:linear-gradient(135deg,#1F2937,#06B6D4,#22D3EE);
  --gradient-card-header:linear-gradient(145deg,#050811,#071926,#0891B2);
  --gradient-overlay:linear-gradient(135deg,
    rgba(5,8,17,0.94),
    rgba(6,182,212,0.36),
    rgba(245,158,11,0.24)
  );

  --shadow-md:0 10px 20px rgba(6,182,212,0.18);
  --shadow-lg:0 15px 30px rgba(6,182,212,0.22);
  --shadow-xl:0 20px 40px rgba(245,158,11,0.12);
  --shadow-glow:0 0 30px rgba(34,211,238,0.25);
}

body.theme-crimson-ops{
  --color-primary:#FF3B3B;
  --color-primary-light:#FF6B6B;
  --color-primary-dark:#D62B2B;
  --color-primary-darker:#3A0F0F;

  --color-secondary:#0D1F3C;
  --color-secondary-light:#163A6B;
  --color-secondary-dark:#071226;

  --color-accent:#FF9800;
  --color-accent-light:#FFC266;
  --color-accent-dark:#CC7A00;

  --color-primary-rgb:255,59,59;
  --color-primary-light-rgb:255,107,107;
  --color-primary-dark-rgb:214,43,43;
  --color-primary-darker-rgb:58,15,15;

  --color-secondary-rgb:13,31,60;
  --color-secondary-dark-rgb:7,18,38;

  --color-accent-rgb:255,152,0;

  --surface-primary:#0B0B10;
  --surface-secondary:#0F1117;
  --surface-tertiary:#131826;
  --surface-dark:#05060A;

  --text-primary:rgba(255,255,255,0.92);
  --text-secondary:rgba(255,255,255,0.70);
  --text-tertiary:rgba(255,255,255,0.52);
  --text-inverse:#ffffff;

  --border-primary:rgba(255,59,59,0.22);
  --border-secondary:rgba(255,59,59,0.12);

  --gradient-horizontal:linear-gradient(90deg,#D62B2B,#FF3B3B,#FF9800);
  --gradient-primary:linear-gradient(135deg,#071226,#FF3B3B,#FF9800);
  --gradient-card-header:linear-gradient(145deg,#05060A,#0D1F3C,#D62B2B);
  --gradient-overlay:linear-gradient(135deg,
    rgba(5,6,10,0.94),
    rgba(13,31,60,0.72),
    rgba(255,59,59,0.28)
  );

  --shadow-md:0 10px 20px rgba(255,59,59,0.22);
  --shadow-lg:0 15px 30px rgba(255,59,59,0.30);
  --shadow-xl:0 20px 40px rgba(255,152,0,0.12);
  --shadow-glow:0 0 34px rgba(255,59,59,0.35);
}

body.theme-emerald-secure{
  --color-primary:#10B981;
  --color-primary-light:#34D399;
  --color-primary-dark:#047857;
  --color-primary-darker:#04281D;

  --color-secondary:#0EA5E9;
  --color-secondary-light:#38BDF8;
  --color-secondary-dark:#075985;

  --color-accent:#A3E635;
  --color-accent-light:#BEF264;
  --color-accent-dark:#65A30D;

  --color-primary-rgb:16,185,129;
  --color-primary-light-rgb:52,211,153;
  --color-primary-dark-rgb:4,120,87;
  --color-primary-darker-rgb:4,40,29;

  --color-secondary-rgb:14,165,233;
  --color-secondary-dark-rgb:7,89,133;

  --color-accent-rgb:163,230,53;

  --surface-primary:#060B10;
  --surface-secondary:#0B1220;
  --surface-tertiary:#0F172A;
  --surface-dark:#04070B;

  --text-primary:rgba(255,255,255,0.92);
  --text-secondary:rgba(255,255,255,0.70);
  --text-tertiary:rgba(255,255,255,0.52);
  --text-inverse:#ffffff;

  --border-primary:rgba(16,185,129,0.20);
  --border-secondary:rgba(14,165,233,0.12);

  --gradient-horizontal:linear-gradient(90deg,#047857,#10B981,#0EA5E9);
  --gradient-primary:linear-gradient(135deg,#04281D,#10B981,#0EA5E9);
  --gradient-card-header:linear-gradient(145deg,#04070B,#04281D,#047857);
  --gradient-overlay:linear-gradient(135deg,
    rgba(4,7,11,0.95),
    rgba(4,120,87,0.42),
    rgba(14,165,233,0.32)
  );

  --shadow-md:0 10px 20px rgba(16,185,129,0.18);
  --shadow-lg:0 15px 30px rgba(14,165,233,0.18);
  --shadow-xl:0 20px 40px rgba(163,230,53,0.10);
  --shadow-glow:0 0 30px rgba(16,185,129,0.28);
}

body.theme-clean-pro{
  --color-primary:#2563EB;
  --color-primary-light:#60A5FA;
  --color-primary-dark:#1D4ED8;
  --color-primary-darker:#0D1F3C;

  --color-secondary:#0EA5E9;
  --color-secondary-light:#38BDF8;
  --color-secondary-dark:#075985;

  --color-accent:#F97316;
  --color-accent-light:#FB923C;
  --color-accent-dark:#EA580C;

  --color-primary-rgb:37,99,235;
  --color-primary-light-rgb:96,165,250;
  --color-primary-dark-rgb:29,78,216;
  --color-primary-darker-rgb:13,31,60;

  --color-secondary-rgb:14,165,233;
  --color-secondary-dark-rgb:7,89,133;

  --color-accent-rgb:249,115,22;

  --surface-primary:#ffffff;
  --surface-secondary:#f8fafc;
  --surface-tertiary:#f1f5f9;
  --surface-dark:#0a0a0a;

  --text-primary:#111827;
  --text-secondary:#475569;
  --text-tertiary:#64748B;
  --text-inverse:#ffffff;

  --border-primary:rgba(37,99,235,0.16);
  --border-secondary:rgba(37,99,235,0.08);

  --gradient-horizontal:linear-gradient(90deg,#1D4ED8,#2563EB,#0EA5E9);
  --gradient-primary:linear-gradient(135deg,#075985,#2563EB,#60A5FA);
  --gradient-card-header:linear-gradient(145deg,#0D1F3C,#1D4ED8,#2563EB);
  --gradient-overlay:linear-gradient(135deg,
    rgba(13,31,60,0.85),
    rgba(0,0,0,0.78),
    rgba(37,99,235,0.25)
  );

  --shadow-md:0 10px 20px rgba(37,99,235,0.18);
  --shadow-lg:0 15px 30px rgba(37,99,235,0.22);
  --shadow-xl:0 20px 40px rgba(37,99,235,0.12);
  --shadow-glow:0 0 26px rgba(37,99,235,0.22);
}

/* ================================
   THEME: Warp 25 (Unmetered)
   "25Gbps / Unmetered / Velocity"
   ================================ */
body.theme-warp25{
  /* Core */
  --color-primary:#00E5FF;        /* electric cyan */
  --color-primary-light:#70F0FF;
  --color-primary-dark:#00B7CC;
  --color-primary-darker:#061826;

  --color-secondary:#7CFF00;      /* turbo lime */
  --color-secondary-light:#B8FF66;
  --color-secondary-dark:#4DCC00;

  --color-accent:#FF2BD6;         /* neon magenta */
  --color-accent-light:#FF72E0;
  --color-accent-dark:#D600B0;

  /* RGB */
  --color-primary-rgb:0,229,255;
  --color-primary-light-rgb:112,240,255;
  --color-primary-dark-rgb:0,183,204;
  --color-primary-darker-rgb:6,24,38;

  --color-secondary-rgb:124,255,0;
  --color-secondary-dark-rgb:77,204,0;

  --color-accent-rgb:255,43,214;

  /* Surfaces (dark = speed look) */
  --surface-primary:#050A14;
  --surface-secondary:#0A1020;
  --surface-tertiary:#0F1830;
  --surface-dark:#030612;

  --surface-overlay:rgba(var(--color-black-rgb),0.90);
  --surface-overlay-light:rgba(var(--color-black-rgb),0.62);

  /* Text */
  --text-primary:rgba(255,255,255,0.92);
  --text-secondary:rgba(255,255,255,0.72);
  --text-tertiary:rgba(255,255,255,0.55);
  --text-inverse:#ffffff;
  --text-accent:var(--color-primary);

  /* Borders */
  --border-primary:rgba(var(--color-primary-rgb),0.26);
  --border-secondary:rgba(var(--color-accent-rgb),0.12);
  --border-focus:var(--color-primary);

  /* Gradients (speed-lines + warp core) */
  --gradient-horizontal:linear-gradient(
    90deg,
    #00E5FF 0%,
    #7CFF00 45%,
    #FF2BD6 100%
  );

  --gradient-primary:linear-gradient(
    135deg,
    #00B7CC 0%,
    #00E5FF 35%,
    #7CFF00 70%,
    #FF2BD6 100%
  );

  --gradient-card-header:linear-gradient(
    145deg,
    #030612 0%,
    #061826 35%,
    #00B7CC 70%,
    #00E5FF 100%
  );

  /* Hero overlay: deep space + neon push */
  --gradient-overlay:linear-gradient(
    135deg,
    rgba(3,6,18,0.94) 0%,
    rgba(0,229,255,0.25) 40%,
    rgba(124,255,0,0.18) 70%,
    rgba(255,43,214,0.18) 100%
  );

  /* Shadows (big glow) */
  --shadow-md:0 10px 22px rgba(0,229,255,0.22);
  --shadow-lg:0 18px 40px rgba(124,255,0,0.18);
  --shadow-xl:0 24px 60px rgba(255,43,214,0.14);
  --shadow-glow:0 0 48px rgba(0,229,255,0.45);
  --shadow-card:0 30px 60px -18px rgba(0,229,255,0.22);

  /* Keep your helper tokens aligned */
  --speed-secondary: var(--color-primary);
  --speed-secondary-rgb: var(--color-primary-rgb);
}

/* OPTIONAL: Make badges + buttons look even more "UNMETERED" */
body.theme-warp25 .speed-badge{
  background: rgba(var(--color-primary-rgb),0.14);
  border-color: rgba(var(--color-primary-rgb),0.45);
  color: var(--color-primary);
  box-shadow: 0 0 22px rgba(var(--color-primary-rgb),0.18);
}

body.theme-warp25 .btn-speed{
  box-shadow: 0 10px 28px rgba(var(--color-primary-rgb),0.25),
              0 0 40px rgba(var(--color-accent-rgb),0.12);
}

body.theme-warp25 .btn-speed:hover{
  box-shadow: 0 14px 40px rgba(var(--color-secondary-rgb),0.22),
              0 0 55px rgba(var(--color-primary-rgb),0.22);
}

/* =========================================================
   NEW THEMES PACK (matches your existing variable system)
   - Add class to <body>: theme-crystal, theme-voltage, etc.
   ========================================================= */

/* ================================
   THEME: Crystal Clear
   ================================ */
body.theme-crystal {
  --color-primary: #1EC8FF;
  --color-primary-light: #A7F3FF;
  --color-primary-dark: #1463FF;
  --color-primary-darker: #071423;

  --color-secondary: #1463FF;
  --color-secondary-light: #1EC8FF;
  --color-secondary-dark: #071423;

  --color-accent: #FFFFFF;
  --color-accent-light: #E8FBFF;
  --color-accent-dark: #BFEFFF;

  --color-primary-rgb: 30, 200, 255;
  --color-primary-light-rgb: 167, 243, 255;
  --color-primary-dark-rgb: 20, 99, 255;
  --color-primary-darker-rgb: 7, 20, 35;

  --color-secondary-rgb: 20, 99, 255;
  --color-secondary-light-rgb: 30, 200, 255;
  --color-secondary-dark-rgb: 7, 20, 35;

  --color-accent-rgb: 255, 255, 255;

  --border-primary: rgba(30, 200, 255, 0.22);
  --border-secondary: rgba(30, 200, 255, 0.12);

  --gradient-horizontal: linear-gradient(90deg, #1EC8FF, #1463FF);
  --gradient-primary: linear-gradient(135deg, #1463FF, #1EC8FF, #A7F3FF);
  --gradient-card-header: linear-gradient(145deg, #071423, #0B2A49, #1EC8FF);

  --shadow-md: 0 10px 20px rgba(30, 200, 255, 0.20);
  --shadow-lg: 0 15px 30px rgba(30, 200, 255, 0.28);
  --shadow-xl: 0 20px 40px rgba(30, 200, 255, 0.16);
  --shadow-glow: 0 0 30px rgba(167, 243, 255, 0.35);
}

/* ================================
   THEME: Soft Voltage
   ================================ */
body.theme-soft-voltage {
  --color-primary: #FFD54A;
  --color-primary-light: #FFF2B6;
  --color-primary-dark: #7C3AED;
  --color-primary-darker: #0C1021;

  --color-secondary: #7C3AED;
  --color-secondary-light: #FFD54A;
  --color-secondary-dark: #0C1021;

  --color-accent: #2EE9A6;
  --color-accent-light: #7AF3C9;
  --color-accent-dark: #10B981;

  --color-primary-rgb: 255, 213, 74;
  --color-primary-light-rgb: 255, 242, 182;
  --color-primary-dark-rgb: 124, 58, 237;
  --color-primary-darker-rgb: 12, 16, 33;

  --color-secondary-rgb: 124, 58, 237;
  --color-secondary-light-rgb: 255, 213, 74;
  --color-secondary-dark-rgb: 12, 16, 33;

  --color-accent-rgb: 46, 233, 166;

  --border-primary: rgba(255, 213, 74, 0.18);
  --border-secondary: rgba(124, 58, 237, 0.12);

  --gradient-horizontal: linear-gradient(90deg, #7C3AED, #FFD54A);
  --gradient-primary: linear-gradient(135deg, #0C1021, #7C3AED, #FFD54A);
  --gradient-card-header: linear-gradient(145deg, #0C1021, #2A1B6A, #FFD54A);

  --shadow-md: 0 10px 20px rgba(124, 58, 237, 0.22);
  --shadow-lg: 0 15px 30px rgba(255, 213, 74, 0.22);
  --shadow-xl: 0 20px 40px rgba(46, 233, 166, 0.14);
  --shadow-glow: 0 0 30px rgba(255, 213, 74, 0.28);
}

/* ================================
   THEME: Mint Breeze
   (your ",imnnt breeze" -> mint-breeze)
   ================================ */
body.theme-mint-breeze {
  --color-primary: #34D399;
  --color-primary-light: #A7F3D0;
  --color-primary-dark: #0EA5E9;
  --color-primary-darker: #061A14;

  --color-secondary: #0EA5E9;
  --color-secondary-light: #34D399;
  --color-secondary-dark: #061A14;

  --color-accent: #FFFFFF;
  --color-accent-light: #EFFFF7;
  --color-accent-dark: #CFFAE6;

  --color-primary-rgb: 52, 211, 153;
  --color-primary-light-rgb: 167, 243, 208;
  --color-primary-dark-rgb: 14, 165, 233;
  --color-primary-darker-rgb: 6, 26, 20;

  --color-secondary-rgb: 14, 165, 233;
  --color-secondary-light-rgb: 52, 211, 153;
  --color-secondary-dark-rgb: 6, 26, 20;

  --color-accent-rgb: 255, 255, 255;

  --border-primary: rgba(52, 211, 153, 0.18);
  --border-secondary: rgba(14, 165, 233, 0.12);

  --gradient-horizontal: linear-gradient(90deg, #34D399, #0EA5E9);
  --gradient-primary: linear-gradient(135deg, #0EA5E9, #34D399, #A7F3D0);
  --gradient-card-header: linear-gradient(145deg, #061A14, #063C35, #34D399);

  --shadow-md: 0 10px 20px rgba(52, 211, 153, 0.20);
  --shadow-lg: 0 15px 30px rgba(14, 165, 233, 0.22);
  --shadow-xl: 0 20px 40px rgba(167, 243, 208, 0.16);
  --shadow-glow: 0 0 30px rgba(52, 211, 153, 0.25);
}

/* ================================
   THEME: Lavender Mist
   ================================ */
body.theme-lavender-mist {
  --color-primary: #A78BFA;
  --color-primary-light: #E9D5FF;
  --color-primary-dark: #6366F1;
  --color-primary-darker: #160B2D;

  --color-secondary: #6366F1;
  --color-secondary-light: #A78BFA;
  --color-secondary-dark: #160B2D;

  --color-accent: #F472B6;
  --color-accent-light: #FBCFE8;
  --color-accent-dark: #EC4899;

  --color-primary-rgb: 167, 139, 250;
  --color-primary-light-rgb: 233, 213, 255;
  --color-primary-dark-rgb: 99, 102, 241;
  --color-primary-darker-rgb: 22, 11, 45;

  --color-secondary-rgb: 99, 102, 241;
  --color-secondary-light-rgb: 167, 139, 250;
  --color-secondary-dark-rgb: 22, 11, 45;

  --color-accent-rgb: 244, 114, 182;

  --border-primary: rgba(167, 139, 250, 0.18);
  --border-secondary: rgba(244, 114, 182, 0.12);

  --gradient-horizontal: linear-gradient(90deg, #6366F1, #A78BFA);
  --gradient-primary: linear-gradient(135deg, #160B2D, #6366F1, #A78BFA);
  --gradient-card-header: linear-gradient(145deg, #160B2D, #2A1760, #A78BFA);

  --shadow-md: 0 10px 20px rgba(167, 139, 250, 0.20);
  --shadow-lg: 0 15px 30px rgba(99, 102, 241, 0.24);
  --shadow-xl: 0 20px 40px rgba(244, 114, 182, 0.14);
  --shadow-glow: 0 0 30px rgba(233, 213, 255, 0.28);
}

/* ================================
   THEME: Ocean Foam
   ================================ */
body.theme-ocean-foam {
  --color-primary: #2DD4BF;
  --color-primary-light: #99F6E4;
  --color-primary-dark: #0284C7;
  --color-primary-darker: #041B1D;

  --color-secondary: #0284C7;
  --color-secondary-light: #2DD4BF;
  --color-secondary-dark: #041B1D;

  --color-accent: #F8FAFC;
  --color-accent-light: #ECFEFF;
  --color-accent-dark: #CFFAFE;

  --color-primary-rgb: 45, 212, 191;
  --color-primary-light-rgb: 153, 246, 228;
  --color-primary-dark-rgb: 2, 132, 199;
  --color-primary-darker-rgb: 4, 27, 29;

  --color-secondary-rgb: 2, 132, 199;
  --color-secondary-light-rgb: 45, 212, 191;
  --color-secondary-dark-rgb: 4, 27, 29;

  --color-accent-rgb: 248, 250, 252;

  --border-primary: rgba(45, 212, 191, 0.18);
  --border-secondary: rgba(2, 132, 199, 0.12);

  --gradient-horizontal: linear-gradient(90deg, #2DD4BF, #0284C7);
  --gradient-primary: linear-gradient(135deg, #0284C7, #2DD4BF, #99F6E4);
  --gradient-card-header: linear-gradient(145deg, #041B1D, #0B3D43, #2DD4BF);

  --shadow-md: 0 10px 20px rgba(45, 212, 191, 0.20);
  --shadow-lg: 0 15px 30px rgba(2, 132, 199, 0.22);
  --shadow-xl: 0 20px 40px rgba(153, 246, 228, 0.15);
  --shadow-glow: 0 0 30px rgba(45, 212, 191, 0.25);
}

/* ================================
   THEME: Peach Fizz
   (your "peasch fizz" -> peach-fizz)
   ================================ */
body.theme-peach-fizz {
  --color-primary: #FB7185;
  --color-primary-light: #FFD6A8;
  --color-primary-dark: #F97316;
  --color-primary-darker: #1A0B08;

  --color-secondary: #F97316;
  --color-secondary-light: #FB7185;
  --color-secondary-dark: #1A0B08;

  --color-accent: #FDE68A;
  --color-accent-light: #FFF7C2;
  --color-accent-dark: #F59E0B;

  --color-primary-rgb: 251, 113, 133;
  --color-primary-light-rgb: 255, 214, 168;
  --color-primary-dark-rgb: 249, 115, 22;
  --color-primary-darker-rgb: 26, 11, 8;

  --color-secondary-rgb: 249, 115, 22;
  --color-secondary-light-rgb: 251, 113, 133;
  --color-secondary-dark-rgb: 26, 11, 8;

  --color-accent-rgb: 253, 230, 138;

  --border-primary: rgba(251, 113, 133, 0.18);
  --border-secondary: rgba(249, 115, 22, 0.12);

  --gradient-horizontal: linear-gradient(90deg, #FB7185, #F97316);
  --gradient-primary: linear-gradient(135deg, #1A0B08, #FB7185, #FFD6A8);
  --gradient-card-header: linear-gradient(145deg, #1A0B08, #5A1F13, #F97316);

  --shadow-md: 0 10px 20px rgba(251, 113, 133, 0.20);
  --shadow-lg: 0 15px 30px rgba(249, 115, 22, 0.22);
  --shadow-xl: 0 20px 40px rgba(253, 230, 138, 0.14);
  --shadow-glow: 0 0 30px rgba(255, 214, 168, 0.28);
}

/* ================================
   THEME: Clean Slate
   ================================ */
body.theme-clean-slate {
  --color-primary: #64748B;
  --color-primary-light: #CBD5E1;
  --color-primary-dark: #334155;
  --color-primary-darker: #0B1220;

  --color-secondary: #334155;
  --color-secondary-light: #64748B;
  --color-secondary-dark: #0B1220;

  --color-accent: #38BDF8;
  --color-accent-light: #BAE6FD;
  --color-accent-dark: #0284C7;

  --color-primary-rgb: 100, 116, 139;
  --color-primary-light-rgb: 203, 213, 225;
  --color-primary-dark-rgb: 51, 65, 85;
  --color-primary-darker-rgb: 11, 18, 32;

  --color-secondary-rgb: 51, 65, 85;
  --color-secondary-light-rgb: 100, 116, 139;
  --color-secondary-dark-rgb: 11, 18, 32;

  --color-accent-rgb: 56, 189, 248;

  --border-primary: rgba(100, 116, 139, 0.18);
  --border-secondary: rgba(56, 189, 248, 0.10);

  --gradient-horizontal: linear-gradient(90deg, #334155, #64748B);
  --gradient-primary: linear-gradient(135deg, #0B1220, #334155, #CBD5E1);
  --gradient-card-header: linear-gradient(145deg, #0B1220, #1F2A3A, #64748B);

  --shadow-md: 0 10px 20px rgba(15, 23, 42, 0.28);
  --shadow-lg: 0 15px 30px rgba(15, 23, 42, 0.35);
  --shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.22);
  --shadow-glow: 0 0 30px rgba(56, 189, 248, 0.18);
}

/* ================================
   THEME: Sunrise Alert
   ================================ */
body.theme-sunrise-alert {
  --color-primary: #F43F5E;
  --color-primary-light: #FDBA74;
  --color-primary-dark: #DC2626;
  --color-primary-darker: #1B0B10;

  --color-secondary: #F97316;
  --color-secondary-light: #F43F5E;
  --color-secondary-dark: #1B0B10;

  --color-accent: #FDE047;
  --color-accent-light: #FFF7A8;
  --color-accent-dark: #EAB308;

  --color-primary-rgb: 244, 63, 94;
  --color-primary-light-rgb: 253, 186, 116;
  --color-primary-dark-rgb: 220, 38, 38;
  --color-primary-darker-rgb: 27, 11, 16;

  --color-secondary-rgb: 249, 115, 22;
  --color-secondary-light-rgb: 244, 63, 94;
  --color-secondary-dark-rgb: 27, 11, 16;

  --color-accent-rgb: 253, 224, 71;

  --border-primary: rgba(244, 63, 94, 0.20);
  --border-secondary: rgba(253, 224, 71, 0.10);

  --gradient-horizontal: linear-gradient(90deg, #F43F5E, #F97316);
  --gradient-primary: linear-gradient(135deg, #1B0B10, #DC2626, #FDBA74);
  --gradient-card-header: linear-gradient(145deg, #1B0B10, #5A1418, #F43F5E);

  --shadow-md: 0 10px 20px rgba(244, 63, 94, 0.18);
  --shadow-lg: 0 15px 30px rgba(249, 115, 22, 0.20);
  --shadow-xl: 0 20px 40px rgba(253, 224, 71, 0.14);
  --shadow-glow: 0 0 30px rgba(244, 63, 94, 0.22);
}

/* ================================
   THEME: Rackspace (blue + ember)
   ================================ */
body.theme-rackspace {
  --color-primary: #2563EB;
  --color-primary-light: #93C5FD;
  --color-primary-dark: #0B3AA4;
  --color-primary-darker: #070F22;

  --color-secondary: #0EA5E9;
  --color-secondary-light: #2563EB;
  --color-secondary-dark: #070F22;

  --color-accent: #F97316;
  --color-accent-light: #FDBA74;
  --color-accent-dark: #EA580C;

  --color-primary-rgb: 37, 99, 235;
  --color-primary-light-rgb: 147, 197, 253;
  --color-primary-dark-rgb: 11, 58, 164;
  --color-primary-darker-rgb: 7, 15, 34;

  --color-secondary-rgb: 14, 165, 233;
  --color-secondary-light-rgb: 37, 99, 235;
  --color-secondary-dark-rgb: 7, 15, 34;

  --color-accent-rgb: 249, 115, 22;

  --border-primary: rgba(37, 99, 235, 0.18);
  --border-secondary: rgba(249, 115, 22, 0.10);

  --gradient-horizontal: linear-gradient(90deg, #2563EB, #0EA5E9);
  --gradient-primary: linear-gradient(135deg, #070F22, #2563EB, #F97316);
  --gradient-card-header: linear-gradient(145deg, #070F22, #0B3AA4, #2563EB);

  --shadow-md: 0 10px 20px rgba(37, 99, 235, 0.22);
  --shadow-lg: 0 15px 30px rgba(14, 165, 233, 0.22);
  --shadow-xl: 0 20px 40px rgba(249, 115, 22, 0.14);
  --shadow-glow: 0 0 30px rgba(37, 99, 235, 0.24);
}

/* ================================
   THEME: Fibrotic (industrial teal)
   (your "fribrotic" -> fibrotic)
   ================================ */
body.theme-fibrotic {
  --color-primary: #14B8A6;
  --color-primary-light: #67E8F9;
  --color-primary-dark: #0F766E;
  --color-primary-darker: #071A1A;

  --color-secondary: #0F766E;
  --color-secondary-light: #14B8A6;
  --color-secondary-dark: #071A1A;

  --color-accent: #A3E635;
  --color-accent-light: #D9F99D;
  --color-accent-dark: #65A30D;

  --color-primary-rgb: 20, 184, 166;
  --color-primary-light-rgb: 103, 232, 249;
  --color-primary-dark-rgb: 15, 118, 110;
  --color-primary-darker-rgb: 7, 26, 26;

  --color-secondary-rgb: 15, 118, 110;
  --color-secondary-light-rgb: 20, 184, 166;
  --color-secondary-dark-rgb: 7, 26, 26;

  --color-accent-rgb: 163, 230, 53;

  --border-primary: rgba(20, 184, 166, 0.18);
  --border-secondary: rgba(163, 230, 53, 0.10);

  --gradient-horizontal: linear-gradient(90deg, #14B8A6, #67E8F9);
  --gradient-primary: linear-gradient(135deg, #071A1A, #0F766E, #A3E635);
  --gradient-card-header: linear-gradient(145deg, #071A1A, #0B3B38, #14B8A6);

  --shadow-md: 0 10px 20px rgba(20, 184, 166, 0.20);
  --shadow-lg: 0 15px 30px rgba(103, 232, 249, 0.20);
  --shadow-xl: 0 20px 40px rgba(163, 230, 53, 0.14);
  --shadow-glow: 0 0 30px rgba(20, 184, 166, 0.22);
}

/* ================================
   THEME: Colorossing (prismatic)
   ================================ */
body.theme-colorossing {
  --color-primary: #22C55E;
  --color-primary-light: #93C5FD;
  --color-primary-dark: #7C3AED;
  --color-primary-darker: #0B0F1A;

  --color-secondary: #F43F5E;
  --color-secondary-light: #22C55E;
  --color-secondary-dark: #0B0F1A;

  --color-accent: #FDE047;
  --color-accent-light: #FFF7A8;
  --color-accent-dark: #EAB308;

  --color-primary-rgb: 34, 197, 94;
  --color-primary-light-rgb: 147, 197, 253;
  --color-primary-dark-rgb: 124, 58, 237;
  --color-primary-darker-rgb: 11, 15, 26;

  --color-secondary-rgb: 244, 63, 94;
  --color-secondary-light-rgb: 34, 197, 94;
  --color-secondary-dark-rgb: 11, 15, 26;

  --color-accent-rgb: 253, 224, 71;

  --border-primary: rgba(147, 197, 253, 0.14);
  --border-secondary: rgba(253, 224, 71, 0.10);

  --gradient-horizontal: linear-gradient(90deg, #22C55E, #7C3AED);
  --gradient-primary: linear-gradient(135deg, #F43F5E, #7C3AED, #22C55E, #FDE047);
  --gradient-card-header: linear-gradient(145deg, #0B0F1A, #2A1B6A, #7C3AED);

  --shadow-md: 0 10px 20px rgba(124, 58, 237, 0.20);
  --shadow-lg: 0 15px 30px rgba(34, 197, 94, 0.18);
  --shadow-xl: 0 20px 40px rgba(244, 63, 94, 0.14);
  --shadow-glow: 0 0 30px rgba(253, 224, 71, 0.20);
}

/* ================================
   THEME: UptimeRobot (teal + lime)
   ================================ */
body.theme-uptimerobot {
  --color-primary: #06B6D4;
  --color-primary-light: #A7F3D0;
  --color-primary-dark: #0F766E;
  --color-primary-darker: #07171C;

  --color-secondary: #22C55E;
  --color-secondary-light: #06B6D4;
  --color-secondary-dark: #07171C;

  --color-accent: #F59E0B;
  --color-accent-light: #FDE68A;
  --color-accent-dark: #D97706;

  --color-primary-rgb: 6, 182, 212;
  --color-primary-light-rgb: 167, 243, 208;
  --color-primary-dark-rgb: 15, 118, 110;
  --color-primary-darker-rgb: 7, 23, 28;

  --color-secondary-rgb: 34, 197, 94;
  --color-secondary-light-rgb: 6, 182, 212;
  --color-secondary-dark-rgb: 7, 23, 28;

  --color-accent-rgb: 245, 158, 11;

  --border-primary: rgba(6, 182, 212, 0.18);
  --border-secondary: rgba(34, 197, 94, 0.10);

  --gradient-horizontal: linear-gradient(90deg, #06B6D4, #22C55E);
  --gradient-primary: linear-gradient(135deg, #07171C, #06B6D4, #A7F3D0);
  --gradient-card-header: linear-gradient(145deg, #07171C, #0B3B45, #06B6D4);

  --shadow-md: 0 10px 20px rgba(6, 182, 212, 0.20);
  --shadow-lg: 0 15px 30px rgba(34, 197, 94, 0.20);
  --shadow-xl: 0 20px 40px rgba(167, 243, 208, 0.14);
  --shadow-glow: 0 0 30px rgba(6, 182, 212, 0.22);
}
/* =========================================================
   LOCATION + SPECIALITY THEMES
   Same variable contract as your existing themes:
   --color-primary / light / dark / darker
   --color-secondary / light / dark
   --color-accent / light / dark
   RGB variants + borders + gradients + shadows
   ========================================================= */

/* ================================
   Hong Kong — "Great routing SEA/China"
   Neon jade + harbor blue
   ================================ */
body.theme-hong-kong {
  --color-primary: #00D4A6;
  --color-primary-light: #7CFBE3;
  --color-primary-dark: #1D4ED8;
  --color-primary-darker: #061523;

  --color-secondary: #1D4ED8;
  --color-secondary-light: #00D4A6;
  --color-secondary-dark: #061523;

  --color-accent: #FF3D7F;
  --color-accent-light: #FF7BA8;
  --color-accent-dark: #E11D48;

  --color-primary-rgb: 0, 212, 166;
  --color-primary-light-rgb: 124, 251, 227;
  --color-primary-dark-rgb: 29, 78, 216;
  --color-primary-darker-rgb: 6, 21, 35;

  --color-secondary-rgb: 29, 78, 216;
  --color-secondary-light-rgb: 0, 212, 166;
  --color-secondary-dark-rgb: 6, 21, 35;

  --color-accent-rgb: 255, 61, 127;

  --border-primary: rgba(0, 212, 166, 0.22);
  --border-secondary: rgba(29, 78, 216, 0.12);

  --gradient-horizontal: linear-gradient(90deg, #00D4A6, #1D4ED8);
  --gradient-primary: linear-gradient(135deg, #1D4ED8, #00D4A6, #7CFBE3);
  --gradient-card-header: linear-gradient(145deg, #061523, #0B2B45, #00D4A6);

  --shadow-md: 0 10px 20px rgba(0, 212, 166, 0.18);
  --shadow-lg: 0 15px 30px rgba(29, 78, 216, 0.22);
  --shadow-xl: 0 20px 40px rgba(255, 61, 127, 0.14);
  --shadow-glow: 0 0 30px rgba(0, 212, 166, 0.28);
}

/* ================================
   Singapore — "APAC • Premium peering"
   Clean teal + premium gold
   ================================ */
body.theme-singapore {
  --color-primary: #06B6D4;
  --color-primary-light: #A7F3D0;
  --color-primary-dark: #0F766E;
  --color-primary-darker: #07171C;

  --color-secondary: #0EA5E9;
  --color-secondary-light: #06B6D4;
  --color-secondary-dark: #07171C;

  --color-accent: #F5B301;
  --color-accent-light: #FDE68A;
  --color-accent-dark: #D97706;

  --color-primary-rgb: 6, 182, 212;
  --color-primary-light-rgb: 167, 243, 208;
  --color-primary-dark-rgb: 15, 118, 110;
  --color-primary-darker-rgb: 7, 23, 28;

  --color-secondary-rgb: 14, 165, 233;
  --color-secondary-light-rgb: 6, 182, 212;
  --color-secondary-dark-rgb: 7, 23, 28;

  --color-accent-rgb: 245, 179, 1;

  --border-primary: rgba(6, 182, 212, 0.18);
  --border-secondary: rgba(245, 179, 1, 0.12);

  --gradient-horizontal: linear-gradient(90deg, #06B6D4, #0EA5E9);
  --gradient-primary: linear-gradient(135deg, #07171C, #06B6D4, #F5B301);
  --gradient-card-header: linear-gradient(145deg, #07171C, #0B3B45, #06B6D4);

  --shadow-md: 0 10px 20px rgba(6, 182, 212, 0.18);
  --shadow-lg: 0 15px 30px rgba(14, 165, 233, 0.20);
  --shadow-xl: 0 20px 40px rgba(245, 179, 1, 0.14);
  --shadow-glow: 0 0 30px rgba(6, 182, 212, 0.22);
}

/* ================================
   United Kingdom — "UK/EU • Strong routing"
   Royal blue + magenta highlight
   ================================ */
body.theme-united-kingdom {
  --color-primary: #1D4ED8;
  --color-primary-light: #93C5FD;
  --color-primary-dark: #312E81;
  --color-primary-darker: #070A1A;

  --color-secondary: #0EA5E9;
  --color-secondary-light: #1D4ED8;
  --color-secondary-dark: #070A1A;

  --color-accent: #FF2BD6;
  --color-accent-light: #FF72E0;
  --color-accent-dark: #D600B0;

  --color-primary-rgb: 29, 78, 216;
  --color-primary-light-rgb: 147, 197, 253;
  --color-primary-dark-rgb: 49, 46, 129;
  --color-primary-darker-rgb: 7, 10, 26;

  --color-secondary-rgb: 14, 165, 233;
  --color-secondary-light-rgb: 29, 78, 216;
  --color-secondary-dark-rgb: 7, 10, 26;

  --color-accent-rgb: 255, 43, 214;

  --border-primary: rgba(29, 78, 216, 0.18);
  --border-secondary: rgba(255, 43, 214, 0.10);

  --gradient-horizontal: linear-gradient(90deg, #1D4ED8, #0EA5E9);
  --gradient-primary: linear-gradient(135deg, #312E81, #1D4ED8, #93C5FD);
  --gradient-card-header: linear-gradient(145deg, #070A1A, #312E81, #1D4ED8);

  --shadow-md: 0 10px 20px rgba(29, 78, 216, 0.20);
  --shadow-lg: 0 15px 30px rgba(14, 165, 233, 0.20);
  --shadow-xl: 0 20px 40px rgba(255, 43, 214, 0.14);
  --shadow-glow: 0 0 30px rgba(29, 78, 216, 0.22);
}

/* ================================
   Caribbean Islands — "Offshore • International routing"
   Aqua + sunset coral
   ================================ */
body.theme-caribbean {
  --color-primary: #22D3EE;
  --color-primary-light: #A5F3FC;
  --color-primary-dark: #0EA5E9;
  --color-primary-darker: #061721;

  --color-secondary: #FB7185;
  --color-secondary-light: #FDBA74;
  --color-secondary-dark: #061721;

  --color-accent: #FDE047;
  --color-accent-light: #FFF7A8;
  --color-accent-dark: #EAB308;

  --color-primary-rgb: 34, 211, 238;
  --color-primary-light-rgb: 165, 243, 252;
  --color-primary-dark-rgb: 14, 165, 233;
  --color-primary-darker-rgb: 6, 23, 33;

  --color-secondary-rgb: 251, 113, 133;
  --color-secondary-light-rgb: 253, 186, 116;
  --color-secondary-dark-rgb: 6, 23, 33;

  --color-accent-rgb: 253, 224, 71;

  --border-primary: rgba(34, 211, 238, 0.20);
  --border-secondary: rgba(251, 113, 133, 0.12);

  --gradient-horizontal: linear-gradient(90deg, #22D3EE, #FB7185);
  --gradient-primary: linear-gradient(135deg, #0EA5E9, #22D3EE, #FDE047);
  --gradient-card-header: linear-gradient(145deg, #061721, #0B2E44, #22D3EE);

  --shadow-md: 0 10px 20px rgba(34, 211, 238, 0.18);
  --shadow-lg: 0 15px 30px rgba(251, 113, 133, 0.20);
  --shadow-xl: 0 20px 40px rgba(253, 224, 71, 0.14);
  --shadow-glow: 0 0 30px rgba(34, 211, 238, 0.22);
}

/* ================================
   United States — "North America • SaaS / General"
   Clean corporate blue + success green
   ================================ */
body.theme-united-states {
  --color-primary: #2563EB;
  --color-primary-light: #93C5FD;
  --color-primary-dark: #1E3A8A;
  --color-primary-darker: #060B1A;

  --color-secondary: #22C55E;
  --color-secondary-light: #86EFAC;
  --color-secondary-dark: #060B1A;

  --color-accent: #F97316;
  --color-accent-light: #FDBA74;
  --color-accent-dark: #EA580C;

  --color-primary-rgb: 37, 99, 235;
  --color-primary-light-rgb: 147, 197, 253;
  --color-primary-dark-rgb: 30, 58, 138;
  --color-primary-darker-rgb: 6, 11, 26;

  --color-secondary-rgb: 34, 197, 94;
  --color-secondary-light-rgb: 134, 239, 172;
  --color-secondary-dark-rgb: 6, 11, 26;

  --color-accent-rgb: 249, 115, 22;

  --border-primary: rgba(37, 99, 235, 0.18);
  --border-secondary: rgba(34, 197, 94, 0.10);

  --gradient-horizontal: linear-gradient(90deg, #2563EB, #22C55E);
  --gradient-primary: linear-gradient(135deg, #060B1A, #2563EB, #93C5FD);
  --gradient-card-header: linear-gradient(145deg, #060B1A, #1E3A8A, #2563EB);

  --shadow-md: 0 10px 20px rgba(37, 99, 235, 0.20);
  --shadow-lg: 0 15px 30px rgba(34, 197, 94, 0.18);
  --shadow-xl: 0 20px 40px rgba(249, 115, 22, 0.12);
  --shadow-glow: 0 0 30px rgba(37, 99, 235, 0.22);
}

body.theme-united-states .ds-hero__plans-h2 {
  color: var(--color-blue-900, #0D1F3C) !important;
}

body.theme-united-states .ds-hero__plans-h2-accent {
  color: #2563EB !important;
}

body.theme-united-states .ds-hero__custom-cta {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.20);
}

body.theme-united-states .ds-hero__custom-cta-left strong {
  color: #0D1F3C !important;
}

body.theme-united-states .ds-hero__custom-cta-left span {
  color: #475569 !important;
}

/* ================================
   Sweden — "Nordics • Great EU performance"
   Icy blue + aurora green
   ================================ */
body.theme-sweden {
  --color-primary: #60A5FA;
  --color-primary-light: #BAE6FD;
  --color-primary-dark: #1E40AF;
  --color-primary-darker: #061225;

  --color-secondary: #22C55E;
  --color-secondary-light: #A7F3D0;
  --color-secondary-dark: #061225;

  --color-accent: #FDE047;
  --color-accent-light: #FFF7A8;
  --color-accent-dark: #EAB308;

  --color-primary-rgb: 96, 165, 250;
  --color-primary-light-rgb: 186, 230, 253;
  --color-primary-dark-rgb: 30, 64, 175;
  --color-primary-darker-rgb: 6, 18, 37;

  --color-secondary-rgb: 34, 197, 94;
  --color-secondary-light-rgb: 167, 243, 208;
  --color-secondary-dark-rgb: 6, 18, 37;

  --color-accent-rgb: 253, 224, 71;

  --border-primary: rgba(96, 165, 250, 0.18);
  --border-secondary: rgba(34, 197, 94, 0.10);

  --gradient-horizontal: linear-gradient(90deg, #60A5FA, #22C55E);
  --gradient-primary: linear-gradient(135deg, #061225, #1E40AF, #60A5FA);
  --gradient-card-header: linear-gradient(145deg, #061225, #0B2A58, #60A5FA);

  --shadow-md: 0 10px 20px rgba(96, 165, 250, 0.18);
  --shadow-lg: 0 15px 30px rgba(34, 197, 94, 0.16);
  --shadow-xl: 0 20px 40px rgba(253, 224, 71, 0.12);
  --shadow-glow: 0 0 30px rgba(96, 165, 250, 0.22);
}

/* ================================
   Russia — "RU/CIS • Local routing reach"
   Deep red + steel
   ================================ */
body.theme-russia {
  --color-primary: #DC2626;
  --color-primary-light: #FCA5A5;
  --color-primary-dark: #991B1B;
  --color-primary-darker: #0C0B10;

  --color-secondary: #64748B;
  --color-secondary-light: #CBD5E1;
  --color-secondary-dark: #0C0B10;

  --color-accent: #60A5FA;
  --color-accent-light: #BAE6FD;
  --color-accent-dark: #2563EB;

  --color-primary-rgb: 220, 38, 38;
  --color-primary-light-rgb: 252, 165, 165;
  --color-primary-dark-rgb: 153, 27, 27;
  --color-primary-darker-rgb: 12, 11, 16;

  --color-secondary-rgb: 100, 116, 139;
  --color-secondary-light-rgb: 203, 213, 225;
  --color-secondary-dark-rgb: 12, 11, 16;

  --color-accent-rgb: 96, 165, 250;

  --border-primary: rgba(220, 38, 38, 0.18);
  --border-secondary: rgba(100, 116, 139, 0.12);

  --gradient-horizontal: linear-gradient(90deg, #DC2626, #64748B);
  --gradient-primary: linear-gradient(135deg, #0C0B10, #991B1B, #64748B);
  --gradient-card-header: linear-gradient(145deg, #0C0B10, #2B1016, #DC2626);

  --shadow-md: 0 10px 20px rgba(220, 38, 38, 0.16);
  --shadow-lg: 0 15px 30px rgba(100, 116, 139, 0.18);
  --shadow-xl: 0 20px 40px rgba(96, 165, 250, 0.12);
  --shadow-glow: 0 0 30px rgba(220, 38, 38, 0.20);
}

/* ================================
   Moldova — "Eastern Europe • Value routing"
   Emerald value + warm gold
   ================================ */
body.theme-moldova {
  --color-primary: #10B981;
  --color-primary-light: #A7F3D0;
  --color-primary-dark: #0F766E;
  --color-primary-darker: #071A14;

  --color-secondary: #F59E0B;
  --color-secondary-light: #FDE68A;
  --color-secondary-dark: #071A14;

  --color-accent: #2563EB;
  --color-accent-light: #93C5FD;
  --color-accent-dark: #1E40AF;

  --color-primary-rgb: 16, 185, 129;
  --color-primary-light-rgb: 167, 243, 208;
  --color-primary-dark-rgb: 15, 118, 110;
  --color-primary-darker-rgb: 7, 26, 20;

  --color-secondary-rgb: 245, 158, 11;
  --color-secondary-light-rgb: 253, 230, 138;
  --color-secondary-dark-rgb: 7, 26, 20;

  --color-accent-rgb: 37, 99, 235;

  --border-primary: rgba(16, 185, 129, 0.18);
  --border-secondary: rgba(245, 158, 11, 0.12);

  --gradient-horizontal: linear-gradient(90deg, #10B981, #F59E0B);
  --gradient-primary: linear-gradient(135deg, #071A14, #10B981, #A7F3D0);
  --gradient-card-header: linear-gradient(145deg, #071A14, #064036, #10B981);

  --shadow-md: 0 10px 20px rgba(16, 185, 129, 0.18);
  --shadow-lg: 0 15px 30px rgba(245, 158, 11, 0.18);
  --shadow-xl: 0 20px 40px rgba(37, 99, 235, 0.12);
  --shadow-glow: 0 0 30px rgba(16, 185, 129, 0.20);
}

/* ================================
   Ukraine — "Regional latency"
   Azure + sunflower
   ================================ */
body.theme-ukraine {
  --color-primary: #0EA5E9;
  --color-primary-light: #BAE6FD;
  --color-primary-dark: #1D4ED8;
  --color-primary-darker: #061225;

  --color-secondary: #FDE047;
  --color-secondary-light: #FFF7A8;
  --color-secondary-dark: #061225;

  --color-accent: #22C55E;
  --color-accent-light: #A7F3D0;
  --color-accent-dark: #16A34A;

  --color-primary-rgb: 14, 165, 233;
  --color-primary-light-rgb: 186, 230, 253;
  --color-primary-dark-rgb: 29, 78, 216;
  --color-primary-darker-rgb: 6, 18, 37;

  --color-secondary-rgb: 253, 224, 71;
  --color-secondary-light-rgb: 255, 247, 168;
  --color-secondary-dark-rgb: 6, 18, 37;

  --color-accent-rgb: 34, 197, 94;

  --border-primary: rgba(14, 165, 233, 0.18);
  --border-secondary: rgba(253, 224, 71, 0.12);

  --gradient-horizontal: linear-gradient(90deg, #0EA5E9, #FDE047);
  --gradient-primary: linear-gradient(135deg, #061225, #0EA5E9, #BAE6FD);
  --gradient-card-header: linear-gradient(145deg, #061225, #0B2A58, #0EA5E9);

  --shadow-md: 0 10px 20px rgba(14, 165, 233, 0.18);
  --shadow-lg: 0 15px 30px rgba(253, 224, 71, 0.16);
  --shadow-xl: 0 20px 40px rgba(34, 197, 94, 0.12);
  --shadow-glow: 0 0 30px rgba(14, 165, 233, 0.22);
}

/* ================================
   Bulgaria — "Eastern EU • Great value"
   Purple + rose
   ================================ */
body.theme-bulgaria {
  --color-primary: #7C3AED;
  --color-primary-light: #E9D5FF;
  --color-primary-dark: #4F46E5;
  --color-primary-darker: #0B0B18;

  --color-secondary: #22C55E;
  --color-secondary-light: #A7F3D0;
  --color-secondary-dark: #0B0B18;

  --color-accent: #FB7185;
  --color-accent-light: #FBCFE8;
  --color-accent-dark: #E11D48;

  --color-primary-rgb: 124, 58, 237;
  --color-primary-light-rgb: 233, 213, 255;
  --color-primary-dark-rgb: 79, 70, 229;
  --color-primary-darker-rgb: 11, 11, 24;

  --color-secondary-rgb: 34, 197, 94;
  --color-secondary-light-rgb: 167, 243, 208;
  --color-secondary-dark-rgb: 11, 11, 24;

  --color-accent-rgb: 251, 113, 133;

  --border-primary: rgba(124, 58, 237, 0.18);
  --border-secondary: rgba(251, 113, 133, 0.12);

  --gradient-horizontal: linear-gradient(90deg, #7C3AED, #FB7185);
  --gradient-primary: linear-gradient(135deg, #0B0B18, #7C3AED, #E9D5FF);
  --gradient-card-header: linear-gradient(145deg, #0B0B18, #2A1760, #7C3AED);

  --shadow-md: 0 10px 20px rgba(124, 58, 237, 0.18);
  --shadow-lg: 0 15px 30px rgba(251, 113, 133, 0.18);
  --shadow-xl: 0 20px 40px rgba(34, 197, 94, 0.12);
  --shadow-glow: 0 0 30px rgba(233, 213, 255, 0.20);
}

/* ================================
   The Netherlands — "EU hub • International routing"
   Orange + deep blue
   ================================ */
body.theme-netherlands {
  --color-primary: #F97316;
  --color-primary-light: #FDBA74;
  --color-primary-dark: #2563EB;
  --color-primary-darker: #070B16;

  --color-secondary: #2563EB;
  --color-secondary-light: #F97316;
  --color-secondary-dark: #070B16;

  --color-accent: #22C55E;
  --color-accent-light: #A7F3D0;
  --color-accent-dark: #16A34A;

  --color-primary-rgb: 249, 115, 22;
  --color-primary-light-rgb: 253, 186, 116;
  --color-primary-dark-rgb: 37, 99, 235;
  --color-primary-darker-rgb: 7, 11, 22;

  --color-secondary-rgb: 37, 99, 235;
  --color-secondary-light-rgb: 249, 115, 22;
  --color-secondary-dark-rgb: 7, 11, 22;

  --color-accent-rgb: 34, 197, 94;

  --border-primary: rgba(249, 115, 22, 0.18);
  --border-secondary: rgba(37, 99, 235, 0.12);

  --gradient-horizontal: linear-gradient(90deg, #F97316, #2563EB);
  --gradient-primary: linear-gradient(135deg, #070B16, #2563EB, #F97316);
  --gradient-card-header: linear-gradient(145deg, #070B16, #0B1F4A, #2563EB);

  --shadow-md: 0 10px 20px rgba(249, 115, 22, 0.18);
  --shadow-lg: 0 15px 30px rgba(37, 99, 235, 0.20);
  --shadow-xl: 0 20px 40px rgba(34, 197, 94, 0.12);
  --shadow-glow: 0 0 30px rgba(249, 115, 22, 0.20);
}

/* =========================================================
   SPECIALITY SERVER THEMES
   ========================================================= */

/* ================================
   Offshore Dedicated — "Offshore routing"
   Dark ocean + stealth violet
   ================================ */
body.theme-offshore-dedicated {
  --color-primary: #0EA5E9;
  --color-primary-light: #7DD3FC;
  --color-primary-dark: #7C3AED;
  --color-primary-darker: #050816;

  --color-secondary: #7C3AED;
  --color-secondary-light: #0EA5E9;
  --color-secondary-dark: #050816;

  --color-accent: #22D3EE;
  --color-accent-light: #A5F3FC;
  --color-accent-dark: #06B6D4;

  --color-primary-rgb: 14, 165, 233;
  --color-primary-light-rgb: 125, 211, 252;
  --color-primary-dark-rgb: 124, 58, 237;
  --color-primary-darker-rgb: 5, 8, 22;

  --color-secondary-rgb: 124, 58, 237;
  --color-secondary-light-rgb: 14, 165, 233;
  --color-secondary-dark-rgb: 5, 8, 22;

  --color-accent-rgb: 34, 211, 238;

  --border-primary: rgba(14, 165, 233, 0.18);
  --border-secondary: rgba(124, 58, 237, 0.12);

  --gradient-horizontal: linear-gradient(90deg, #0EA5E9, #7C3AED);
  --gradient-primary: linear-gradient(135deg, #050816, #0EA5E9, #7C3AED);
  --gradient-card-header: linear-gradient(145deg, #050816, #10143A, #0EA5E9);

  --shadow-md: 0 10px 20px rgba(14, 165, 233, 0.16);
  --shadow-lg: 0 15px 30px rgba(124, 58, 237, 0.18);
  --shadow-xl: 0 20px 40px rgba(34, 211, 238, 0.12);
  --shadow-glow: 0 0 30px rgba(124, 58, 237, 0.22);
}

/* ================================
   10Gbps Servers — "High throughput"
   Speed lime + electric blue
   ================================ */
body.theme-10gbps-servers {
  --color-primary: #7CFF00;
  --color-primary-light: #D9FF9A;
  --color-primary-dark: #00D4FF;
  --color-primary-darker: #07101A;

  --color-secondary: #00D4FF;
  --color-secondary-light: #7CFF00;
  --color-secondary-dark: #07101A;

  --color-accent: #FDE047;
  --color-accent-light: #FFF7A8;
  --color-accent-dark: #EAB308;

  --color-primary-rgb: 124, 255, 0;
  --color-primary-light-rgb: 217, 255, 154;
  --color-primary-dark-rgb: 0, 212, 255;
  --color-primary-darker-rgb: 7, 16, 26;

  --color-secondary-rgb: 0, 212, 255;
  --color-secondary-light-rgb: 124, 255, 0;
  --color-secondary-dark-rgb: 7, 16, 26;

  --color-accent-rgb: 253, 224, 71;

  --border-primary: rgba(124, 255, 0, 0.20);
  --border-secondary: rgba(0, 212, 255, 0.12);

  --gradient-horizontal: linear-gradient(90deg, #7CFF00, #00D4FF);
  --gradient-primary: linear-gradient(135deg, #07101A, #00D4FF, #7CFF00);
  --gradient-card-header: linear-gradient(145deg, #07101A, #0B2A3A, #00D4FF);

  --shadow-md: 0 10px 20px rgba(0, 212, 255, 0.16);
  --shadow-lg: 0 15px 30px rgba(124, 255, 0, 0.18);
  --shadow-xl: 0 20px 40px rgba(253, 224, 71, 0.12);
  --shadow-glow: 0 0 30px rgba(0, 212, 255, 0.22);
}

/* ================================
   GPU Servers — "AI / Rendering"
   Violet + hot pink (compute vibe)
   ================================ */
body.theme-gpu-servers {
  --color-primary: #7C3AED;
  --color-primary-light: #C4B5FD;
  --color-primary-dark: #4F46E5;
  --color-primary-darker: #08051A;

  --color-secondary: #FF4FD8;
  --color-secondary-light: #FF72E0;
  --color-secondary-dark: #08051A;

  --color-accent: #22D3EE;
  --color-accent-light: #A5F3FC;
  --color-accent-dark: #06B6D4;

  --color-primary-rgb: 124, 58, 237;
  --color-primary-light-rgb: 196, 181, 253;
  --color-primary-dark-rgb: 79, 70, 229;
  --color-primary-darker-rgb: 8, 5, 26;

  --color-secondary-rgb: 255, 79, 216;
  --color-secondary-light-rgb: 255, 114, 224;
  --color-secondary-dark-rgb: 8, 5, 26;

  --color-accent-rgb: 34, 211, 238;

  --border-primary: rgba(124, 58, 237, 0.18);
  --border-secondary: rgba(255, 79, 216, 0.12);

  --gradient-horizontal: linear-gradient(90deg, #7C3AED, #FF4FD8);
  --gradient-primary: linear-gradient(135deg, #08051A, #4F46E5, #7C3AED);
  --gradient-card-header: linear-gradient(145deg, #08051A, #2A1760, #7C3AED);

  --shadow-md: 0 10px 20px rgba(124, 58, 237, 0.18);
  --shadow-lg: 0 15px 30px rgba(255, 79, 216, 0.18);
  --shadow-xl: 0 20px 40px rgba(34, 211, 238, 0.12);
  --shadow-glow: 0 0 30px rgba(255, 79, 216, 0.22);
}

/* ================================
   Gaming Servers — "Low latency"
   Red + cyan esports
   ================================ */
body.theme-gaming-servers {
  --color-primary: #F43F5E;
  --color-primary-light: #FDA4AF;
  --color-primary-dark: #2563EB;
  --color-primary-darker: #0B0610;

  --color-secondary: #00D4FF;
  --color-secondary-light: #7DD3FC;
  --color-secondary-dark: #0B0610;

  --color-accent: #A3E635;
  --color-accent-light: #D9F99D;
  --color-accent-dark: #65A30D;

  --color-primary-rgb: 244, 63, 94;
  --color-primary-light-rgb: 253, 164, 175;
  --color-primary-dark-rgb: 37, 99, 235;
  --color-primary-darker-rgb: 11, 6, 16;

  --color-secondary-rgb: 0, 212, 255;
  --color-secondary-light-rgb: 125, 211, 252;
  --color-secondary-dark-rgb: 11, 6, 16;

  --color-accent-rgb: 163, 230, 53;

  --border-primary: rgba(244, 63, 94, 0.18);
  --border-secondary: rgba(0, 212, 255, 0.12);

  --gradient-horizontal: linear-gradient(90deg, #F43F5E, #00D4FF);
  --gradient-primary: linear-gradient(135deg, #0B0610, #2563EB, #F43F5E);
  --gradient-card-header: linear-gradient(145deg, #0B0610, #2B0F1B, #F43F5E);

  --shadow-md: 0 10px 20px rgba(244, 63, 94, 0.16);
  --shadow-lg: 0 15px 30px rgba(0, 212, 255, 0.18);
  --shadow-xl: 0 20px 40px rgba(163, 230, 53, 0.12);
  --shadow-glow: 0 0 30px rgba(0, 212, 255, 0.22);
}