/* 🎨 BADASS THEME SYSTEM WITH EPIC GRADIENTS 🎨 */

/* Default Theme - Neutral (Light grayscale + solar accent) */
:root {
  /* 🌈 BASE COLORS */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #e2e8f0;
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;
  
  /* ⚡ ACCENT COLORS */
  --accent-primary: #f59e0b;
  --accent-secondary: #fbbf24;
  --accent-light: #fef3c7;
  --accent-color: var(--accent-primary);
  --accent-hover: #d97706;
  
  /* 🔥 EPIC GRADIENTS */
  --gradient-text: linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #dc2626 100%);
  --gradient-border: linear-gradient(90deg, #f59e0b 0%, #f97316 50%, #dc2626 100%);
  --accent-gradient: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  --hero-gradient: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(249, 115, 22, 0.05) 100%);
  --btn-gradient: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  
  /* 🖼️ HERO BACKGROUND */
  --hero-bg: url('/assets/img/hero-solar-field.jpg');
  --hero-overlay: rgba(0, 0, 0, 0.3);
  
  /* 🎨 GLASSMORPHISM */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  
  /* 🧭 HEADER */
  --header-bg: rgba(255, 255, 255, 0.9);
  --header-bg-scrolled: rgba(255, 255, 255, 0.95);
  --header-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  --mobile-nav-bg: rgba(255, 255, 255, 0.95);
  
  /* 🔲 BUTTONS */
  --btn-primary-bg: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: rgba(255, 255, 255, 0.1);
  --btn-secondary-text: var(--text-primary);
  --btn-secondary-border: rgba(245, 158, 11, 0.5);
  --btn-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
  --btn-shadow-hover: 0 8px 25px rgba(245, 158, 11, 0.4);
  --btn-hover: rgba(245, 158, 11, 0.1);
  
  /* 🃏 CARDS */
  --card-bg: rgba(255, 255, 255, 0.8);
  --card-border: rgba(245, 158, 11, 0.1);
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --card-shadow-hover: 0 12px 40px rgba(245, 158, 11, 0.2);
  
  /* 🎯 THEME TOGGLE */
  --theme-toggle-bg: rgba(255, 255, 255, 0.2);
  --theme-toggle-border: rgba(245, 158, 11, 0.3);
  --theme-toggle-text: var(--text-primary);
  
  /* 🦶 FOOTER */
  --footer-bg: var(--bg-secondary);
  --footer-border: var(--card-border);
  
  /* 🎯 FOCUS */
  --focus-color: #FFD700;
  
  /* 📛 THEME NAME */
  --theme-name: "Neutral";
}

/* 🌿 ECO THEME - CALIFORNIA NATURE PALETTE */
[data-theme="eco"] {
  /* 🌈 BASE COLORS - Earth & Forest Tones */
  --bg-primary: #fefdfb;
  --bg-secondary: #f7f3f0;
  --bg-tertiary: #e8e0db;
  --text-primary: #2c3e2e;
  --text-secondary: #4a5d4c;
  --text-muted: #6b7a6d;
  
  /* ⚡ ACCENT COLORS - Nature's Palette */
  --accent-primary: #7c5c00; /* Golden brown */
  --accent-secondary: #228B22; /* Forest green */
  --accent-light: #e8f4d4;
  --accent-color: #228B22;
  --accent-hover: #6a4c00;
  
  /* 🔥 EPIC GRADIENTS - Mountain & Valley Colors */
  --gradient-text: linear-gradient(135deg, #228B22 0%, #7c5c00 35%, #8B4513 70%, #D2691E 100%);
  --gradient-border: linear-gradient(90deg, #228B22 0%, #7c5c00 25%, #8B4513 50%, #D2691E 75%, #CD853F 100%);
  --accent-gradient: linear-gradient(135deg, #228B22 0%, #7c5c00 50%, #8B4513 100%);
  --hero-gradient: linear-gradient(135deg, rgba(34, 139, 34, 0.12) 0%, rgba(124, 92, 0, 0.08) 50%, rgba(139, 69, 19, 0.05) 100%);
  --btn-gradient: linear-gradient(135deg, #228B22 0%, #7c5c00 50%, #8B4513 100%);
  
  /* 🖼️ HERO BACKGROUND - California Landscape */
  --hero-bg: url('/assets/img/bakersfield-landscape.jpg');
  --hero-overlay: rgba(44, 62, 46, 0.3);
  
  /* 🎨 GLASSMORPHISM - Natural Glass */
  --glass-bg: rgba(254, 253, 251, 0.88);
  --glass-border: rgba(124, 92, 0, 0.15);
  --glass-shadow: 0 8px 32px rgba(34, 139, 34, 0.1);
  
  /* 🧭 HEADER - Sky & Earth */
  --header-bg: rgba(254, 253, 251, 0.92);
  --header-bg-scrolled: rgba(254, 253, 251, 0.96);
  --header-shadow: 0 4px 20px rgba(124, 92, 0, 0.12);
  --mobile-nav-bg: rgba(254, 253, 251, 0.95);
  
  /* 🔲 BUTTONS - Natural Gradients */
  --btn-primary-bg: linear-gradient(135deg, #228B22 0%, #7c5c00 100%);
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: rgba(254, 253, 251, 0.15);
  --btn-secondary-text: var(--text-primary);
  --btn-secondary-border: rgba(124, 92, 0, 0.4);
  --btn-shadow: 0 4px 15px rgba(124, 92, 0, 0.25);
  --btn-shadow-hover: 0 8px 25px rgba(124, 92, 0, 0.35);
  --btn-hover: rgba(124, 92, 0, 0.08);
  
  /* 🃏 CARDS - Earth Tones */
  --card-bg: rgba(247, 243, 240, 0.85);
  --card-border: rgba(124, 92, 0, 0.12);
  --card-shadow: 0 4px 20px rgba(139, 69, 19, 0.06);
  --card-shadow-hover: 0 12px 40px rgba(124, 92, 0, 0.18);
  
  /* 🎯 THEME TOGGLE - Natural Blend */
  --theme-toggle-bg: rgba(247, 243, 240, 0.4);
  --theme-toggle-border: rgba(124, 92, 0, 0.25);
  --theme-toggle-text: var(--text-primary);
  
  /* 🦶 FOOTER - Desert Sand */
  --footer-bg: var(--bg-secondary);
  --footer-border: rgba(139, 69, 19, 0.1);
  
  /* 🎯 FOCUS - Golden Highlight */
  --focus-color: #DAA520;
  
  /* 📛 THEME NAME */
  --theme-name: "Eco";
}

/* ⚡ ELECTRIC THEME - DARK/HIGH CONTRAST */
[data-theme="electric"] {
  /* 🌈 BASE COLORS */
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --text-primary: #f8fafc;
  --text-secondary: #e2e8f0;
  --text-muted: #cbd5e1;
  
  /* ⚡ ACCENT COLORS */
  --accent-primary: #06b6d4;
  --accent-secondary: #0891b2;
  --accent-light: #164e63;
  --accent-color: var(--accent-primary);
  --accent-hover: #0284c7;
  
  /* 🔥 EPIC GRADIENTS */
  --gradient-text: linear-gradient(135deg, #06b6d4 0%, #0891b2 50%, #0284c7 100%);
  --gradient-border: linear-gradient(90deg, #06b6d4 0%, #0891b2 50%, #0284c7 100%);
  --accent-gradient: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  --hero-gradient: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(8, 145, 178, 0.08) 100%);
  --btn-gradient: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
  
  /* 🖼️ HERO BACKGROUND */
  --hero-bg: url('/assets/img/solar-blue-sky.jpg');
  --hero-overlay: rgba(15, 23, 42, 0.4);
  
  /* 🎨 GLASSMORPHISM */
  --glass-bg: rgba(15, 23, 42, 0.9);
  --glass-border: rgba(6, 182, 212, 0.2);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  
  /* 🧭 HEADER */
  --header-bg: rgba(15, 23, 42, 0.9);
  --header-bg-scrolled: rgba(15, 23, 42, 0.95);
  --header-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  --mobile-nav-bg: rgba(15, 23, 42, 0.95);
  
  /* 🔲 BUTTONS */
  --btn-primary-bg: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: rgba(15, 23, 42, 0.1);
  --btn-secondary-text: var(--text-primary);
  --btn-secondary-border: rgba(6, 182, 212, 0.5);
  --btn-shadow: 0 4px 15px rgba(6, 182, 212, 0.3);
  --btn-shadow-hover: 0 8px 25px rgba(6, 182, 212, 0.4);
  --btn-hover: rgba(6, 182, 212, 0.1);
  
  /* 🃏 CARDS */
  --card-bg: rgba(30, 41, 59, 0.8);
  --card-border: rgba(6, 182, 212, 0.1);
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  --card-shadow-hover: 0 12px 40px rgba(6, 182, 212, 0.2);
  
  /* 🎯 THEME TOGGLE */
  --theme-toggle-bg: rgba(30, 41, 59, 0.5);
  --theme-toggle-border: rgba(6, 182, 212, 0.3);
  --theme-toggle-text: var(--text-primary);
  
  /* 🦶 FOOTER */
  --footer-bg: var(--bg-secondary);
  --footer-border: var(--card-border);
  
  /* 🎯 FOCUS */
  --focus-color: #06b6d4;
  
  /* 📛 THEME NAME */
  --theme-name: "Electric";
}

/* 🎨 APPLY THEME STYLES */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 🧭 HEADER STYLES */
.header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--glass-border);
}

.logo {
  background: var(--gradient-text);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-menu a {
  color: var(--text-secondary);
}

.nav-menu a:hover {
  color: var(--accent-color);
}

.theme-toggle {
  background: var(--theme-toggle-bg);
  color: var(--theme-toggle-text);
  border-color: var(--theme-toggle-border);
}

.theme-toggle:hover {
  background: var(--btn-hover);
  border-color: var(--accent-color);
}

.nav-toggle span {
  background: var(--text-primary);
}

/* 📱 MOBILE MENU */
.nav-menu {
  background: var(--mobile-nav-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
}

/* 🚀 HERO SECTION */
.hero {
  background-image: var(--hero-bg);
}

.hero::before {
  background: var(--hero-overlay);
}

.hero::after {
  background: var(--hero-gradient);
}

.hero-subtitle {
  color: var(--text-secondary);
}

/* ✨ BUTTONS */
.button-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  box-shadow: var(--btn-shadow);
}

.button-primary:hover {
  box-shadow: var(--btn-shadow-hover);
}

.button-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}

.button-secondary:hover {
  background: var(--accent-color);
  color: var(--btn-primary-text);
}

/* 🃏 CARDS */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.card:hover {
  box-shadow: var(--card-shadow-hover);
}

.card::before {
  background: var(--accent-gradient);
}

.card h3 {
  color: var(--text-primary);
}

.card p {
  color: var(--text-secondary);
}

/* 📄 SECTIONS */
.section:nth-child(even) {
  background: var(--bg-secondary);
}

.section-title {
  color: var(--text-primary);
}

.section-title::after {
  background: var(--accent-gradient);
}

.section::before {
  background: var(--gradient-border);
}

/* 📞 CONTACT */
.contact-info {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.contact-info a {
  color: var(--accent-color);
}

.contact-info a:hover {
  color: var(--accent-hover);
}

/* 🦶 FOOTER */
.footer {
  background: var(--footer-bg);
  border-color: var(--footer-border);
  color: var(--text-muted);
}

/* 🎯 FOCUS STYLES */
:focus-visible {
  outline-color: var(--focus-color);
}

/* ⚡ SMOOTH TRANSITIONS */
* {
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              color 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 🎨 HIGH CONTRAST SUPPORT */
@media (prefers-contrast: high) {
  :root {
    --btn-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  }
  
  .button,
  .card {
    border-width: 2px !important;
  }
}

/* 🌙 DARK MODE PREFERENCE */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* Auto-apply electric theme for dark mode preference */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f8fafc;
    --text-secondary: #e2e8f0;
    --text-muted: #cbd5e1;
    --accent-color: #06b6d4;
    --gradient-text: linear-gradient(135deg, #06b6d4 0%, #0891b2 50%, #0284c7 100%);
    --hero-bg: url('/assets/img/solar-blue-sky.jpg');
    --hero-overlay: rgba(15, 23, 42, 0.4);
    --glass-bg: rgba(15, 23, 42, 0.9);
  }
}

/* 🖨️ PRINT STYLES */
@media print {
  .theme-toggle,
  .nav-toggle {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
  
  .hero {
    background: none !important;
  }
}

/* 🌟 CUSTOM SCROLLBAR */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--accent-gradient);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  opacity: 0.8;
}