/**
 * Dark Mode Transition Styles
 * Add this to your main CSS or include it separately
 */

/* Prevent flash of unstyled content (FOUC) */
html:not(.theme-transition),
html:not(.theme-transition) * {
    transition: none !important;
}

/* Smooth transitions after page load */
html.theme-transition,
html.theme-transition * {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Faster transitions for specific elements */
html.theme-transition button,
html.theme-transition input,
html.theme-transition select,
html.theme-transition textarea {
    transition-duration: 150ms;
}

/* No transition for images and media */
html.theme-transition img,
html.theme-transition video,
html.theme-transition canvas,
html.theme-transition svg {
    transition: none !important;
}

/* Preload dark mode to prevent flash */
@media (prefers-color-scheme: dark) {
    html:not(.light) {
        color-scheme: dark;
    }
}

@media (prefers-color-scheme: light) {
    html:not(.dark) {
        color-scheme: light;
    }
}