/* Jerome Bikes - Theme System */

/* Theme Variables */
:root {
  /* Light Theme Variables */
  --background-color: #f5f7fa;
  --surface-color: #ffffff;
  --surface-color-alt: #f0f2f5;
  --primary-color: #2e7d32;
  --primary-light: #60ad5e;
  --primary-dark: #005005;
  --secondary-color: #0277bd;
  --secondary-light: #58a5f0;
  --secondary-dark: #004c8c;
  --text-color: #212121;
  --text-color-secondary: #424242;
  --text-color-tertiary: #616161;
  --border-color: #e0e0e0;
  --success-color: #4caf50;
  --warning-color: #ff9800;
  --error-color: #f44336;
  --info-color: #2196f3;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --highlight-color: rgba(46, 125, 50, 0.1);
  --header-bg: #ffffff;
  --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --hover-opacity: 0.9;
  --transition-speed: 0.3s;
  --border-radius: 12px;
  --section-spacing: 4rem;
  --badge-bg: #f0f7f0;
  --badge-text: #2e7d32;
  
  /* Circuit page specific variables */
  --card-bg-color: #ffffff;
  --heading-color: #212121;
  --accent-color: #0277bd;
  --highlight-bg: rgba(0, 0, 0, 0.03);
  --tabs-bg: #f0f2f5;
  --hover-bg: rgba(0, 0, 0, 0.05);
}

/* Important: Apply to both html and body to ensure consistency */
[data-theme="dark"],
html[data-theme="dark"],
body[data-theme="dark"] {
  /* Dark Theme Variables */
  --background-color: #121212;
  --surface-color: #1e1e1e;
  --surface-color-alt: #2d2d2d;
  --primary-color: #60ad5e;
  --primary-light: #8ce088;
  --primary-dark: #2e7d32;
  --secondary-color: #58a5f0;
  --secondary-light: #8ad5f9;
  --secondary-dark: #0277bd;
  --text-color: #e0e0e0;
  --text-color-secondary: #b0b0b0;
  --text-color-tertiary: #757575;
  --border-color: #424242;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --highlight-color: rgba(96, 173, 94, 0.15);
  --header-bg: #1e1e1e;
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  --hover-opacity: 0.75;
  --badge-bg: #3a5a3a;
  --badge-text: #a5d6a7;
  
  /* Circuit page specific variables */
  --card-bg-color: #2d2d2d;
  --heading-color: #ffffff;
  --accent-color: #58a5f0;
  --highlight-bg: rgba(255, 255, 255, 0.05);
  --tabs-bg: #1e1e1e;
  --hover-bg: rgba(255, 255, 255, 0.05);
}

[data-theme="night-shift"],
html[data-theme="night-shift"],
body[data-theme="night-shift"] {
  /* Night Shift Theme Variables - Easier on the eyes at night */
  --background-color: #121a2b;
  --surface-color: #1a2639;
  --surface-color-alt: #263248;
  --primary-color: #4f9a57;
  --primary-light: #7cc17e;
  --primary-dark: #306b34;
  --secondary-color: #4d88b7;
  --secondary-light: #6ca8d9;
  --secondary-dark: #2a5980;
  --text-color: #d0d0e0;
  --text-color-secondary: #a0a0b0;
  --text-color-tertiary: #707080;
  --border-color: #2a354a;
  --shadow-color: rgba(0, 0, 0, 0.4);
  --highlight-color: rgba(79, 154, 87, 0.15);
  --header-bg: #1a2639;
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  --badge-bg: #304d36;
  --badge-text: #a5d6a7;
  
  /* Circuit page specific variables */
  --card-bg-color: #1f2c42;
  --heading-color: #e0e0ff;
  --accent-color: #6ca8d9;
  --highlight-bg: rgba(77, 136, 183, 0.1);
  --tabs-bg: #1a2639;
  --hover-bg: rgba(77, 136, 183, 0.1);
}

/* Theme Toggle Button Styles are in main-header.css */

/* Theme transition effect */
body, html {
  transition: background-color var(--transition-speed),
              color var(--transition-speed),
              border-color var(--transition-speed);
}