/* =========================
   THEME LOADER
   Imports all theme files in correct order
   ========================= */

/* Base Light Theme (default) */
@import url('themes/base/light.css?v=20260503a');

/* Dark Mode */
@import url('themes/dark/dark.css?v=20260503a');

/* Seasonal Themes */
@import url('themes/seasonal/spring.css?v=20260503a');
@import url('themes/seasonal/summer.css?v=20260503a');
@import url('themes/seasonal/autumn.css?v=20260503a');
@import url('themes/seasonal/winter.css?v=20260503a');

/* Special Event Themes */
@import url('themes/events/black-friday.css?v=20260503a');
@import url('themes/events/christmas.css?v=20260503a');
@import url('themes/events/easter.css?v=20260503a');
@import url('themes/events/halloween.css?v=20260503a');

/* User Custom Themes (loaded dynamically) */
@import url('themes/custom/user-custom.css?v=20260503a');

/* =========================
   THEME UTILITIES
   ========================= */

/* Ensure theme variables override base variables */
:root[data-theme] {
    /* Force theme variables to take precedence */
}

/* Theme Transition */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

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

/* Layout Preferences */
[data-layout="grid"] .items-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
}

[data-layout="list"] .items-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

[data-layout="compact"] .items-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

/* Font Scaling */
[data-font-scale] {
    font-size: calc(1rem * var(--font-scale, 1));
}

/* Sidebar Position */
[data-sidebar="left"] .main-content {
    margin-left: 250px;
}

[data-sidebar="right"] .main-content {
    margin-right: 250px;
}

[data-sidebar="hidden"] .sidebar {
    display: none;
}