/* ============================================
   GOLD THEME (Default)
   ============================================ */
html[data-theme='gold'],
html:not([data-theme]) {
  --theme-primary: #ffd700;
  --theme-primary-rgb: 255, 215, 0;
  --theme-secondary: #eab308;
  --theme-accent: #fbbf24;

  /* Background colors - True black/dark theme */
  --background: #0a0a0a;
  --background-secondary: #141414;
  --background-tertiary: #1a1a1a;
  --background-card: #111111;
  --border: #2a2a2a;

  /* Gradient colors for buttons/backgrounds */
  --theme-gradient-1: #fedb37;
  --theme-gradient-2: #fdb931;
  --theme-gradient-3: #9f7928;
  --theme-gradient-4: #8a6e2f;
  --theme-gradient-5: #e99c05;
  --theme-gradient-6: #f4ae00;
  --theme-gradient-7: #f8bf33;
  --theme-gradient-8: #f8ce19;
  --theme-gradient-9: #ffdc02;

  /* Glow effects */
  --theme-glow: rgba(234, 179, 8, 0.3);
  --theme-glow-strong: rgba(234, 179, 8, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #eab308;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(255, 215, 0, 1);
  --theme-border-glow-2: rgba(255, 215, 0, 0.1);

  /* User accent (for profile elements like avatar) */
  --theme-user-accent: #d4a857;
}

/* ============================================
   RED THEME
   ============================================ */
html[data-theme='red'] {
  --theme-primary: #bf1a1a;
  --theme-primary-rgb: 191, 26, 26;
  --theme-secondary: #ff6c0c;
  --theme-accent: #ffe08f;

  /* Background colors - Deep red/maroon theme */
  --background: #1a0a0a;
  --background-secondary: #2d1010;
  --background-tertiary: #3d1818;
  --background-card: #241010;
  --border: #5c2020;

  /* Gradient colors - Red/Orange/Gold metallic */
  --theme-gradient-1: #ffe08f;
  --theme-gradient-2: #ff6c0c;
  --theme-gradient-3: #bf1a1a;
  --theme-gradient-4: #8f1414;
  --theme-gradient-5: #ff6c0c;
  --theme-gradient-6: #ffe08f;
  --theme-gradient-7: #ff6c0c;
  --theme-gradient-8: #bf1a1a;
  --theme-gradient-9: #6d0f0f;

  /* Glow effects */
  --theme-glow: rgba(191, 26, 26, 0.3);
  --theme-glow-strong: rgba(255, 108, 12, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #bf1a1a;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(255, 108, 12, 1);
  --theme-border-glow-2: rgba(191, 26, 26, 0.1);

  /* User accent */
  --theme-user-accent: #ff6c0c;
}

/* ============================================
   CRIMSON THEME (Deep Wine/Burgundy)
   ============================================ */
html[data-theme='crimson'] {
  --theme-primary: #ff6b6b;
  --theme-primary-rgb: 255, 107, 107;
  --theme-secondary: #ff8c42;
  --theme-accent: #ffd93d;

  /* Background colors - Deep wine/burgundy */
  --background: #1a0808;
  --background-secondary: #2a1010;
  --background-tertiary: #3a1818;
  --background-card: #221010;
  --border: #4a2020;

  /* Gradient colors - Red/Orange/Gold metallic */
  --theme-gradient-1: #ffd93d;
  --theme-gradient-2: #ff8c42;
  --theme-gradient-3: #ff6b6b;
  --theme-gradient-4: #c94040;
  --theme-gradient-5: #ffd93d;
  --theme-gradient-6: #ff8c42;
  --theme-gradient-7: #ff6b6b;
  --theme-gradient-8: #c94040;
  --theme-gradient-9: #8b2020;

  /* Glow effects */
  --theme-glow: rgba(255, 107, 107, 0.3);
  --theme-glow-strong: rgba(255, 140, 66, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #ff6b6b;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(255, 140, 66, 1);
  --theme-border-glow-2: rgba(255, 107, 107, 0.1);

  /* User accent */
  --theme-user-accent: #ff8c42;
}

/* ============================================
   BLUE THEME
   ============================================ */
html[data-theme='blue'] {
  --theme-primary: #3b82f6;
  --theme-primary-rgb: 59, 130, 246;
  --theme-secondary: #2563eb;
  --theme-accent: #60a5fa;

  /* Background colors - Rich blue theme */
  --background: #0f1729;
  --background-secondary: #172033;
  --background-tertiary: #1e2940;
  --background-card: #131c2e;
  --border: #2d4a6d;

  /* Gradient colors - Electric blue metallic */
  --theme-gradient-1: #93c5fd;
  --theme-gradient-2: #60a5fa;
  --theme-gradient-3: #3b82f6;
  --theme-gradient-4: #2563eb;
  --theme-gradient-5: #1d4ed8;
  --theme-gradient-6: #60a5fa;
  --theme-gradient-7: #3b82f6;
  --theme-gradient-8: #2563eb;
  --theme-gradient-9: #1e40af;

  /* Glow effects */
  --theme-glow: rgba(59, 130, 246, 0.3);
  --theme-glow-strong: rgba(59, 130, 246, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #3b82f6;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(59, 130, 246, 1);
  --theme-border-glow-2: rgba(59, 130, 246, 0.1);

  /* User accent */
  --theme-user-accent: #60a5fa;
}

/* ============================================
   PURPLE THEME
   ============================================ */
html[data-theme='purple'] {
  --theme-primary: #a855f7;
  --theme-primary-rgb: 168, 85, 247;
  --theme-secondary: #9333ea;
  --theme-accent: #c084fc;

  /* Background colors - Rich purple theme */
  --background: #1a1225;
  --background-secondary: #231a30;
  --background-tertiary: #2d223d;
  --background-card: #1e162a;
  --border: #4a3366;

  /* Gradient colors - Royal purple metallic */
  --theme-gradient-1: #d8b4fe;
  --theme-gradient-2: #c084fc;
  --theme-gradient-3: #a855f7;
  --theme-gradient-4: #9333ea;
  --theme-gradient-5: #7c3aed;
  --theme-gradient-6: #c084fc;
  --theme-gradient-7: #a855f7;
  --theme-gradient-8: #8b5cf6;
  --theme-gradient-9: #6d28d9;

  /* Glow effects */
  --theme-glow: rgba(168, 85, 247, 0.3);
  --theme-glow-strong: rgba(168, 85, 247, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #a855f7;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(168, 85, 247, 1);
  --theme-border-glow-2: rgba(168, 85, 247, 0.1);

  /* User accent */
  --theme-user-accent: #c084fc;
}

/* ============================================
   GREEN THEME
   ============================================ */
html[data-theme='green'] {
  --theme-primary: #22c55e;
  --theme-primary-rgb: 34, 197, 94;
  --theme-secondary: #16a34a;
  --theme-accent: #4ade80;

  /* Background colors - Rich emerald theme */
  --background: #101f17;
  --background-secondary: #182920;
  --background-tertiary: #20352a;
  --background-card: #14241b;
  --border: #2d5c42;

  /* Gradient colors - Emerald metallic */
  --theme-gradient-1: #86efac;
  --theme-gradient-2: #4ade80;
  --theme-gradient-3: #22c55e;
  --theme-gradient-4: #16a34a;
  --theme-gradient-5: #15803d;
  --theme-gradient-6: #4ade80;
  --theme-gradient-7: #22c55e;
  --theme-gradient-8: #16a34a;
  --theme-gradient-9: #166534;

  /* Glow effects */
  --theme-glow: rgba(34, 197, 94, 0.3);
  --theme-glow-strong: rgba(34, 197, 94, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #22c55e;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(34, 197, 94, 1);
  --theme-border-glow-2: rgba(34, 197, 94, 0.1);

  /* User accent */
  --theme-user-accent: #4ade80;
}

/* ============================================
   CYAN THEME
   ============================================ */
html[data-theme='cyan'] {
  --theme-primary: #06b6d4;
  --theme-primary-rgb: 6, 182, 212;
  --theme-secondary: #0891b2;
  --theme-accent: #22d3ee;

  /* Background colors - Rich cyan/teal theme */
  --background: #0f1f22;
  --background-secondary: #17292d;
  --background-tertiary: #1e3538;
  --background-card: #132428;
  --border: #2d5c63;

  /* Gradient colors - Aqua metallic */
  --theme-gradient-1: #67e8f9;
  --theme-gradient-2: #22d3ee;
  --theme-gradient-3: #06b6d4;
  --theme-gradient-4: #0891b2;
  --theme-gradient-5: #0e7490;
  --theme-gradient-6: #22d3ee;
  --theme-gradient-7: #06b6d4;
  --theme-gradient-8: #0891b2;
  --theme-gradient-9: #155e75;

  /* Glow effects */
  --theme-glow: rgba(6, 182, 212, 0.3);
  --theme-glow-strong: rgba(6, 182, 212, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #06b6d4;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(6, 182, 212, 1);
  --theme-border-glow-2: rgba(6, 182, 212, 0.1);

  /* User accent */
  --theme-user-accent: #22d3ee;
}

/* ============================================
   PINK THEME
   ============================================ */
html[data-theme='pink'] {
  --theme-primary: #ec4899;
  --theme-primary-rgb: 236, 72, 153;
  --theme-secondary: #db2777;
  --theme-accent: #f472b6;

  /* Background colors - Vibrant pink theme */
  --background: #4a1535;
  --background-secondary: #5c1d42;
  --background-tertiary: #702550;
  --background-card: #521a3c;
  --border: #8b3060;

  /* Gradient colors - Pink metallic */
  --theme-gradient-1: #fbcfe8;
  --theme-gradient-2: #f472b6;
  --theme-gradient-3: #ec4899;
  --theme-gradient-4: #db2777;
  --theme-gradient-5: #be185d;
  --theme-gradient-6: #f472b6;
  --theme-gradient-7: #ec4899;
  --theme-gradient-8: #db2777;
  --theme-gradient-9: #9d174d;

  /* Glow effects */
  --theme-glow: rgba(236, 72, 153, 0.3);
  --theme-glow-strong: rgba(236, 72, 153, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #ec4899;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(236, 72, 153, 1);
  --theme-border-glow-2: rgba(236, 72, 153, 0.1);

  /* User accent */
  --theme-user-accent: #f472b6;
}

/* ============================================
   MAGENTA THEME
   ============================================ */
html[data-theme='magenta'] {
  --theme-primary: #d946ef;
  --theme-primary-rgb: 217, 70, 239;
  --theme-secondary: #c026d3;
  --theme-accent: #e879f9;

  /* Background colors - Vibrant magenta theme */
  --background: #4a1555;
  --background-secondary: #5c1d68;
  --background-tertiary: #70257c;
  --background-card: #521a60;
  --border: #8b3090;

  /* Gradient colors - Magenta metallic */
  --theme-gradient-1: #f5d0fe;
  --theme-gradient-2: #e879f9;
  --theme-gradient-3: #d946ef;
  --theme-gradient-4: #c026d3;
  --theme-gradient-5: #a21caf;
  --theme-gradient-6: #e879f9;
  --theme-gradient-7: #d946ef;
  --theme-gradient-8: #c026d3;
  --theme-gradient-9: #86198f;

  /* Glow effects */
  --theme-glow: rgba(217, 70, 239, 0.3);
  --theme-glow-strong: rgba(217, 70, 239, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #d946ef;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(217, 70, 239, 1);
  --theme-border-glow-2: rgba(217, 70, 239, 0.1);

  /* User accent */
  --theme-user-accent: #e879f9;
}

/* ============================================
   YELLOW THEME
   ============================================ */
html[data-theme='yellow'] {
  --theme-primary: #eab308;
  --theme-primary-rgb: 234, 179, 8;
  --theme-secondary: #ca8a04;
  --theme-accent: #facc15;

  /* Background colors - Vibrant yellow theme */
  --background: #4a4010;
  --background-secondary: #5c5015;
  --background-tertiary: #70621a;
  --background-card: #524812;
  --border: #8b7525;

  /* Gradient colors - Yellow metallic */
  --theme-gradient-1: #fef08a;
  --theme-gradient-2: #facc15;
  --theme-gradient-3: #eab308;
  --theme-gradient-4: #ca8a04;
  --theme-gradient-5: #a16207;
  --theme-gradient-6: #facc15;
  --theme-gradient-7: #eab308;
  --theme-gradient-8: #ca8a04;
  --theme-gradient-9: #854d0e;

  /* Glow effects */
  --theme-glow: rgba(234, 179, 8, 0.3);
  --theme-glow-strong: rgba(234, 179, 8, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #eab308;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(234, 179, 8, 1);
  --theme-border-glow-2: rgba(234, 179, 8, 0.1);

  /* User accent */
  --theme-user-accent: #facc15;
}

/* ============================================
   ORANGE THEME
   ============================================ */
html[data-theme='orange'] {
  --theme-primary: #f97316;
  --theme-primary-rgb: 249, 115, 22;
  --theme-secondary: #ea580c;
  --theme-accent: #fb923c;

  /* Background colors - Vibrant orange theme */
  --background: #4a2810;
  --background-secondary: #5c3215;
  --background-tertiary: #703e1a;
  --background-card: #522c12;
  --border: #8b5025;

  /* Gradient colors - Orange metallic */
  --theme-gradient-1: #fed7aa;
  --theme-gradient-2: #fb923c;
  --theme-gradient-3: #f97316;
  --theme-gradient-4: #ea580c;
  --theme-gradient-5: #c2410c;
  --theme-gradient-6: #fb923c;
  --theme-gradient-7: #f97316;
  --theme-gradient-8: #ea580c;
  --theme-gradient-9: #9a3412;

  /* Glow effects */
  --theme-glow: rgba(249, 115, 22, 0.3);
  --theme-glow-strong: rgba(249, 115, 22, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #f97316;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(249, 115, 22, 1);
  --theme-border-glow-2: rgba(249, 115, 22, 0.1);

  /* User accent */
  --theme-user-accent: #fb923c;
}

/* ============================================
   TEAL THEME
   ============================================ */
html[data-theme='teal'] {
  --theme-primary: #14b8a6;
  --theme-primary-rgb: 20, 184, 166;
  --theme-secondary: #0d9488;
  --theme-accent: #2dd4bf;

  /* Background colors - Vibrant teal theme */
  --background: #0f4a42;
  --background-secondary: #155c52;
  --background-tertiary: #1a7068;
  --background-card: #12524a;
  --border: #258b7e;

  /* Gradient colors - Teal metallic */
  --theme-gradient-1: #99f6e4;
  --theme-gradient-2: #5eead4;
  --theme-gradient-3: #2dd4bf;
  --theme-gradient-4: #14b8a6;
  --theme-gradient-5: #0d9488;
  --theme-gradient-6: #2dd4bf;
  --theme-gradient-7: #14b8a6;
  --theme-gradient-8: #0d9488;
  --theme-gradient-9: #0f766e;

  /* Glow effects */
  --theme-glow: rgba(20, 184, 166, 0.3);
  --theme-glow-strong: rgba(20, 184, 166, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #14b8a6;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(20, 184, 166, 1);
  --theme-border-glow-2: rgba(20, 184, 166, 0.1);

  /* User accent */
  --theme-user-accent: #2dd4bf;
}

/* ============================================
   INDIGO THEME
   ============================================ */
html[data-theme='indigo'] {
  --theme-primary: #6366f1;
  --theme-primary-rgb: 99, 102, 241;
  --theme-secondary: #4f46e5;
  --theme-accent: #818cf8;

  /* Background colors - Vibrant indigo theme */
  --background: #252570;
  --background-secondary: #2e2e85;
  --background-tertiary: #38389a;
  --background-card: #2a2a7a;
  --border: #4848b0;

  /* Gradient colors - Indigo metallic */
  --theme-gradient-1: #c7d2fe;
  --theme-gradient-2: #a5b4fc;
  --theme-gradient-3: #818cf8;
  --theme-gradient-4: #6366f1;
  --theme-gradient-5: #4f46e5;
  --theme-gradient-6: #818cf8;
  --theme-gradient-7: #6366f1;
  --theme-gradient-8: #4f46e5;
  --theme-gradient-9: #4338ca;

  /* Glow effects */
  --theme-glow: rgba(99, 102, 241, 0.3);
  --theme-glow-strong: rgba(99, 102, 241, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #6366f1;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(99, 102, 241, 1);
  --theme-border-glow-2: rgba(99, 102, 241, 0.1);

  /* User accent */
  --theme-user-accent: #818cf8;
}

/* ============================================
   ROSE THEME
   ============================================ */
html[data-theme='rose'] {
  --theme-primary: #f43f5e;
  --theme-primary-rgb: 244, 63, 94;
  --theme-secondary: #e11d48;
  --theme-accent: #fb7185;

  /* Background colors - Vibrant rose theme */
  --background: #5c1528;
  --background-secondary: #701a32;
  --background-tertiary: #85203c;
  --background-card: #65182c;
  --border: #a02848;

  /* Gradient colors - Rose metallic */
  --theme-gradient-1: #fecdd3;
  --theme-gradient-2: #fda4af;
  --theme-gradient-3: #fb7185;
  --theme-gradient-4: #f43f5e;
  --theme-gradient-5: #e11d48;
  --theme-gradient-6: #fb7185;
  --theme-gradient-7: #f43f5e;
  --theme-gradient-8: #e11d48;
  --theme-gradient-9: #be123c;

  /* Glow effects */
  --theme-glow: rgba(244, 63, 94, 0.3);
  --theme-glow-strong: rgba(244, 63, 94, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #f43f5e;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(244, 63, 94, 1);
  --theme-border-glow-2: rgba(244, 63, 94, 0.1);

  /* User accent */
  --theme-user-accent: #fb7185;
}

/* ============================================
   AMBER THEME
   ============================================ */
html[data-theme='amber'] {
  --theme-primary: #f59e0b;
  --theme-primary-rgb: 245, 158, 11;
  --theme-secondary: #d97706;
  --theme-accent: #fbbf24;

  /* Background colors - Vibrant amber theme */
  --background: #4a3510;
  --background-secondary: #5c4215;
  --background-tertiary: #70501a;
  --background-card: #523c12;
  --border: #8b6525;

  /* Gradient colors - Amber metallic */
  --theme-gradient-1: #fde68a;
  --theme-gradient-2: #fcd34d;
  --theme-gradient-3: #fbbf24;
  --theme-gradient-4: #f59e0b;
  --theme-gradient-5: #d97706;
  --theme-gradient-6: #fbbf24;
  --theme-gradient-7: #f59e0b;
  --theme-gradient-8: #d97706;
  --theme-gradient-9: #b45309;

  /* Glow effects */
  --theme-glow: rgba(245, 158, 11, 0.3);
  --theme-glow-strong: rgba(245, 158, 11, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #f59e0b;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(245, 158, 11, 1);
  --theme-border-glow-2: rgba(245, 158, 11, 0.1);

  /* User accent */
  --theme-user-accent: #fbbf24;
}

/* ============================================
   LIME THEME
   ============================================ */
html[data-theme='lime'] {
  --theme-primary: #84cc16;
  --theme-primary-rgb: 132, 204, 22;
  --theme-secondary: #65a30d;
  --theme-accent: #a3e635;

  /* Background colors - Vibrant lime theme */
  --background: #2a4a12;
  --background-secondary: #355c18;
  --background-tertiary: #40701e;
  --background-card: #2f5215;
  --border: #558b28;

  /* Gradient colors - Lime metallic */
  --theme-gradient-1: #d9f99d;
  --theme-gradient-2: #bef264;
  --theme-gradient-3: #a3e635;
  --theme-gradient-4: #84cc16;
  --theme-gradient-5: #65a30d;
  --theme-gradient-6: #a3e635;
  --theme-gradient-7: #84cc16;
  --theme-gradient-8: #65a30d;
  --theme-gradient-9: #4d7c0f;

  /* Glow effects */
  --theme-glow: rgba(132, 204, 22, 0.3);
  --theme-glow-strong: rgba(132, 204, 22, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #84cc16;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(132, 204, 22, 1);
  --theme-border-glow-2: rgba(132, 204, 22, 0.1);

  /* User accent */
  --theme-user-accent: #a3e635;
}

/* ============================================
   EMERALD THEME
   ============================================ */
html[data-theme='emerald'] {
  --theme-primary: #10b981;
  --theme-primary-rgb: 16, 185, 129;
  --theme-secondary: #059669;
  --theme-accent: #34d399;

  /* Background colors - Vibrant emerald theme */
  --background: #104a38;
  --background-secondary: #155c45;
  --background-tertiary: #1a7055;
  --background-card: #12523e;
  --border: #258b6a;

  /* Gradient colors - Emerald metallic */
  --theme-gradient-1: #a7f3d0;
  --theme-gradient-2: #6ee7b7;
  --theme-gradient-3: #34d399;
  --theme-gradient-4: #10b981;
  --theme-gradient-5: #059669;
  --theme-gradient-6: #34d399;
  --theme-gradient-7: #10b981;
  --theme-gradient-8: #059669;
  --theme-gradient-9: #047857;

  /* Glow effects */
  --theme-glow: rgba(16, 185, 129, 0.3);
  --theme-glow-strong: rgba(16, 185, 129, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #10b981;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(16, 185, 129, 1);
  --theme-border-glow-2: rgba(16, 185, 129, 0.1);

  /* User accent */
  --theme-user-accent: #34d399;
}

/* ============================================
   SKY THEME
   ============================================ */
html[data-theme='sky'] {
  --theme-primary: #0ea5e9;
  --theme-primary-rgb: 14, 165, 233;
  --theme-secondary: #0284c7;
  --theme-accent: #38bdf8;

  /* Background colors - Vibrant sky blue theme */
  --background: #0c3a52;
  --background-secondary: #104865;
  --background-tertiary: #155878;
  --background-card: #0e405a;
  --border: #1a6890;

  /* Gradient colors - Sky blue metallic */
  --theme-gradient-1: #bae6fd;
  --theme-gradient-2: #7dd3fc;
  --theme-gradient-3: #38bdf8;
  --theme-gradient-4: #0ea5e9;
  --theme-gradient-5: #0284c7;
  --theme-gradient-6: #38bdf8;
  --theme-gradient-7: #0ea5e9;
  --theme-gradient-8: #0284c7;
  --theme-gradient-9: #0369a1;

  /* Glow effects */
  --theme-glow: rgba(14, 165, 233, 0.3);
  --theme-glow-strong: rgba(14, 165, 233, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #0ea5e9;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(14, 165, 233, 1);
  --theme-border-glow-2: rgba(14, 165, 233, 0.1);

  /* User accent */
  --theme-user-accent: #38bdf8;
}

/* ============================================
   VIOLET THEME
   ============================================ */
html[data-theme='violet'] {
  --theme-primary: #8b5cf6;
  --theme-primary-rgb: 139, 92, 246;
  --theme-secondary: #7c3aed;
  --theme-accent: #a78bfa;

  /* Background colors - Vibrant violet theme */
  --background: #35285c;
  --background-secondary: #423270;
  --background-tertiary: #503d85;
  --background-card: #3a2c65;
  --border: #6050a0;

  /* Gradient colors - Violet metallic */
  --theme-gradient-1: #ddd6fe;
  --theme-gradient-2: #c4b5fd;
  --theme-gradient-3: #a78bfa;
  --theme-gradient-4: #8b5cf6;
  --theme-gradient-5: #7c3aed;
  --theme-gradient-6: #a78bfa;
  --theme-gradient-7: #8b5cf6;
  --theme-gradient-8: #7c3aed;
  --theme-gradient-9: #6d28d9;

  /* Glow effects */
  --theme-glow: rgba(139, 92, 246, 0.3);
  --theme-glow-strong: rgba(139, 92, 246, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #8b5cf6;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(139, 92, 246, 1);
  --theme-border-glow-2: rgba(139, 92, 246, 0.1);

  /* User accent */
  --theme-user-accent: #a78bfa;
}

/* ============================================
   FUCHSIA THEME
   ============================================ */
html[data-theme='fuchsia'] {
  --theme-primary: #d946ef;
  --theme-primary-rgb: 217, 70, 239;
  --theme-secondary: #c026d3;
  --theme-accent: #e879f9;

  /* Background colors - Vibrant fuchsia theme */
  --background: #551560;
  --background-secondary: #681a75;
  --background-tertiary: #7c208a;
  --background-card: #5e1868;
  --border: #9528a5;

  /* Gradient colors - Fuchsia metallic */
  --theme-gradient-1: #f5d0fe;
  --theme-gradient-2: #f0abfc;
  --theme-gradient-3: #e879f9;
  --theme-gradient-4: #d946ef;
  --theme-gradient-5: #c026d3;
  --theme-gradient-6: #e879f9;
  --theme-gradient-7: #d946ef;
  --theme-gradient-8: #c026d3;
  --theme-gradient-9: #a21caf;

  /* Glow effects */
  --theme-glow: rgba(217, 70, 239, 0.3);
  --theme-glow-strong: rgba(217, 70, 239, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #d946ef;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(217, 70, 239, 1);
  --theme-border-glow-2: rgba(217, 70, 239, 0.1);

  /* User accent */
  --theme-user-accent: #e879f9;
}

/* ============================================
   SLATE THEME (Neutral/Dark)
   ============================================ */
html[data-theme='slate'] {
  --theme-primary: #64748b;
  --theme-primary-rgb: 100, 116, 139;
  --theme-secondary: #475569;
  --theme-accent: #94a3b8;

  /* Background colors - Vibrant slate/gray theme */
  --background: #2a3040;
  --background-secondary: #353c50;
  --background-tertiary: #404860;
  --background-card: #303848;
  --border: #505870;

  /* Gradient colors - Slate metallic */
  --theme-gradient-1: #e2e8f0;
  --theme-gradient-2: #cbd5e1;
  --theme-gradient-3: #94a3b8;
  --theme-gradient-4: #64748b;
  --theme-gradient-5: #475569;
  --theme-gradient-6: #94a3b8;
  --theme-gradient-7: #64748b;
  --theme-gradient-8: #475569;
  --theme-gradient-9: #334155;

  /* Glow effects */
  --theme-glow: rgba(100, 116, 139, 0.3);
  --theme-glow-strong: rgba(100, 116, 139, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #64748b;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(100, 116, 139, 1);
  --theme-border-glow-2: rgba(100, 116, 139, 0.1);

  /* User accent */
  --theme-user-accent: #94a3b8;
}

/* ============================================
   DEFAULT ICON COLORS (Gold for all themes)
   ============================================ */

/* Topbar icons - gold color by default */
.topbar-icon {
  color: #FFD700 !important;
  stroke: #FFD700 !important;
  fill: #FFD700 !important;
}

/* Sidebar/mobile menu icons - gold color by default */
.sidebar-icon {
  color: #FFD700 !important;
  fill: #FFD700 !important;
}

/* Announcement/broadcast icon - gold color by default */
.announcement-icon {
  color: #FFD700 !important;
  fill: #FFD700 !important;
}

/* ============================================
   WHITE-RED THEME (Light Theme with Red Accents)
   White base, red header/navbar/footer/announcement
   ============================================ */
html[data-theme='whitered'] {
  --theme-primary: #dc2626;
  --theme-primary-rgb: 220, 38, 38;
  --theme-secondary: #b91c1c;
  --theme-accent: #ef4444;

  /* Background colors - WHITE base, RED for header/nav/footer */
  --background: #ffffff;
  --background-secondary: #b91c1c; /* RED - for header, navbar, announcement */
  --background-tertiary: #991b1b; /* Darker red for hover states */
  --background-card: #ffffff; /* White cards */
  --border: #fecaca; /* Light red border */

  /* Text colors - White text on red, dark on white */
  --foreground: #ffffff;
  --foreground-muted: #fecaca;

  /* Gradient colors - Red metallic */
  --theme-gradient-1: #fecaca;
  --theme-gradient-2: #f87171;
  --theme-gradient-3: #ef4444;
  --theme-gradient-4: #dc2626;
  --theme-gradient-5: #b91c1c;
  --theme-gradient-6: #ef4444;
  --theme-gradient-7: #dc2626;
  --theme-gradient-8: #b91c1c;
  --theme-gradient-9: #991b1b;

  /* Glow effects */
  --theme-glow: rgba(220, 38, 38, 0.15);
  --theme-glow-strong: rgba(220, 38, 38, 0.25);

  /* Ring/Focus colors */
  --theme-ring: #dc2626;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(220, 38, 38, 1);
  --theme-border-glow-2: rgba(220, 38, 38, 0.1);

  /* User accent */
  --theme-user-accent: #ef4444;
}

/* White-Red Theme - Specific Component Overrides */
html[data-theme='whitered'] {
  /* Main content area text should be dark on white background */
  color: #1f2937;
}

/* White-Red: Main content area - dark maroon gradient */
html[data-theme='whitered'] .bg-theme-whitered {
  background: linear-gradient(to bottom, #7f1d1d 0%, #6b1515 50%, #4a0d0d 100%) !important;
  color: #ffffff !important;
}

/* White-Red: Navbar - red background with white text */
html[data-theme='whitered'] .navbar {
  background: #b91c1c !important;
  color: #ffffff !important;
}

/* White-Red: Navbar text elements - force white text */
html[data-theme='whitered'] .navbar a,
html[data-theme='whitered'] .navbar a span,
html[data-theme='whitered'] .navbar span {
  color: #ffffff !important;
  background: transparent !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* White-Red: Topbar specifically - white background */
html[data-theme='whitered'] .bg-theme-whitered {
  background: #ffffff !important;
  color: #dc2626 !important;
}

/* White-Red: Jackpot/gold gradient text - maroon red */
html[data-theme='whitered'] .gold-gradient-text,
html[data-theme='whitered'] .theme-gradient-text {
  background: linear-gradient(to right, #7f1d1d, #b91c1c, #dc2626) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* White-Red: Section header gradient - white pastel 30% then red */
html[data-theme='whitered'] .section-header-gradient {
  background: linear-gradient(
    to right,
    #fff5f5 0%,
    #fecaca 30%,
    #dc2626 60%,
    #b91c1c 100%
  ) !important;
}

html[data-theme='whitered'] .section-header-gradient,
html[data-theme='whitered'] .section-header-gradient * {
  color: #ffffff !important;
}

/* White-Red: Provider hover effect */
html[data-theme='whitered'] .provider:hover {
  background-color: rgba(220, 38, 38, 0.1);
}

/* White-Red: Content areas inside background-top - white with opacity */
html[data-theme='whitered'] .background-top .bg-theme-whitered-secondary {
  background: rgba(255, 255, 255, 0.8) !important;
  color: #1f2937 !important;
}

/* White-Red: Navbar - red background (override above rule) */
html[data-theme='whitered'] .navbar.bg-theme-whitered-secondary {
  background: #dc2626 !important;
  color: #ffffff !important;
}

/* White-Red: Topbar (primary) - red text on white */
html[data-theme='whitered'] .bg-theme-whitered,
html[data-theme='whitered'] .bg-theme-whitered * {
  color: #dc2626 !important;
}

/* White-Red: Topbar icons - red color */
html[data-theme='whitered'] .topbar-icon,
html[data-theme='whitered'] .bg-theme-whitered .topbar-icon {
  color: #dc2626 !important;
  stroke: #dc2626 !important;
  fill: #dc2626 !important;
}

/* White-Red: Sidebar/mobile menu icons - red color */
html[data-theme='whitered'] .sidebar-icon {
  color: #dc2626 !important;
  stroke: #dc2626 !important;
  fill: #dc2626 !important;
}

/* White-Red: Login button - red border and red text */
html[data-theme='whitered'] .login-btn {
  border-color: #dc2626 !important;
  color: #dc2626 !important;
}

/* White-Red: Register/Sign Up button - white text on red bg */
html[data-theme='whitered'] .register-btn,
html[data-theme='whitered'] .register-btn a {
  color: #ffffff !important;
}

/* White-Red: Mobile Login/Register buttons - white text */
html[data-theme='whitered'] .mobile-login-btn,
html[data-theme='whitered'] .mobile-register-btn {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* White-Red: Broadcast bar - white background with red icon and text */
html[data-theme='whitered'] .broadcast,
html[data-theme='whitered'] .broadcast.bg-theme-whitered-secondary {
  background: #ffffff !important;
}

html[data-theme='whitered'] .announcement-icon {
  color: #dc2626 !important;
  fill: #dc2626 !important;
}

html[data-theme='whitered'] .broadcast-text {
  color: #dc2626 !important;
}

/* White-Red: Mobile burger menu icon - white on red header */
html[data-theme='whitered'] .mobile-burger-icon {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* White-Red: Mobile menu overlay - transparent dark instead of white */
html[data-theme='whitered'] .mobile-menu-overlay,
html[data-theme='whitered'] .mobile-menu-overlay.bg-opacity-50 {
  background: rgba(0, 0, 0, 0.5) !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  --tw-bg-opacity: 0.5 !important;
}

/* White-Red: Mobile menu panel - red background with white text */
html[data-theme='whitered'] .mobile-menu-panel {
  background: #b91c1c !important;
  background-color: #b91c1c !important;
}

/* White-Red: Mobile menu text - white for readability */
html[data-theme='whitered'] .mobile-menu-panel,
html[data-theme='whitered'] .mobile-menu-panel span,
html[data-theme='whitered'] .mobile-menu-panel p,
html[data-theme='whitered'] .mobile-menu-panel a {
  color: #ffffff !important;
}

/* White-Red: Mobile menu muted text - light pink instead of gray */
html[data-theme='whitered'] .mobile-menu-panel .text-gray-400 {
  color: rgba(255, 200, 200, 0.9) !important;
}

/* White-Red: Mobile menu accent color - light yellow/gold for contrast */
html[data-theme='whitered'] .mobile-menu-panel [class*='text-[#4FD1C5]'] {
  color: #ffd700 !important;
}

/* White-Red: Mobile menu green text - keep visible */
html[data-theme='whitered'] .mobile-menu-panel .text-green-400 {
  color: #4ade80 !important;
}

/* White-Red: Mobile menu icons - white */
html[data-theme='whitered'] .mobile-menu-panel .sidebar-icon,
html[data-theme='whitered'] .mobile-menu-panel svg {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* White-Red: Mobile menu SVG with specific teal color - gold */
html[data-theme='whitered'] .mobile-menu-panel svg.text-\[\#4FD1C5\] {
  color: #ffd700 !important;
  fill: #ffd700 !important;
}

/* White-Red: Mobile menu borders - white with transparency */
html[data-theme='whitered'] .mobile-menu-panel [class*='border'],
html[data-theme='whitered'] .mobile-menu-panel .border-gray-700 {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* White-Red: Mobile menu inner boxes - darker red */
html[data-theme='whitered'] .mobile-menu-panel [class*='bg-\[#1a1a1a\]'] {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* White-Red: Mobile menu logout button - gold */
html[data-theme='whitered'] .mobile-menu-panel button[class*='bg-\[#4FD1C5\]'] {
  background: #ffd700 !important;
  color: #b91c1c !important;
}

/* White-Red: Mobile menu register button gradient */
html[data-theme='whitered'] .mobile-menu-panel .theme-gradient-bg {
  background: linear-gradient(135deg, #ffd700, #ffed4a) !important;
}

html[data-theme='whitered'] .mobile-menu-panel .theme-gradient-bg a {
  color: #b91c1c !important;
}

/* White-Red: Footer background with image (mobile and desktop) */
html[data-theme='whitered'] .footer-bg {
  background-color: #f5f5f5;
  background-image: url(/images/themes/footer-whitered.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* White-Red: Footer padding for mobile only */
@media (max-width: 767px) {
  html[data-theme='whitered'] .footer-bg {
    padding: 25px;
  }
}

/* White-Red: Mobile bottom nav center button - white */
html[data-theme='whitered'] .mobile-nav-center-btn {
  background: #ffffff !important;
  border-color: #dc2626 !important;
}

html[data-theme='whitered'] .mobile-nav-center-icon {
  color: #dc2626 !important;
  stroke: #dc2626 !important;
}

html[data-theme='whitered'] .mobile-nav-center-text {
  color: #dc2626 !important;
}

html[data-theme='whitered'] .mobile-nav-center-label {
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
}

/* White-Red: Withdrawal toast - dark/transparent background */
html[data-theme='whitered'] .withdrawal-toast {
  background: rgba(0, 0, 0, 0.9) !important;
  border-color: #dc2626 !important;
}

/* White-Red: Footer text and labels - RED */
html[data-theme='whitered'] .footer-bg,
html[data-theme='whitered'] .footer-bg * {
  color: #dc2626 !important;
}

/* White-Red: Footer icon borders - RED */
html[data-theme='whitered'] .footer-bg [class*='border'],
html[data-theme='whitered'] .footer-bg [class*='rounded'] {
  border-color: #dc2626 !important;
}

/* White-Red: Footer section titles */
html[data-theme='whitered'] .footer-bg h2,
html[data-theme='whitered'] .footer-bg h3,
html[data-theme='whitered'] .footer-bg h4,
html[data-theme='whitered'] .footer-bg p,
html[data-theme='whitered'] .footer-bg span {
  color: #dc2626 !important;
}

/* White-Red: Login/Register submit buttons - solid dark red so white label stays readable.
   The theme gradient starts at #fecaca (near-white), which makes text-white disappear. */
html[data-theme='whitered'] .glowing2.gold-gradient-bg,
html[data-theme='whitered'] .glowing2.theme-gradient-bg,
html[data-theme='whitered'] .glowing.gold-gradient-bg,
html[data-theme='whitered'] .glowing.theme-gradient-bg {
  background-image: linear-gradient(135deg, #dc2626 0%, #b91c1c 50%, #991b1b 100%) !important;
  color: #ffffff !important;
}

.background-top {
  /* Mobile: Use theme background color */
  background-color: var(--background);
  position: relative;
  padding: 0;
  overflow-x: hidden;
}

.bmw108-dollar-rain {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.bmw108-dollar-rain span {
  position: absolute;
  top: -80px;
  color: rgba(96, 165, 250, 0.28);
  font-size: clamp(24px, 4vw, 58px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 18px rgba(59, 130, 246, 0.65);
  animation: bmw108-dollar-fall 12s linear infinite;
}

.bmw108-dollar-rain span:nth-child(1) {
  left: 3%;
  animation-delay: -1s;
  animation-duration: 13s;
}

.bmw108-dollar-rain span:nth-child(2) {
  left: 9%;
  animation-delay: -8s;
  animation-duration: 16s;
}

.bmw108-dollar-rain span:nth-child(3) {
  left: 16%;
  animation-delay: -3s;
  animation-duration: 11s;
}

.bmw108-dollar-rain span:nth-child(4) {
  left: 24%;
  animation-delay: -10s;
  animation-duration: 15s;
}

.bmw108-dollar-rain span:nth-child(5) {
  left: 31%;
  animation-delay: -5s;
  animation-duration: 12s;
}

.bmw108-dollar-rain span:nth-child(6) {
  left: 38%;
  animation-delay: -13s;
  animation-duration: 18s;
}

.bmw108-dollar-rain span:nth-child(7) {
  left: 45%;
  animation-delay: -2s;
  animation-duration: 14s;
}

.bmw108-dollar-rain span:nth-child(8) {
  left: 53%;
  animation-delay: -9s;
  animation-duration: 17s;
}

.bmw108-dollar-rain span:nth-child(9) {
  left: 60%;
  animation-delay: -6s;
  animation-duration: 13s;
}

.bmw108-dollar-rain span:nth-child(10) {
  left: 67%;
  animation-delay: -12s;
  animation-duration: 16s;
}

.bmw108-dollar-rain span:nth-child(11) {
  left: 73%;
  animation-delay: -4s;
  animation-duration: 12s;
}

.bmw108-dollar-rain span:nth-child(12) {
  left: 80%;
  animation-delay: -11s;
  animation-duration: 19s;
}

.bmw108-dollar-rain span:nth-child(13) {
  left: 86%;
  animation-delay: -7s;
  animation-duration: 14s;
}

.bmw108-dollar-rain span:nth-child(14) {
  left: 91%;
  animation-delay: -15s;
  animation-duration: 18s;
}

.bmw108-dollar-rain span:nth-child(15) {
  left: 96%;
  animation-delay: -6s;
  animation-duration: 15s;
}

.bmw108-dollar-rain span:nth-child(16) {
  left: 50%;
  animation-delay: -16s;
  animation-duration: 20s;
}

@keyframes bmw108-dollar-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -80px, 0) rotate(0deg);
  }
  10%,
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(42px, calc(100vh + 120px), 0) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bmw108-dollar-rain span {
    animation: none;
    opacity: 0.28;
    transform: translateY(20vh);
  }
}

/* Desktop: Apply background image based on theme */
@media (min-width: 768px) {
  .background-top {
    background: url(/images/themes/bg-gold.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 30px 0;
  }

  /* Theme-specific backgrounds */
  html[data-theme='gold'] .background-top,
  html:not([data-theme]) .background-top {
    background-image: url(/images/themes/bg-gold.jpg);
  }

  html[data-theme='red'] .background-top {
    background-image: url(/images/themes/bg-red.png);
  }

  html[data-theme='crimson'] .background-top {
    background-image: url(/images/themes/bg-crimson.png);
  }

  html[data-theme='blue'] .background-top {
    background-image: url(/images/themes/bg-blue.png);
  }

  html[data-theme='purple'] .background-top {
    background-image: url(/images/themes/bg-purple.png);
  }

  html[data-theme='green'] .background-top {
    background-image: url(/images/themes/bg-green.png);
  }

  html[data-theme='cyan'] .background-top {
    background-image: url(/images/themes/bg-cyan.png);
  }

  /* New themes - background-top */
  html[data-theme='pink'] .background-top {
    background-image: url(/images/themes/bg-pink.png);
  }

  html[data-theme='magenta'] .background-top {
    background-image: url(/images/themes/bg-magenta.png);
  }

  html[data-theme='yellow'] .background-top {
    background-image: url(/images/themes/bg-yellow.png);
  }

  html[data-theme='orange'] .background-top {
    background-image: url(/images/themes/bg-orange.png);
  }

  html[data-theme='teal'] .background-top {
    background-image: url(/images/themes/bg-teal.png);
  }

  html[data-theme='indigo'] .background-top {
    background-image: url(/images/themes/bg-indigo.png);
  }

  html[data-theme='rose'] .background-top {
    background-image: url(/images/themes/bg-rose.png);
  }

  html[data-theme='amber'] .background-top {
    background-image: url(/images/themes/bg-amber.png);
  }

  html[data-theme='lime'] .background-top {
    background-image: url(/images/themes/bg-lime.png);
  }

  html[data-theme='emerald'] .background-top {
    background-image: url(/images/themes/bg-emerald.png);
  }

  html[data-theme='sky'] .background-top {
    background-image: url(/images/themes/bg-sky.png);
  }

  html[data-theme='violet'] .background-top {
    background-image: url(/images/themes/bg-violet.png);
  }

  html[data-theme='fuchsia'] .background-top {
    background-image: url(/images/themes/bg-fuchsia.png);
  }

  html[data-theme='slate'] .background-top {
    background-image: url(/images/themes/bg-slate.png);
  }

  html[data-theme='whitered'] .background-top {
    background-image: url(/images/themes/bg-whitered.jpg);
  }
}

/* ============================================
   FOOTER BACKGROUND - Theme-specific
   Desktop only (md:768px+), uses theme-specific hexagon images
   ============================================ */

/* Base footer styles - all screen sizes */
.footer-bg {
  background-color: var(--background);
  padding: 0;
}

/* Desktop: Theme-specific footer backgrounds */
@media screen and (min-width: 768px) {
  /* Default/Gold theme */
  .footer-bg {
    background-image: url('/images/themes/footer-gold.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }

  /* Theme-specific overrides */
  [data-theme='gold'] .footer-bg {
    background-image: url('/images/themes/footer-gold.jpg');
  }

  [data-theme='red'] .footer-bg {
    background-image: url('/images/themes/footer-red.jpg');
  }

  [data-theme='crimson'] .footer-bg {
    background-image: url('/images/themes/footer-crimson.jpg');
  }

  [data-theme='blue'] .footer-bg {
    background-image: url('/images/themes/footer-blue.jpg');
  }

  [data-theme='purple'] .footer-bg {
    background-image: url('/images/themes/footer-purple.jpg');
  }

  [data-theme='green'] .footer-bg {
    background-image: url('/images/themes/footer-green.jpg');
  }

  [data-theme='cyan'] .footer-bg {
    background-image: url('/images/themes/footer-cyan.jpg');
  }

  [data-theme='pink'] .footer-bg {
    background-image: url('/images/themes/footer-pink.jpg');
  }

  [data-theme='magenta'] .footer-bg {
    background-image: url('/images/themes/footer-magenta.jpg');
  }

  [data-theme='yellow'] .footer-bg {
    background-image: url('/images/themes/footer-yellow.jpg');
  }

  [data-theme='orange'] .footer-bg {
    background-image: url('/images/themes/footer-orange.jpg');
  }

  [data-theme='teal'] .footer-bg {
    background-image: url('/images/themes/footer-teal.jpg');
  }

  [data-theme='indigo'] .footer-bg {
    background-image: url('/images/themes/footer-indigo.jpg');
  }

  [data-theme='rose'] .footer-bg {
    background-image: url('/images/themes/footer-rose.jpg');
  }

  [data-theme='amber'] .footer-bg {
    background-image: url('/images/themes/footer-amber.jpg');
  }

  [data-theme='lime'] .footer-bg {
    background-image: url('/images/themes/footer-lime.jpg');
  }

  [data-theme='emerald'] .footer-bg {
    background-image: url('/images/themes/footer-emerald.jpg');
  }

  [data-theme='sky'] .footer-bg {
    background-image: url('/images/themes/footer-sky.jpg');
  }

  [data-theme='violet'] .footer-bg {
    background-image: url('/images/themes/footer-violet.jpg');
  }

  [data-theme='fuchsia'] .footer-bg {
    background-image: url('/images/themes/footer-fuchsia.jpg');
  }

  [data-theme='slate'] .footer-bg {
    background-image: url('/images/themes/footer-slate.jpg');
  }

  [data-theme='whitered'] .footer-bg {
    background-image: url('/images/themes/footer-whitered.jpg');
  }
}