/* ============================================
   CSS Variables & Material Design Tokens
   ============================================ */

:root {
    /* Цветовая система Material Design */
    --md-primary: #6200ee;
    --md-primary-light: #7c4dff;
    --md-primary-dark: #3700b3;
    --md-secondary: #03dac6;
    --md-secondary-light: #66fff2;
    --md-secondary-dark: #00a896;
    --md-error: #b00020;
    --md-error-light: #cf6679;
    --md-warning: #ff9800;
    --md-info: #2196f3;
    --md-success: #4caf50;
    
    /* Фоновые цвета */
    --md-background: #fafafa;
    --md-surface: #ffffff;
    --md-surface-variant: #f5f5f5;
    
    /* Текст */
    --md-on-primary: #ffffff;
    --md-on-secondary: #000000;
    --md-on-background: #1e1e1e;
    --md-on-surface: #1e1e1e;
    --md-on-error: #ffffff;
    
    /* Текст с прозрачностью */
    --md-text-primary: rgba(0, 0, 0, 0.87);
    --md-text-secondary: rgba(0, 0, 0, 0.6);
    --md-text-disabled: rgba(0, 0, 0, 0.38);
    
    /* Поля ввода (светлая тема) */
    --md-input-bg: #ffffff;
    --md-input-text: #1e1e1e;
    --md-input-border: #e0e0e0;
    --md-input-border-focus: #6200ee;
    --md-input-placeholder: #9e9e9e;
    --md-input-icon: #757575;
    
    /* Тени */
    --md-elevation-0: none;
    --md-elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --md-elevation-2: 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12);
    --md-elevation-3: 0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.10);
    --md-elevation-4: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    
    /* Анимации */
    --md-transition-duration: 0.2s;
    --md-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Размеры */
    --md-header-height-desktop: 72px;
    --md-header-height-mobile: 64px;
}

/* ============================================
   Dark Theme
   ============================================ */

[data-theme="dark"] {
    /* Фоновые цвета */
    --md-background: #121212;
    --md-surface: #1e1e1e;
    --md-surface-variant: #2c2c2c;
    
    /* Текст */
    --md-on-primary: #ffffff;
    --md-on-secondary: #000000;
    --md-on-background: #e0e0e0;
    --md-on-surface: #e0e0e0;
    
    /* Текст с прозрачностью */
    --md-text-primary: rgba(255, 255, 255, 0.87);
    --md-text-secondary: rgba(255, 255, 255, 0.6);
    --md-text-disabled: rgba(255, 255, 255, 0.38);
    
    /* Поля ввода (темная тема) */
    --md-input-bg: #2c2c2c;
    --md-input-text: #e0e0e0;
    --md-input-border: #404040;
    --md-input-border-focus: #bb86fc;
    --md-input-placeholder: #6e6e6e;
    --md-input-icon: #9e9e9e;
    
    /* Основной цвет для темной темы (более приглушенный) */
    --md-primary: #3700b3;
    --md-primary-light: #7c4dff;
    --md-primary-dark: #1a0066;
    
    /* Тени в темной теме */
    --md-elevation-1: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.24);
    --md-elevation-2: 0 3px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.36);
    --md-elevation-3: 0 10px 20px rgba(0,0,0,0.4), 0 3px 6px rgba(0,0,0,0.32);
    --md-elevation-4: 0 14px 28px rgba(0,0,0,0.5), 0 10px 10px rgba(0,0,0,0.4);
}

/* System preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --md-background: #121212;
        --md-surface: #1e1e1e;
        --md-surface-variant: #2c2c2c;
        --md-on-background: #e0e0e0;
        --md-on-surface: #e0e0e0;
        --md-text-primary: rgba(255, 255, 255, 0.87);
        --md-text-secondary: rgba(255, 255, 255, 0.6);
        --md-text-disabled: rgba(255, 255, 255, 0.38);
        --md-input-bg: #2c2c2c;
        --md-input-text: #e0e0e0;
        --md-input-border: #404040;
        --md-input-border-focus: #bb86fc;
        --md-input-placeholder: #6e6e6e;
        --md-input-icon: #9e9e9e;
        --md-primary: #3700b3;
    }
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}