/* =============================================
   Оформление сайта: две палитры (светлая и тёмная) и общий вид шапки, подвала
   и полосы урока. Подключается ПОСЛЕДНИМ в <head> (theme_lib.php::scbThemeHead),
   чтобы переопределять прежние стили.

   Страница, готовая к тёмной теме, помечает <html data-themeable>; тема лежит в
   <html data-theme="light|dark"> (выбор хранится в localStorage, js/theme.js).
   Остальные страницы всегда светлые: у них шапка и подвал в новом виде, а тёмная
   тема не включается и переключателя нет.
   ============================================= */

:root {
    --c-bg: #f5f7fb;            /* фон страницы */
    --c-surface: #ffffff;       /* карточки, шапка, поля */
    --c-surface-2: #eef1f8;     /* вторичные поверхности */
    --c-text: #1d2740;
    --c-muted: #5b6784;
    --c-border: #dfe4ef;
    --c-accent: #5568e0;        /* заливка кнопок */
    --c-accent-hover: #4557cc;
    --c-accent-text: #4455c8;   /* акцент как цвет текста и ссылок */
    --c-accent-soft: #eceffd;   /* мягкая заливка: чипы, активные блоки */
    --c-on-accent: #ffffff;     /* текст на заливке акцента */
    --c-danger: #b3261e;
    --c-shadow: 0 10px 30px rgba(29, 39, 64, 0.10);
    --c-footer-bg: #1d2740;
    --c-footer-text: #e6e9f2;
    --c-footer-muted: #aeb7cc;
    --c-radius: 8px;            /* единый радиус кнопок, полей и чипов */
    color-scheme: light;

    /* прежние переменные главной (css/index.css) — теперь производные от палитры */
    --landing-gradient: linear-gradient(135deg, var(--c-accent-text) 0%, var(--c-accent) 100%);
    --landing-text: var(--c-text);
    --landing-text-muted: var(--c-muted);
    --landing-bg: var(--c-bg);
    --landing-card-bg: var(--c-surface);
    --landing-card-border: var(--c-border);
    --landing-accent: var(--c-accent-text);
    --landing-accent-light: var(--c-accent-soft);
    --landing-shadow-lg: var(--c-shadow);
}

html[data-theme="dark"] {
    --c-bg: #11141d;
    --c-surface: #191e2b;
    --c-surface-2: #212839;
    --c-text: #e7eaf3;
    --c-muted: #98a3bd;
    --c-border: #2b3450;
    --c-accent: #4c5fdb;        /* заливка темнее, чем в светлой теме: белый текст на ней ≥ 4.5:1 */
    --c-accent-hover: #3d4fc9;
    --c-accent-text: #a3afff;
    --c-accent-soft: #232b4d;
    --c-on-accent: #ffffff;
    --c-danger: #ffb4ab;
    --c-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    --c-footer-bg: #0c0f16;
    --c-footer-text: #dfe3ee;
    --c-footer-muted: #9aa4bd;
    color-scheme: dark;
}

/* ---------- Страница ---------- */
html[data-themeable] body.u-body {
    background: var(--c-bg);
    color: var(--c-text);
}

/* ---------- Шапка: один вид на всех страницах ---------- */
.u-body header.u-header {
    background: var(--c-surface) !important;
    border-bottom: 1px solid var(--c-border);
    box-shadow: none;
}

.u-body .header-brand-name,
.u-body .lang-name,
.u-body .user-info a,
.u-body .logout-btn a {
    color: var(--c-text);
}

.u-body .header-brand:hover .header-brand-name {
    color: var(--c-accent-text);
}

.u-body .language-dropdown {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    box-shadow: var(--c-shadow);
}

.u-body .language-dropdown a {
    color: var(--c-text);
}

.u-body .language-dropdown a:hover {
    background: var(--c-surface-2);
}

/* Кнопки навигации — мягкие «чипы» акцентного цвета; при наведении заливаются */
.u-body .main-nav-panel .nav-btn {
    background: var(--c-accent-soft);
    color: var(--c-accent-text);
    border: 1px solid transparent;
    border-radius: var(--c-radius);
    transform: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.u-body .main-nav-panel .nav-btn:hover {
    background: var(--c-accent);
    color: var(--c-on-accent);
}

.u-body .main-nav-panel .nav-btn:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}

.u-body .main-nav-panel .nav-btn-disabled,
.u-body .main-nav-panel .nav-btn-disabled:hover {
    background: var(--c-surface-2) !important;
    color: var(--c-muted) !important;
}

/* Значок пользователя — чёрная картинка: в тёмной теме переворачивается в светлую */
html[data-theme="dark"] .u-body .user-icon {
    filter: invert(1);
}

/* ---------- Переключатель темы (только на страницах с data-themeable) ---------- */
.theme-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--c-border);
    border-radius: 50%;
    background: var(--c-surface-2);
    color: var(--c-text);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

html[data-themeable] .theme-toggle {
    display: inline-flex;
}

.theme-toggle:hover {
    border-color: var(--c-accent);
}

.theme-toggle:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
}

.theme-toggle .theme-icon-sun {
    display: none;
}

html[data-theme="dark"] .theme-toggle .theme-icon-sun {
    display: block;
}

html[data-theme="dark"] .theme-toggle .theme-icon-moon {
    display: none;
}

/* ---------- Подвал ---------- */
.u-body footer.u-footer {
    background: var(--c-footer-bg) !important;
    color: var(--c-footer-text);
}

.u-body footer.u-footer .u-btn-1,
.u-body footer.u-footer .u-btn-1:hover {
    background: var(--c-accent) !important;
    background-image: none !important;
    color: var(--c-on-accent) !important;
    border-radius: var(--c-radius) !important;
}

.u-body footer.u-footer .u-btn-1:hover {
    background: var(--c-accent-hover) !important;
}

/* Нижняя полоса с версией и ID, под подвалом */
.footer-userid {
    text-align: center;
    padding: 10px;
    font-size: 11px;
}

.u-body section.u-backlink,
.u-body .footer-userid,
.u-body .footer-version {
    background: var(--c-footer-bg) !important;
    color: var(--c-footer-muted) !important;
}

/* ---------- Статистика главной ---------- */
html[data-themeable] .u-body .landing-stats,
html[data-themeable] .landing-stats {
    background: var(--c-surface);
    border-top-color: var(--c-border);
}