/* Theme System for Fragmentzal */
/* Dark and Light theme support with smooth transitions */

:root {
    /* Theme transition */
    --theme-transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    
    /* Dark Theme (Default) */
    --theme-bg-primary: #0f0f0f;
    --theme-bg-secondary: #1a1a1a;
    --theme-bg-tertiary: #262626;
    --theme-glass-bg: rgba(255, 255, 255, 0.08);
    --theme-glass-border: rgba(255, 255, 255, 0.12);
    --theme-glass-hover: rgba(255, 255, 255, 0.15);
    --theme-text-primary: #ffffff;
    --theme-text-secondary: rgba(255, 255, 255, 0.8);
    --theme-text-muted: rgba(255, 255, 255, 0.6);
    --theme-accent: #3b82f6;
    --theme-accent-secondary: #8b5cf6;
    --theme-success: #10b981;
    --theme-warning: #f59e0b;
    --theme-error: #ef4444;
    --theme-shadow: rgba(0, 0, 0, 0.5);
    --theme-shadow-light: rgba(0, 0, 0, 0.2);
    
    /* Glass effects */
    --glass-blur: blur(15px);
    --glass-blur-heavy: blur(25px);
    --glass-saturation: saturate(1.8);
}

/* Light Theme */
[data-theme="light"] {
    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #f8fafc;
    --theme-bg-tertiary: #f1f5f9;
    --theme-glass-bg: rgba(255, 255, 255, 0.25);
    --theme-glass-border: rgba(255, 255, 255, 0.18);
    --theme-glass-hover: rgba(255, 255, 255, 0.35);
    --theme-text-primary: #1e293b;
    --theme-text-secondary: #475569;
    --theme-text-muted: #64748b;
    --theme-accent: #3b82f6;
    --theme-accent-secondary: #8b5cf6;
    --theme-success: #059669;
    --theme-warning: #d97706;
    --theme-error: #dc2626;
    --theme-shadow: rgba(0, 0, 0, 0.15);
    --theme-shadow-light: rgba(0, 0, 0, 0.08);
    
    /* Усиленные glass эффекты для светлой темы */
    --glass-blur: blur(25px);
    --glass-blur-heavy: blur(40px);
    --glass-saturation: saturate(1.5);
}

/* Global styles using theme variables */
body {
    background: var(--theme-bg-primary);
    color: var(--theme-text-primary);
    transition: var(--theme-transition);
}

/* Theme Toggle Button */
.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    background: var(--theme-glass-bg);
    backdrop-filter: var(--glass-blur) var(--glass-saturation);
    border: 1px solid var(--theme-glass-border);
    border-radius: 50px;
    padding: 12px 16px;
    color: var(--theme-text-primary);
    cursor: pointer;
    transition: var(--theme-transition);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 8px 32px var(--theme-shadow-light);
}

.theme-toggle:hover {
    background: var(--theme-glass-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px var(--theme-shadow);
}

.theme-toggle .icon {
    font-size: 16px;
    transition: var(--theme-transition);
}

/* Updated Glass Components for Theme Support */
.glass-input, .glass-search-input {
    background: var(--theme-glass-bg) !important;
    backdrop-filter: var(--glass-blur) var(--glass-saturation) !important;
    border: 1px solid var(--theme-glass-border) !important;
    color: var(--theme-text-primary) !important;
    box-shadow: 0 8px 32px var(--theme-shadow-light) !important;
}

.glass-input::placeholder, .glass-search-input::placeholder {
    color: var(--theme-text-muted) !important;
}

.glass-input:focus, .glass-search-input:focus {
    background: var(--theme-glass-hover) !important;
    border-color: var(--theme-accent) !important;
    box-shadow: 0 12px 40px var(--theme-shadow), 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.glass-select {
    background: var(--theme-glass-bg) !important;
    backdrop-filter: var(--glass-blur) var(--glass-saturation) !important;
    border: 1px solid var(--theme-glass-border) !important;
    color: var(--theme-text-primary) !important;
    box-shadow: 0 8px 32px var(--theme-shadow-light) !important;
}

.glass-select:hover {
    background: var(--theme-glass-hover) !important;
    border-color: var(--theme-glass-border) !important;
}

.glass-dropdown {
    background: var(--theme-glass-bg) !important;
    backdrop-filter: var(--glass-blur-heavy) var(--glass-saturation) !important;
    border: 1px solid var(--theme-glass-border) !important;
    box-shadow: 0 20px 60px var(--theme-shadow) !important;
}

.glass-dropdown-item {
    color: var(--theme-text-primary) !important;
}

.glass-dropdown-item:hover {
    background: var(--theme-glass-hover) !important;
}

.glass-dropdown-item.selected {
    background: var(--theme-accent) !important;
    color: white !important;
}

.glass-button, .btn-glass {
    background: var(--theme-glass-bg) !important;
    backdrop-filter: var(--glass-blur) var(--glass-saturation) !important;
    border: 1px solid var(--theme-glass-border) !important;
    color: var(--theme-text-primary) !important;
    box-shadow: 0 8px 32px var(--theme-shadow-light) !important;
}

.glass-button:hover, .btn-glass:hover {
    background: var(--theme-glass-hover) !important;
    box-shadow: 0 12px 40px var(--theme-shadow) !important;
    color: var(--theme-text-primary) !important;
}

/* Card Styles with Theme Support */
.modern-item-card {
    background: var(--theme-glass-bg) !important;
    backdrop-filter: var(--glass-blur) var(--glass-saturation) !important;
    border: 1px solid var(--theme-glass-border) !important;
    box-shadow: 0 8px 32px var(--theme-shadow-light) !important;
    transition: var(--theme-transition) !important;
}

.modern-item-card:hover {
    background: var(--theme-glass-hover) !important;
    box-shadow: 0 16px 50px var(--theme-shadow) !important;
}

.modern-item-card .item-name {
    color: var(--theme-text-primary) !important;
}

.modern-item-card .item-price {
    color: var(--theme-accent) !important;
}

.modern-item-card .item-info {
    color: var(--theme-text-secondary) !important;
}

/* Section Backgrounds */
.filters-section, .catalog-hero {
    background: var(--theme-glass-bg) !important;
    backdrop-filter: var(--glass-blur) var(--glass-saturation) !important;
    border: 1px solid var(--theme-glass-border) !important;
    box-shadow: 0 8px 32px var(--theme-shadow-light) !important;
}

.results-info {
    background: var(--theme-glass-bg) !important;
    backdrop-filter: var(--glass-blur) var(--glass-saturation) !important;
    border: 1px solid var(--theme-glass-border) !important;
    color: var(--theme-text-primary) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .theme-toggle {
        top: 10px;
        right: 10px;
        padding: 8px 12px;
        font-size: 12px;
    }
}

/* Усиленные glass эффекты для светлой темы */
[data-theme="light"] .glass-input,
[data-theme="light"] .glass-search-input,
[data-theme="light"] .glass-select,
[data-theme="light"] .glass-button,
[data-theme="light"] .glass-dropdown,
[data-theme="light"] .filters-section,
[data-theme="light"] .catalog-hero {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(30px) saturate(1.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

[data-theme="light"] .glass-input:hover,
[data-theme="light"] .glass-search-input:hover,
[data-theme="light"] .glass-select:hover,
[data-theme="light"] .glass-button:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}