/* Theme CSS Variables and Styles */

:root {
    /* Default Light Theme Colors */
    --primary-color: #1976d2;
    --secondary-color: #dc004e;
    --background-color: #ffffff;
    --surface-color: #ffffff;
    --app-bar-color: #1976d2;
    --drawer-color: #ffffff;
    
    /* Typography */
    --font-primary: 'Roboto', sans-serif;
    --font-secondary: 'Roboto', sans-serif;
    --font-monospace: 'Roboto Mono', monospace;
    --font-size-base: 14px;
    --font-size-small: 12px;
    --font-size-large: 16px;
    
    /* Spacing */
    --spacing-small: 8px;
    --spacing-medium: 16px;
    --spacing-large: 24px;
    --spacing-xl: 32px;
    
    /* Border Radius */
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 12px;
    --border-radius-xl: 16px;
    
    /* Shadows */
    --shadow-light: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-medium: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    --shadow-heavy: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

/* Dark Theme Override */
[data-theme="dark"] {
    --primary-color: #776be7;
    --secondary-color: #ff6b9d;
    --background-color: #121212;
    --surface-color: #1e1e1e;
    --app-bar-color: #1e1e1e;
    --drawer-color: #1e1e1e;
}

/* Corporate Theme Override */
[data-theme="corporate"] {
    --primary-color: #003366;
    --secondary-color: #ff6600;
    --background-color: #f8f9fa;
    --surface-color: #ffffff;
    --app-bar-color: #003366;
    --drawer-color: #ffffff;
}

/* Ocean Theme Override */
[data-theme="ocean"] {
    --primary-color: #006064;
    --secondary-color: #ff7043;
    --background-color: #e0f2f1;
    --surface-color: #ffffff;
    --app-bar-color: #006064;
    --drawer-color: #ffffff;
}

/* Theme-specific component styles */
.mud-appbar {
    background-color: var(--app-bar-color) !important;
}

.mud-drawer {
    background-color: var(--drawer-color) !important;
}

.custom-logo {
    max-height: 40px;
    width: auto;
    object-fit: contain;
}

.brand-text {
    font-family: var(--font-primary);
    color: var(--primary-color);
    font-weight: 500;
}

/* Theme toggle button styles */
.theme-toggle-button {
    transition: all 0.3s ease;
}

.theme-toggle-button:hover {
    transform: scale(1.05);
}

/* Theme preview card styles */
.theme-preview-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
}

.theme-preview-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.theme-color-preview {
    display: flex;
    gap: 8px;
    margin: 8px 0;
}

.color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.color-swatch:hover {
    transform: scale(1.2);
}

/* Utility classes for theming */
.text-primary {
    color: var(--primary-color) !important;
}

.text-secondary {
    color: var(--secondary-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-secondary {
    background-color: var(--secondary-color) !important;
}

.bg-surface {
    background-color: var(--surface-color) !important;
}

/* Responsive design for theme controls */
@media (max-width: 768px) {
    .custom-logo {
        max-height: 32px;
    }
    
    .brand-text {
        font-size: 1.2rem;
    }
    
    .theme-color-preview {
        justify-content: center;
    }
}

/* Animation for theme transitions */
.theme-transition {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Focus styles for accessibility */
.theme-toggle-button:focus,
.color-swatch:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .theme-toggle-button,
    .theme-preview-card {
        display: none !important;
    }
}