/* Dark Mode Styles */

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

/* Dark mode color variables */
body.dark-mode,
html.dark-mode-loading body {
  --black: #f5f5f5;
  --white: #1a1a1a;
  --gray: #2a2a2a;
}

/* Smooth transitions for all color changes */
body.dark-mode *,
html.dark-mode-loading body *,
body *  {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Dark mode toggle button styling */
.dark-mode-toggle {
  cursor: pointer;
  user-select: none;
}

.dark-mode-toggle-slot {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.dark-mode-toggle:hover .title {
  opacity: 0.7;
}

/* Prevent underline from showing on dark mode toggle */
.dark-mode-toggle .small-button-underline {
  display: none !important;
}

/* Adjust image blend modes for dark mode */
body.dark-mode .image-container,
html.dark-mode-loading body .image-container {
  mix-blend-mode: lighten;
}

body.dark-mode .image-container.red-back,
html.dark-mode-loading body .image-container.red-back {
  mix-blend-mode: normal;
}

/* Invert desktop grid images for dark mode */
body.dark-mode .desktop-grid,
body.dark-mode .tablet-grid,
body.dark-mode .phone-grid,
html.dark-mode-loading body .desktop-grid,
html.dark-mode-loading body .tablet-grid,
html.dark-mode-loading body .phone-grid {
  opacity: 0.15;
  filter: invert(1);
}