/* Theme Variables System */
:root {
  /* Light Theme (Default) */
  --bg-primary: #F9FAFB;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --text-primary: #1a1a2e;
  --text-secondary: #666666;
  --text-muted: #999999;
  --accent-color: #4986b1;
  --accent-hover: #3a6b8f;
  --border-color: #e0e0e0;
  --border-hover: #cccccc;
  --shadow-light: 0 2px 10px rgba(0,0,0,0.1);
  --shadow-medium: 0 4px 20px rgba(0,0,0,0.15);
  --shadow-heavy: 0 8px 30px rgba(0,0,0,0.2);
  --overlay: rgba(0, 0, 0, 0.5);
  --selection-bg: #4986b1;
  --selection-text: #ffffff;
  --footer-bg: #265269;
  --footer-text: #1a1a2e;
  --modal-bg: #ffffff;
  --modal-text: #1a1a2e;
  --modal-border: #e0e0e0;
  --card-bg: #17a2b812;
  --card-shadow: 0 2px 10px rgba(0,0,0,0.1);
  --input-bg: #ffffff;
  --input-border: #e0e0e0;
  --input-focus: #4986b1;
  --button-primary: #4986b1;
  --button-primary-hover: #3a6b8f;
  --button-secondary: #6c757d;
  --button-secondary-hover: #5a6268;
  --gradient-primary: linear-gradient(135deg, #4986b1, #2dd4bf);
  --gradient-secondary: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

[data-theme="dark"] {
  /* Dark Theme */
  --bg-primary: #000000;
  --bg-secondary: #191919;
  --bg-tertiary: #2d2d2d;
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
  --text-muted: #999999;
  --accent-color: #4986b1;
  --accent-hover: #5a9bc4;
  --border-color: #333333;
  --border-hover: #555555;
  --shadow-light: 0 2px 10px rgba(255,255,255,0.1);
  --shadow-medium: 0 4px 20px rgba(255,255,255,0.15);
  --shadow-heavy: 0 8px 30px rgba(255,255,255,0.2);
  --overlay: rgba(0, 0, 0, 0.7);
  --selection-bg: #4986b1;
  --selection-text: #ffffff;
  --footer-bg: #191919;
  --footer-text: #ffffff;
  --modal-bg: #1a1a1a;
  --modal-text: #ffffff;
  --modal-border: #333333;
  --card-bg: #1a1a1a;
  --card-shadow: 0 2px 10px rgba(255,255,255,0.1);
  --input-bg: #2d2d2d;
  --input-border: #333333;
  --input-focus: #4986b1;
  --button-primary: #4986b1;
  --button-primary-hover: #5a9bc4;
  --button-secondary: #6c757d;
  --button-secondary-hover: #5a6268;
  --gradient-primary: linear-gradient(135deg, #4986b1, #2dd4bf);
  --gradient-secondary: linear-gradient(135deg, #191919, #2d2d2d);
}

/* Theme Toggle Button */
.theme-toggle-btn {
  background: none;
  border: 2px solid var(--border-color);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  margin-left: 10px;
  position: relative;
  z-index: 1000;
  outline: none;
  text-decoration: none;
}

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

.theme-toggle-btn:active {
  transform: scale(0.95);
  background: var(--accent-hover);
}

.theme-toggle-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(73, 134, 177, 0.3);
}

.theme-toggle-btn:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

/* Smooth transitions for theme switching */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Override transitions for specific elements that shouldn't transition */
.theme-toggle-btn,
.theme-toggle-btn *,
.animated,
.animate,
[class*="animate-"],
[class*="transition-"] {
  transition: none !important;
}

/* Theme-specific utility classes */
.bg-theme-primary { background-color: var(--bg-primary) !important; }
.bg-theme-secondary { background-color: var(--bg-secondary) !important; }
.bg-theme-tertiary { background-color: var(--bg-tertiary) !important; }
.text-theme-primary { color: var(--text-primary) !important; }
.text-theme-secondary { color: var(--text-secondary) !important; }
.text-theme-muted { color: var(--text-muted) !important; }
.border-theme { border-color: var(--border-color) !important; }
.shadow-theme { box-shadow: var(--shadow-light) !important; }
.shadow-theme-medium { box-shadow: var(--shadow-medium) !important; }
.shadow-theme-heavy { box-shadow: var(--shadow-heavy) !important; }

/* Card styles for light theme */
:root .card,
:root .member-card,
:root .stat-card,
:root .timeline-card,
:root .info-card,
:root .testimonial-card,
:root .item-card,
:root .accreditation-card,
:root .certificate-card,
:root .vision-card,
:root .mission-card,
:root .director-card {
  background-color: var(--card-bg) !important;
}

/* Force footer background color for light theme */
:root .unslate_co--footer {
  background-color: #265269 !important;
}

/* Additional specific footer rules */
body:not([data-theme="dark"]) .unslate_co--footer {
  background-color: #265269 !important;
}

.unslate_co--footer.unslate_co--section {
  background-color: #265269 !important;
}

/* Dark theme footer should be dark gray */
[data-theme="dark"] .unslate_co--footer.unslate_co--section {
  background-color: #191919 !important;
}