/* Preload styles to prevent theme flash */
:root {
  &[data-bs-theme=dark] {
    color-scheme: dark;
    --bs-body-color: #fff;
    --bs-body-bg: #181818;
  }
  
  &[data-bs-theme=light] {
    color-scheme: light;
    --bs-body-color: #000;
    --bs-body-bg: #fff;
  }
}

/* Ensure smooth transition when switching themes */
html {
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Prevent flicker on elements that change color with theme */
body, p, h1, h2, h3, h4, h5, h6, a {
  transition: color 0.2s ease-in-out;
}

/* Applied during theme changes to ensure smooth transitions */
html.theme-transition,
html.theme-transition *,
html.theme-transition *:before,
html.theme-transition *:after {
  transition: all 0s !important;
  -webkit-transition: all 0s !important;
}

/* Specific auto mode handling - prevents flash when system preference changes */
html[data-theme-auto="true"] {
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}