/* Smooth transitions for theme change */
html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Transitions for specific elements */
nav {
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

.gradient-bg {
  transition: background 0.3s ease;
}

/* Improvements for the theme button */
#theme-toggle,
#theme-toggle-mobile {
  transition: all 0.2s ease;
}

#theme-toggle:hover,
#theme-toggle-mobile:hover {
  transform: scale(1.1);
}

#theme-toggle:active,
#theme-toggle-mobile:active {
  transform: scale(0.95);
}

/* Transitions for icons */
#icon-sun,
#icon-moon,
#icon-sun-mobile,
#icon-moon-mobile {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Show/hide icons according to the theme */
.dark #icon-sun,
.dark #icon-sun-mobile {
  display: none;
}

.dark #icon-moon,
.dark #icon-moon-mobile {
  display: block;
}

html:not(.dark) #icon-moon,
html:not(.dark) #icon-moon-mobile {
  display: none;
}

html:not(.dark) #icon-sun,
html:not(.dark) #icon-sun-mobile {
  display: block;
}

/* Styles for dark mode */
@media (prefers-color-scheme: dark) {
  html:not(.light) {
    color-scheme: dark;
  }
}

/* CSS variables for custom themes */
:root {
  --theme-transition: all 0.3s ease;
}

.dark {
  color-scheme: dark;
}

/* Ensure that transitions apply to all relevant elements */
* {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Exceptions for elements that don't need transition */
*:focus,
*:hover,
button:active,
input,
textarea,
select {
  transition: all 0.2s ease;
}