/* static/css/theme_switcher.css */

/* Общие переменные для тем */
:root {
    --background-color: white;
    --text-color: black;
    --logo-primary-color: #6699FF; /* Синий */
    --logo-secondary-color: black; /* Черный, который будет изменяться */
    
    /* Цвета для светлой темы */
    --hero-background-color-light: #4757F6; /* Цвет фона для светлой темы (как у .is-link) */
    --hero-text-color-light: white; /* Белый текст в светлой теме */
    
    /* Цвета для темной темы */
    --hero-background-color-dark: #1e1e1e; /* Цвет фона для темной темы */
    --hero-text-color-dark: #ffffff; /* Белый текст в темной теме */
}

/* При темной теме */
[data-theme="dark"] {
    --background-color: #121212;
    --text-color: white;
    --logo-secondary-color: white; /* Меняем черный на белый */
    
    /* Цвета для темной темы */
    --hero-background-color: var(--hero-background-color-dark);
    --hero-text-color: var(--hero-text-color-dark);
}

/* Применение переменных к элементам */
body {
    background-color: var(--background-color);
    color: var(--text-color);
}

.logo-svg .fil0 {
    fill: var(--logo-primary-color); /* Синий цвет остается */
}

.logo-svg .fil1 {
    fill: var(--logo-secondary-color); /* Черный цвет изменяется */
}

/* Кастомные стили для hero блока */
.hero-custom {
    background-color: var(--hero-background-color-light) !important; /* Фон для светлой темы */
    color: var(--hero-text-color-light) !important; /* Белый текст в светлой теме */
    padding: 3rem 1.5rem; /* Паддинги для hero */
}

/* Темная тема для hero блока */
[data-theme="dark"] .hero-custom {
    background-color: var(--hero-background-color) !important; /* Темный фон для темной темы */
    color: var(--hero-text-color) !important; /* Белый текст для темной темы */
}

/* Переопределение цвета текста для заголовков и подзаголовков */
.hero-custom .title,
.hero-custom .subtitle {
    color: var(--hero-text-color) !important; /* Белый текст */
}