/* ══════════════════════════════════════════════
   ТОКЕНЫ ОФОРМЛЕНИЯ — единственный источник цвета
   ══════════════════════════════════════════════
   Подключается ПЕРВЫМ, до style.css и admin.css: те берут цвета
   только отсюда, поэтому светлая и тёмная темы описаны в одном месте,
   а не размазаны по пяти файлам.

   Тему выставляет инлайновый скрипт в <head> (см. _page_anim.html):
   он ставит на <html> атрибут data-theme="light" | "dark" ДО первой
   отрисовки. Поэтому здесь тёмная тема описана ровно один раз — под
   [data-theme="dark"] — и её значения не расходятся с копией в
   @media, как было бы при обычной схеме с двумя блоками.

   Именование:
     --bg-*      поверхности (страница, карточка, вдавленный блок)
     --text-*    текст по убыванию контраста
     --border*   линии
     --ok/warn/danger/info-{bg,fg,line}  статусные тройки
     --on-dark-* текст на тёмных подложках (шапка, обложка курса) —
                 они тёмные в ОБЕИХ темах, поэтому вынесены отдельно.
*/

:root {
    color-scheme: light;

    /* ── Бренд ──
       Индиго + бирюза сохранены: это лицо платформы. Выровнены только
       оттенки — раньше рядом жили #4f46e5, #6c63ff и #667eea, которые
       читаются как три разных «фирменных» цвета. */
    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --primary-light: #818cf8;
    --primary-soft: #eef2ff;      /* подложка под акцентными блоками */
    --primary-softer: #f5f7ff;
    --primary-fg: #3730a3;        /* текст цвета бренда на светлом */
    --primary-link: #4f46e5;      /* ссылки: в тёмной теме светлее */
    /* Брендовый цвет ТЕКСТА и значков на поверхности. В светлой теме
       совпадает с --primary, в тёмной заметно светлее: индиго #6366f1
       на карточке #151c2c даёт контраст 3.8 — ниже нормы для мелкого
       текста. Заливки кнопок при этом остаются на --primary, иначе
       белая надпись на них перестала бы читаться. */
    --primary-ink: #4f46e5;

    --accent: #06b6d4;
    --accent-dark: #0891b2;
    --accent-soft: #ecfeff;
    /* Надпись на бирюзовой кнопке — тёмная, а не белая. Белый текст на
       #06b6d4 даёт контраст 2.43 (норма 4.5), и это главная кнопка
       действия на странице курса. Приглушать сам бирюзовый не стали:
       это фирменный цвет, а тёмная надпись сохраняет его яркость. */
    --text-on-accent: #04222f;

    /* ── Поверхности ── */
    --bg: #f5f7fa;                /* фон страницы */
    --bg-card: #ffffff;           /* карточки, панели */
    --bg-subtle: #f1f5f9;         /* чипы, вторичные плашки */
    --bg-inset: #f8fafc;          /* вдавленные блоки, шапки таблиц */
    --bg-hover: #f1f5f9;          /* наведение на строку списка */

    /* ── Текст ── */
    /* Три ступени контраста, и все три проходят норму AA на белой
       карточке (4.5:1). Прежний самый светлый оттенок (#94a3b8) давал
       2.4 — им набраны «5 уроков», «40 мин», подписи под числами, то
       есть вполне содержательный текст, а не украшение. */
    --text: #1b2435;              /* 14.6:1 */
    --text-light: #4d5c74;        /*  7.3:1 */
    --text-lighter: #64728a;      /*  4.9:1 */
    --text-on-brand: #ffffff;     /* на залитых кнопках */

    /* ── Линии ── */
    --border: #e3e8ef;
    --border-strong: #cbd5e1;

    /* ── Статусы ──
       Тройками bg/fg/line: раньше на каждый статус приходилось по
       4–5 близких оттенков (#d1fae5, #dcfce7, #f0fdf4, #ecfdf5),
       выбранных на глаз в разное время. */
    --success: #10b981;
    --ok-bg: #d1fae5;
    --ok-bg-soft: #f0fdf4;
    --ok-fg: #065f46;
    --ok-line: #86efac;

    --warning: #f59e0b;
    --warn-bg: #fef3c7;
    --warn-bg-soft: #fffbeb;
    --warn-fg: #92400e;
    --warn-line: #fcd34d;

    --danger: #ef4444;
    --danger-dark: #dc2626;
    /* Заливка красной кнопки. Отдельно от --danger намеренно: в тёмной
       теме --danger светлее (#f87171), потому что им набирают ТЕКСТ на
       тёмном фоне. Белая надпись на нём давала контраст 2.8 — кнопка
       «Удалить» читалась хуже обычной ссылки. */
    --danger-btn: #dc2626;
    --danger-bg: #fee2e2;
    --danger-bg-soft: #fef2f2;
    --danger-fg: #991b1b;
    --danger-line: #fecaca;

    --info: #3b82f6;
    --info-bg: #dbeafe;
    --info-bg-soft: #eff6ff;
    --info-fg: #1e40af;
    --info-line: #bfdbfe;

    --pink-bg: #fce7f3;
    --pink-fg: #be185d;
    --rose-bg: #ffe4e6;
    --rose-fg: #e11d48;

    /* Инлайновый код: розовый на светло-сером. На тёмной теме розовый
       приходится осветлять, иначе он проваливается в фон. */
    --code-inline-bg: #f1f5f9;
    --code-inline-fg: #e11d48;

    /* Заглушка обложки курса. Раньше здесь жил самостоятельный
       фиолетовый градиент (#667eea→#764ba2), не связанный с брендом:
       на одном экране с индиго-кнопками читался как чужой цвет. */
    --cover-grad-a: #6366f1;
    --cover-grad-b: #4338ca;

    /* ── Тёмные подложки ──
       Шапка сайта и обложка курса тёмные и в светлой теме. Раньше на
       них клали #cbd5e1/#94a3b8 напрямую, и в тёмной теме этот текст
       было не отличить от фона. */
    --nav-bg: #141b2d;
    --nav-bg-2: #1b2340;          /* градиентная пара для обложек */
    --on-dark: #ffffff;
    --on-dark-muted: #b9c4d8;
    --on-dark-dim: #8d9bb5;

    /* Статусы на тёмных подложках: панель редактора урока и обложка
       курса тёмные в ОБЕИХ темах, поэтому обычные --ok-fg / --danger-fg
       там не годятся — они рассчитаны на светлый фон и сливаются. */
    --on-dark-ok: #34d399;
    --on-dark-warn: #fbbf24;
    --on-dark-danger: #fca5a5;

    /* ── Тени ── */
    --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, .08), 0 4px 6px rgba(15, 23, 42, .04);
    --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, .10), 0 10px 10px -5px rgba(15, 23, 42, .04);

    /* ── Геометрия ── */
    --radius: 12px;
    --radius-sm: 8px;
    --transition: all .2s ease;
    /* Ширина текстовой колонки урока. Одна на просмотр и на визуальный
       редактор: если развести их, автор верстает по одной ширине, а
       студент видит другую — переносы строк и таблицы «поедут». */
    --content-width: 1100px;

    /* ── Совместимость ──
       Эти имена уже стояли в разметке и в admin.css, но нигде не были
       объявлены: var(--card-bg, #fff) молча брал запасное значение и
       поэтому не темнел. Оставляем их псевдонимами, чтобы старые места
       начали слушаться темы без правки каждого файла. */
    --card-bg: var(--bg-card);
    --input-bg: var(--bg-card);
    --bg-dark: var(--nav-bg);
}

/* ══════════════════════════════════════════════
   ТЁМНАЯ ТЕМА
   ══════════════════════════════════════════════
   Не инверсия светлой: фон уводится в холодный синий, а поверхности
   расходятся по светлоте (страница темнее карточки), иначе карточки
   на плоском чёрном не читаются как отдельные объекты.

   Статусные подложки здесь не пастельные, а полупрозрачные: пастель
   на тёмном фоне даёт «светящиеся» плашки, режущие глаз. */
:root[data-theme="dark"] {
    color-scheme: dark;

    /* Заливка кнопок. Чуть темнее светлотемного индиго намеренно: на
       ней лежит белая надпись, и #6366f1 давал контраст 4.47 — на волос
       ниже нормы. Для ТЕКСТА фирменного цвета есть --primary-ink. */
    --primary: #5a5ce8;
    --primary-dark: #4f46e5;
    --primary-light: #a5b4fc;
    --primary-soft: #1e2340;
    --primary-softer: #191d33;
    --primary-fg: #c7d2fe;
    --primary-link: #a5b4fc;
    --primary-ink: #a5b4fc;

    --accent: #22d3ee;
    --accent-dark: #06b6d4;
    --accent-soft: #12303a;
    --text-on-accent: #04222f;

    --bg: #0d1220;
    --bg-card: #151c2c;
    --bg-subtle: #1c2436;
    --bg-inset: #111827;
    --bg-hover: #1e273a;

    --text: #e6ebf5;
    --text-light: #9fadc6;
    --text-lighter: #8390aa;
    --text-on-brand: #ffffff;

    --border: #29334a;
    --border-strong: #3b4763;

    --success: #34d399;
    --ok-bg: #10331f;
    --ok-bg-soft: #0f2a1b;
    --ok-fg: #6ee7b7;
    --ok-line: #1c5b3a;

    --warning: #fbbf24;
    --warn-bg: #3a2a0c;
    --warn-bg-soft: #2e2209;
    --warn-fg: #fcd34d;
    --warn-line: #6b4c12;

    --danger: #f87171;
    --danger-dark: #ef4444;
    --danger-btn: #dc2626;
    --danger-bg: #3a1a1c;
    --danger-bg-soft: #2d1517;
    --danger-fg: #fca5a5;
    --danger-line: #6b2427;

    --info: #60a5fa;
    --info-bg: #14284a;
    --info-bg-soft: #10203c;
    --info-fg: #93c5fd;
    --info-line: #1e3a6b;

    --pink-bg: #3a1729;
    --pink-fg: #f9a8d4;
    --rose-bg: #3a1722;
    --rose-fg: #fda4af;

    --code-inline-bg: #1c2436;
    --code-inline-fg: #fda4af;

    --cover-grad-a: #4f46e5;
    --cover-grad-b: #312e81;

    /* Шапка чуть темнее карточек — иначе она сливается с содержимым
       и перестаёт читаться как отдельная полоса. */
    --nav-bg: #0a0f1b;
    --nav-bg-2: #141b30;
    --on-dark: #f1f5f9;
    --on-dark-muted: #a8b4ca;
    --on-dark-dim: #7d8ba5;

    /* На тёмном фоне тень почти не видна — работает подсветка границы,
       поэтому тени глубже, а не светлее. */
    --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-lg: 0 10px 20px -4px rgba(0, 0, 0, .55), 0 4px 8px rgba(0, 0, 0, .35);
    --shadow-xl: 0 24px 40px -8px rgba(0, 0, 0, .6), 0 10px 16px -6px rgba(0, 0, 0, .4);
}

/* Пока инлайновый скрипт не отработал (или JS отключён), ориентируемся
   на системную настройку хотя бы для служебных цветов формы и скролла —
   так страница не вспыхивает белым у тех, у кого система тёмная. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) { color-scheme: dark; }
}

/* Картинки и видео на тёмной теме бьют по глазам меньше, если снять
   у них пару процентов яркости. Изображения уроков и обложки — контент,
   поэтому трогаем только фон-декорации, не сам контент. */
:root[data-theme="dark"] img[src*="placeholder"],
:root[data-theme="dark"] .cover-placeholder-lg {
    filter: brightness(.9);
}