/* Светлая тема (по умолчанию) */
:root {
    /* Основные цвета */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-blue-dark: #2c3e50;
    --color-blue-medium: #34495e;
    --color-blue-light: #1a5276;
    --color-red-dark: #922b21;
    --color-orange: orange;
    --color-green: #68d391;
    
    /* Серые оттенки */
    --color-gray-light: #ecf0f1;
    --color-gray-border: #bdc3c7;
    --color-gray-medium: #f5f5f5;
    --color-gray-dark: #444;
    --color-gray-disabled: #eee;
    
    /* Семантические цвета */
    --color-bg: var(--color-gray-medium);
    --color-bg-light: var(--color-white);
    --color-bg-secondary: var(--color-gray-light);
    --color-header: var(--color-blue-dark);
    --color-footer: var(--color-blue-medium);
    --color-primary: var(--color-blue-light);
    --color-primary-hover: #154360;
    --color-secondary: var(--color-red-dark);
    --color-secondary-hover: #7b241c;
    --color-warning: var(--color-orange);
    --color-success: #68d391;
    --color-slider: var(--color-green);
    --color-slider-border: #2d3748;
    --color-slider-track: #4a5568;
    
    /* Текст */
    --color-text: var(--color-black);
    --color-text-light: var(--color-white);
    --color-text-primary: var(--color-blue-dark);
    --color-text-secondary: #666;
    --color-text-muted: #aaa;
    --color-text-muted-dark: #999;
    
    /* Границы */
    --color-border: #ddd;
    --color-border-light: #f0f0f0;
    --color-border-dark: var(--color-blue-dark);
    --color-border-secondary: var(--color-gray-border);
    
    /* Состояния */
    --color-hover: #f5f5f5;
    --color-hover-light: rgba(255, 255, 255, 0.1);
    --color-focus: #eee;
    --color-disabled: var(--color-gray-disabled);
    --color-disabled-text: #ccc;
    
    /* Ссылки */
    --color-link: var(--color-blue-light);
    --color-link-hover: var(--color-black);
    
    /* Тени */
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.2);
    --shadow-dark: rgba(0, 0, 0, 0.5);
    
    /* Блик */
    --shine-color: rgba(128, 128, 128, 0.3);
    --shine-highlight: rgba(160, 160, 160, 0.4);

    /* Загрузчик ключей */
    --color-bg-loader-key: rgba(255, 255, 255, 0.95);
    --ssl-loader-log: rgba(0, 0, 0, 0.05);
    --ssl-log-time-color: var(--color-text-muted);
    --ssl-log-bg-item: var(--color-bg-light);

    /* Алерт */
    
}

/* Темная тема */
[data-theme="dark"] {
    --color-bg: #1a1a1a;
    --color-bg-light: #3d3d3d;
    --color-bg-secondary: #2d2d2d;
    --color-header: var(--color-blue-dark);
    --color-footer: var(--color-blue-medium);
    --color-primary: var(--color-blue-light);
    --color-primary-hover: #154360;
    --color-secondary: var(--color-red-dark);
    --color-secondary-hover: #7b241c;
    --color-warning: #ff9800;
    --color-slider: var(--color-green);
    --color-slider-border: #2d3748;
    --color-slider-track: #4a5568;
    
    --color-text: var(--color-white);
    --color-text-light: var(--color-white);
    --color-text-primary: var(--color-white);
    --color-text-secondary: #e0e0e0;
    --color-text-muted: #aaa;
    --color-text-muted-dark: #aaa;
    
    --color-border: #555;
    --color-border-light: #444;
    --color-border-dark: var(--color-blue-dark);
    --color-border-secondary: #444;
    
    --color-hover: #3d3d3d;
    --color-hover-light: rgba(255, 255, 255, 0.15);
    --color-focus: rgba(255, 255, 255, 0.1);
    --color-disabled: #444;
    --color-disabled-text: #666;
    
    --color-link: #4dabf7;
    --color-link-hover: #74c0fc;
    
    --shadow-light: rgba(0, 0, 0, 0.3);
    --shadow-medium: rgba(0, 0, 0, 0.5);
    --shadow-dark: rgba(0, 0, 0, 0.5);
    
    --shine-color: rgba(180, 180, 180, 0.2);
    --shine-highlight: rgba(200, 200, 200, 0.3);

    --color-bg-loader-key: rgba(26, 26, 26, 0.95);
    --ssl-loader-log: rgba(255, 255, 255, 0.05);
    --ssl-log-time-color: var(--color-text-muted);
    --ssl-log-bg-item: rgba(255, 255, 255, 0.05);
}

/* Автоматическое переключение темной темы */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: #1a1a1a;
        --color-bg-light: #3d3d3d;
        --color-bg-secondary: #2d2d2d;
        --color-header: var(--color-blue-dark);
        --color-footer: var(--color-blue-medium);
        --color-primary: var(--color-blue-light);
        --color-primary-hover: #154360;
        --color-secondary: var(--color-red-dark);
        --color-secondary-hover: #7b241c;
        --color-warning: #ff9800;
        --color-slider: var(--color-green);
        --color-slider-border: #2d3748;
        --color-slider-track: #4a5568;
        
        --color-text: var(--color-white);
        --color-text-light: var(--color-white);
        --color-text-primary: var(--color-white);
        --color-text-secondary: #e0e0e0;
        --color-text-muted: #aaa;
        --color-text-muted-dark: #aaa;
        
        --color-border: #555;
        --color-border-light: #444;
        --color-border-dark: var(--color-blue-dark);
        --color-border-secondary: #444;
        
        --color-hover: #3d3d3d;
        --color-hover-light: rgba(255, 255, 255, 0.15);
        --color-focus: rgba(255, 255, 255, 0.1);
        --color-disabled: #444;
        --color-disabled-text: #666;
        
        --color-link: #4dabf7;
        --color-link-hover: #74c0fc;
        
        --shadow-light: rgba(0, 0, 0, 0.3);
        --shadow-medium: rgba(0, 0, 0, 0.5);
        --shadow-dark: rgba(0, 0, 0, 0.5);
        
        --shine-color: rgba(180, 180, 180, 0.2);
        --shine-highlight: rgba(200, 200, 200, 0.3);
    }
}