:root {
  --primary-color: #ffc200;
  --secondary-color: #0e0d00;
  --accent-color: #ffc200;
  --success-color: #10b981;
  --warning-color: #ffc200;
  --error-color: #ef4444;
  --background-color: #ffffff;
  --text-color: #000000;
  --text-secondary-color: #6b7280;
  --border-color: #e5e7eb;
  --card-background: #ffffff;
  --navbar-background: #ffffff;
  --footer-background: #0e0d00;
  --primary-font: Inter;
  --secondary-font: Inter;
  --heading-font: Inter;
  --body-font: Inter;
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;
  --font-size-6xl: 60px;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --container-max-width: 1280px;
  --sidebar-width: 256px;
  --header-height: 80px;
  --footer-height: 200px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --button-padding-x: 24px;
  --button-padding-y: 12px;
  --button-border-radius: 8px;
  --input-padding-x: 16px;
  --input-padding-y: 12px;
  --input-border-radius: 6px;
  --card-padding: 24px;
  --card-border-radius: 12px;
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --modal-backdrop: rgba(0, 0, 0, 0.5);
  --tooltip-background: #1f2937;
  --tooltip-text-color: #ffffff;
  --animation-duration-fast: 150ms;
  --animation-duration-normal: 300ms;
  --animation-duration-slow: 500ms;
  --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --hover-scale: 1.05;
  --transition-all: all 0.3s ease;
  --energy-primary: #ffc200;
  --energy-secondary: #0e0d00;
  --solar-color: #ffc200;
  --wind-color: #10b981;
  --grid-color: #6b7280;
  --particle-color: #ffc200;
  --lightning-color: #ffc200;
  --wave-color: #0e0d00;
  --sidebar-background: #e60f0f;
  --sidebar-text-color: #000000;
  --sidebar-active-background: #ffc200;
  --sidebar-active-text: #000000;
  --sidebar-hover-background: #f3f4f6;
  --scrollbar-track: #f1f5f9;
  --scrollbar-thumb: #ffc200;
  --scrollbar-thumb-hover: #e5ae00;
}

/* Dynamic Theme Styles */
body {
    font-family: var(--primary-font, 'Inter'), sans-serif;
    font-size: var(--font-size-base, 16px);
    color: var(--text-color, #1f2937);
    background-color: var(--background-color, #ffffff);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font, 'Inter'), sans-serif;
    color: var(--text-color, #1f2937);
}

.btn-primary {
    background-color: var(--primary-color, #3366FF);
    color: white;
    padding: var(--button-padding-y, 12px) var(--button-padding-x, 24px);
    border-radius: var(--button-border-radius, 8px);
}

.btn-secondary {
    background-color: var(--secondary-color, #FFC700);
    color: #1f2937;
    padding: var(--button-padding-y, 12px) var(--button-padding-x, 24px);
    border-radius: var(--button-border-radius, 8px);
}

.card {
    background-color: var(--card-background, #ffffff);
}

/* Dark mode overrides for theme colors */
.dark {
    --background-color: #111827;
    --card-background: #1f2937;
    --text-color: #f3f4f6;
    --text-secondary-color: #9ca3af;
}

.dark body {
    background-color: var(--background-color, #111827);
    color: var(--text-color, #f3f4f6);
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
    color: var(--text-color, #f3f4f6);
}

.dark .card {
    background-color: var(--card-background, #1f2937);
    border-radius: var(--card-border-radius, 12px);
    padding: var(--card-padding, 24px);
    box-shadow: var(--card-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

.navbar {
    background-color: var(--navbar-background, #ffffff);
    height: var(--header-height, 80px);
}

.footer {
    background-color: var(--footer-background, #1f2937);
    min-height: var(--footer-height, 200px);
}

/* Energy Theme Specific - Tesla Energy Logo Colors (Blue, Yellow, White) */
.energy-slideshow {
    --energy-primary: var(--energy-primary, #3366FF);
    --energy-secondary: var(--energy-secondary, #FFC700);
    --solar-color: var(--solar-color, #FFC700);
    --wind-color: var(--wind-color, #10b981);
    --grid-color: var(--grid-color, #6b7280);
    --particle-color: var(--particle-color, #3366FF);
    --lightning-color: var(--lightning-color, #FFC700);
    --wave-color: var(--wave-color, #3366FF);
}

.energy-particle {
    background: radial-gradient(circle, var(--particle-color, #3366FF), transparent);
}

.lightning-bolt {
    background: linear-gradient(to bottom, var(--lightning-color, #FFC700), #e6b300, transparent);
}

.solar-panel::before {
    background: linear-gradient(90deg, var(--solar-color, #FFC700), #e6b300);
}

.energy-wave {
    background: linear-gradient(90deg, transparent, var(--wave-color, #3366FF), transparent);
}

/* Typography Scale */
.text-xs { font-size: var(--font-size-sm, 14px); }
.text-sm { font-size: var(--font-size-base, 16px); }
.text-base { font-size: var(--font-size-base, 16px); }
.text-lg { font-size: var(--font-size-lg, 18px); }
.text-xl { font-size: var(--font-size-xl, 20px); }
.text-2xl { font-size: var(--font-size-2xl, 24px); }
.text-3xl { font-size: var(--font-size-3xl, 30px); }
.text-4xl { font-size: var(--font-size-4xl, 36px); }
.text-5xl { font-size: var(--font-size-5xl, 48px); }
.text-6xl { font-size: var(--font-size-6xl, 60px); }

/* Font Weights */
.font-light { font-weight: var(--font-weight-light, 300); }
.font-normal { font-weight: var(--font-weight-normal, 400); }
.font-medium { font-weight: var(--font-weight-medium, 500); }
.font-semibold { font-weight: var(--font-weight-semibold, 600); }
.font-bold { font-weight: var(--font-weight-bold, 700); }
.font-extrabold { font-weight: var(--font-weight-extrabold, 800); }

/* Line Heights */
.leading-tight { line-height: var(--line-height-tight, 1.25); }
.leading-normal { line-height: var(--line-height-normal, 1.5); }
.leading-relaxed { line-height: var(--line-height-relaxed, 1.625); }

/* Spacing */
.p-xs { padding: var(--spacing-xs, 4px); }
.p-sm { padding: var(--spacing-sm, 8px); }
.p-md { padding: var(--spacing-md, 16px); }
.p-lg { padding: var(--spacing-lg, 24px); }
.p-xl { padding: var(--spacing-xl, 32px); }
.p-2xl { padding: var(--spacing-2xl, 48px); }
.p-3xl { padding: var(--spacing-3xl, 64px); }

.m-xs { margin: var(--spacing-xs, 4px); }
.m-sm { margin: var(--spacing-sm, 8px); }
.m-md { margin: var(--spacing-md, 16px); }
.m-lg { margin: var(--spacing-lg, 24px); }
.m-xl { margin: var(--spacing-xl, 32px); }
.m-2xl { margin: var(--spacing-2xl, 48px); }
.m-3xl { margin: var(--spacing-3xl, 64px); }

/* Border Radius */
.rounded-sm { border-radius: var(--border-radius-sm, 4px); }
.rounded-md { border-radius: var(--border-radius-md, 8px); }
.rounded-lg { border-radius: var(--border-radius-lg, 12px); }
.rounded-xl { border-radius: var(--border-radius-xl, 16px); }

/* Animations */
.transition-fast { transition-duration: var(--animation-duration-fast, 150ms); }
.transition-normal { transition-duration: var(--animation-duration-normal, 300ms); }
.transition-slow { transition-duration: var(--animation-duration-slow, 500ms); }
.transition-all { transition: var(--transition-all, all 0.3s ease); }

/* Hover Effects */
.hover-scale:hover { transform: scale(var(--hover-scale, 1.05)); }