/* Dark mode transition */
html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Theme toggle button styles */
.theme-toggle {
  transition: all 0.3s ease;
}

.theme-toggle:hover {
  transform: rotate(30deg);
}

/* Explicit icon visibility control */
.moon-icon {
  display: inline-block;
}

.sun-icon {
  display: none;
}

.dark .moon-icon {
  display: none;
}

.dark .sun-icon {
  display: inline-block;
}
/* Theme variables */
:root {
  /* Light theme colors */
  --color-primary: #3b82f6;
  --color-primary-dark: #2563eb;
  --color-text: #1f2937;
  --color-bg: #ffffff;
  --color-nav-bg: rgba(255, 255, 255, 0.85);
  --color-border: #e5e7eb;
  --color-card-bg: #f9fafb;
  
  /* Dark theme colors */
  --color-text-dark: #f3f4f6;
  --color-bg-dark: #111827;
  --color-nav-bg-dark: rgba(17, 24, 39, 0.85);
  --color-border-dark: #374151;
  --color-card-bg-dark: #1f2937;
}

/* Dark theme class */
.dark {
  --color-primary: var(--color-primary-dark);
  --color-text: var(--color-text-dark);
  --color-bg: var(--color-bg-dark);
  --color-nav-bg: var(--color-nav-bg-dark);
  --color-border: var(--color-border-dark);
  --color-card-bg: var(--color-card-bg-dark);
}

/* Base styles */
body {
  color: var(--color-text);
  background-color: var(--color-bg);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Component-specific styles */
.glass-nav {
  background-color: var(--color-nav-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bg-white {
  background-color: var(--color-card-bg);
}

.border-gray-200 {
  border-color: var(--color-border);
}

/* Theme toggle button styles */
.theme-toggle {
  transition: all 0.3s ease;
}

.theme-toggle:hover {
  transform: scale(1.1);
}

.moon-icon, .sun-icon {
  transition: opacity 0.3s ease;
}