/**
 * Theme Transitions CSS for Sharing Digital Kommunity (SDK)
 *
 * Smooth transitions between dark and light themes
 */

/* Apply transitions to all elements that change with theme */
html {
    transition: background-color 0.5s ease, color 0.5s ease;
}

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

/* Layout components */
.app-container, 
.app-wrapper,
.main-content,
.sidebar,
.top-bar,
.footer {
    transition: 
        background-color 0.5s ease, 
        color 0.5s ease, 
        border-color 0.5s ease,
        box-shadow 0.5s ease;
}

/* Cards and content containers */
.card,
.course-card,
.auth-welcome-screen,
.auth-login-screen,
.auth-register-screen,
.bg-dark-surface,
.bg-dark-surface2,
.hero,
.hero-content,
.hero-background,
.hero-overlay {
    transition: 
        background-color 0.5s ease, 
        color 0.5s ease, 
        border-color 0.5s ease,
        box-shadow 0.5s ease;
}

/* Text elements */
h1, h2, h3, h4, h5, h6,
p, span, a, button,
.text-white,
.text-gray-400,
.text-gray-500,
.text-gray-600,
.text-primary-400,
.section-title,
.section-title-icon,
.card-title,
.hero-title,
.hero-subtitle {
    transition: color 0.5s ease;
}

/* Form elements */
input, select, textarea,
.search-field,
.filter-dropdown {
    transition: 
        background-color 0.5s ease, 
        color 0.5s ease, 
        border-color 0.5s ease,
        box-shadow 0.5s ease;
}

/* Buttons and interactive elements */
.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.close-modal,
.sidebar-toggle,
.mobile-menu-toggle,
.theme-toggle-button,
.language-dropdown-button,
.course-action-btn {
    transition: 
        background-color 0.5s ease, 
        color 0.5s ease, 
        border-color 0.5s ease,
        box-shadow 0.5s ease;
}

/* Icons */
.category-icon,
.lock-icon,
.free-icon {
    transition: 
        background-color 0.5s ease, 
        color 0.5s ease;
}

/* Borders */
.border-gray-700,
.border-gray-800 {
    transition: border-color 0.5s ease;
}

/* Modal overlay */
.bg-slate-900.bg-opacity-75 {
    transition: background-color 0.5s ease;
}

/* Course card specific transitions */
.course-card .card-overlay {
    transition: background 0.5s ease;
}

.course-card .card-footer a {
    transition: color 0.5s ease;
}

/* Dropdown menus */
.language-dropdown-content,
.language-option {
    transition: 
        background-color 0.5s ease, 
        color 0.5s ease;
}

/* Sidebar menu items */
.sidebar-menu-item {
    transition: 
        background-color 0.5s ease, 
        color 0.5s ease, 
        border-color 0.5s ease;
}

/* Footer elements */
footer {
    transition: background-color 0.5s ease;
}