/* ============================================
   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-outline-variant: #dadce0;
    --md-outline: #dadce0;

    /* Текст */
    --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.1);
    --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-outline-variant: #404040;
    --md-outline: #404040;

    /* Текст */
    --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;
    }
}