/* Dark Mode Styles */
body.dark-mode {
  --background: #0f172a;
  --foreground: #f8fafc;
  --card: #1e293b;
  --card-foreground: #f8fafc;
  --primary: #3b82f6;
  --primary-foreground: #ffffff;
  --secondary: #1e293b;
  --secondary-foreground: #f8fafc;
  --muted: #1e293b;
  --muted-foreground: #94a3b8;
  --accent: #1e293b;
  --accent-foreground: #f8fafc;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --border: #334155;
  --input: #334155;
  --ring: #3b82f6;
}

/* Theme Toggle */
#theme-toggle {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

#theme-toggle:hover {
  background-color: var(--secondary);
}

.light-icon,
.dark-icon {
  position: absolute;
  transition: all 0.3s ease;
}

body:not(.dark-mode) .light-icon {
  opacity: 0;
  transform: rotate(-90deg) scale(0);
}

body:not(.dark-mode) .dark-icon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

body.dark-mode .light-icon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

body.dark-mode .dark-icon {
  opacity: 0;
  transform: rotate(90deg) scale(0);
}