/**
 * Theme Transition Utilities
 *
 * Smooth transitions when switching between light/dark themes.
 * Respects prefers-reduced-motion for accessibility.
 */

@layer utilities {
    /**
     * Theme Transition Class
     *
     * Applied to :root during theme changes for smooth color transitions.
     * Automatically disabled when user prefers reduced motion.
     */
    :root {
        /* Smooth transitions for theme changes */
        transition:
            background-color var(--transition-base),
            color var(--transition-base),
            border-color var(--transition-base);
    }

    /* Apply transitions to all elements during theme change */
    * {
        transition:
            background-color var(--transition-base),
            color var(--transition-base),
            border-color var(--transition-base),
            box-shadow var(--transition-base);
    }

    /* Respect reduced motion preference */
    @media (prefers-reduced-motion: reduce) {
        :root,
        * {
            transition: none !important;
        }
    }

    /**
     * Theme Loading State
     *
     * Prevent FOUC (Flash of Unstyled Content) during initial theme load.
     * REMOVED: visibility hidden rule - causes blank page if data-theme is not set
     */
    /* html:not([data-theme]) {
        visibility: hidden;
    }

    html[data-theme] {
        visibility: visible;
    } */

    /**
     * Theme Toggle Animation
     *
     * Icon rotation when toggling theme.
     */
    [data-theme-toggle] svg {
        transition: transform var(--transition-base);
    }

    [data-theme-toggle]:hover svg {
        transform: rotate(20deg);
    }

    /**
     * Dark Mode Specific Optimizations
     */
    [data-theme="dark"] {
        /* Reduce brightness for dark mode images */
        img:not([data-no-dark-mode-filter]) {
            filter: brightness(0.9) contrast(1.1);
        }

        /* Invert logos/icons if needed */
        .admin-sidebar__logo {
            filter: brightness(1.2);
        }
    }

    /**
     * High Contrast Mode Theme Adjustments
     *
     * Ensure theme switching works in Windows High Contrast Mode.
     */
    @media (prefers-contrast: high) {
        [data-theme="dark"] {
            /* Increase contrast in forced colors mode */
            --bg-primary: oklch(10% 0 0);
            --content-text: oklch(100% 0 0);
        }

        [data-theme="light"] {
            /* Ensure maximum contrast */
            --bg-primary: oklch(100% 0 0);
            --content-text: oklch(0% 0 0);
        }
    }

    /**
     * Print Mode Override
     *
     * Always use light theme for printing.
     */
    @media print {
        :root,
        [data-theme] {
            /* Force light colors for printing */
            --bg-primary: oklch(100% 0 0);
            --content-bg: oklch(100% 0 0);
            --content-text: oklch(0% 0 0);
            --border-light: oklch(20% 0 0);

            /* Remove shadows for print */
            --shadow-sm: none;
            --shadow-md: none;
            --shadow-lg: none;
        }
    }
}