/* ═══════════════════════════════════════════════════════════════════════
   Дизайн-токены курса «Вайб-кодинг» — единственный источник цвета.

   Зачем файл. До сентября 2026 палитра была скопирована в 84 страницы:
   правка цвета означала правку во всех. Теперь цвет живёт здесь, страницы
   только ссылаются. Отсюда же в будущем включается светлая тема — достаточно
   переопределить эти переменные, ничего не трогая в самих страницах.

   Правило: НЕ вписывать цвет в страницу. Нужен новый оттенок — добавить
   сюда с понятным именем и коротким пояснением, где он применяется.
   Описание системы — /design.md.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Поверхности: от самой дальней к самой ближней ─────────────────── */
  --page-bg:   #050D11;   /* фон страницы, глубже карточек */
  --bg:        #0B1C24;   /* карточка, основной слой контента */
  --panel:     #0F2430;   /* блок внутри карточки, поле ввода */
  --panel-2:   #102833;   /* наведение, вложенный блок */
  --code-bg:   #081821;   /* подложка блока кода */
  --term-bg:   #06141B;   /* подложка «терминала» в уроках */

  /* ── Текст ─────────────────────────────────────────────────────────── */
  --text:      #E3ECF7;   /* основной */
  --muted:     #9AA6B6;   /* подписи, второстепенное */
  --muted-2:   #6B7A88;   /* совсем тихое: комментарии в схемах и деревьях */
  --code-text: #C9D4DE;   /* текст внутри блока кода */
  --disabled:  #3A4751;   /* недоступный пункт */

  /* ── Линии ─────────────────────────────────────────────────────────── */
  --border:    #1C3A46;   /* рамки и разделители */
  --border-2:  #2A5364;   /* рамка при наведении, акцентная граница */

  /* ── Акцент бренда ─────────────────────────────────────────────────── */
  --neon:      #19F05A;   /* главное действие, успех, текущее состояние */
  --neon-rgb:  25, 240, 90;  /* для полупрозрачных: rgba(var(--neon-rgb), .12) */
  --neon-soft: #8CFFBE;   /* светлый край градиентов и подсветок */
  --on-neon:   #0B1C24;   /* текст поверх зелёного: кнопка, чип, значок */

  /* ── Состояния ─────────────────────────────────────────────────────── */
  --warn:      #FFBD2E;   /* предупреждение, «в процессе» */
  --crit:      #FF6B6B;   /* ошибка, опасное действие */
  --bad:       #FF6059;   /* «так делать не надо» в примерах уроков */
  --info:      #7FC7FF;   /* пояснение, аналогия, справка */
  --sky:       #5BC0EB;   /* второй акцент: метка категории на витрине,
                             «сейчас смотрим этот проект» в админке.
                             Не путать с --info: тот для пояснений и справки. */
  --hot:       #FF7A45;   /* акцент тура по Claude и плашек расписания */

  /* ── Основы для полупрозрачных подложек ────────────────────────────────
     Прозрачность задаётся на месте: rgba(var(--warn-rgb), .12).
     Нужны потому, что сама переменная цвета в rgba() не подставляется. */
  --bg-rgb:      11, 28, 36;
  --panel-rgb:   15, 36, 48;
  --border-rgb:  28, 58, 70;
  --warn-rgb:   255, 189, 46;
  --crit-rgb:   255, 107, 107;
  --info-rgb:   127, 199, 255;
  /* Метка типа проекта «внутри компании» — свой голубой, отличный от --info */
  --track-internal:     #6AB8FF;
  --track-internal-rgb: 106, 184, 255;
  --page-bg-rgb: 5, 13, 17;
  --panel-2-rgb: 16, 40, 51;
  --text-rgb:   227, 236, 247;
  --muted-rgb:  154, 166, 182;
  --bad-rgb:    255, 96, 89;
  --sky-rgb:     91, 192, 235;

  /* Подсветка «чуть светлее подложки»: наведение, полоса заголовка таблицы,
     тихий чип. В светлой теме тот же приём читается наоборот — «чуть темнее»,
     поэтому у имени пара. Пишется как rgba(var(--tint-rgb), .04). */
  --tint-rgb:   255, 255, 255;


  /* ── Текст на цветной плашке и второй уровень текста ────────────────────
     Оттенки под тёмную подложку: в светлой теме у них своя пара. */
  --text-hi:   #FFFFFF;   /* самый яркий: крупные числа, имя в меню */
  --text-2:    #C6D2E0;   /* второй уровень текста: пояснения, тело карточки */
  --ok-text:   #9FDBB1;   /* текст на зелёной плашке «получилось» */
  --crit-text: #FFB4B4;   /* текст на красной плашке «ошибка» */
  --info-text: #9FCFFF;   /* текст на голубой плашке «в работе» */
  --neon-deep: #0FC94C;   /* тёмный конец градиента на главной кнопке */

  /* ── Тень ───────────────────────────────────────────────────────────────
     Пишется как rgba(var(--shadow-rgb), calc(.4 * var(--shadow-k))).
     В светлой теме тень не просто меняет цвет, но и слабеет: чёрная тень
     той же густоты на белом выглядит грязным пятном. */
  --shadow-rgb: 0, 0, 0;
  --shadow-k:   1;

  /* ── Закругления: шесть тиров, от пуговицы до капсулы ───────────────────
     Жили в шаблоне хаба, из-за чего страницам вне его не доставались:
     расписание просило скругление восемь раз и получало квадрат (10.09). */
  --r-sm:      6px;    /* точки, кнопки-иконки */
  --r-input:   8px;    /* поля ввода, мелкие чипсы */
  --r-button:  10px;   /* обычные кнопки */
  --r-card:    14px;   /* карточки, секции */
  --r-card-lg: 16px;   /* крупные акцентные карточки */
  --r-pill:    999px;  /* капсулы, бейджи, тумблеры */
}

/* ═══════════════════════════════════════════════════════════════════════
   СВЕТЛОЕ ОФОРМЛЕНИЕ

   Включается признаком data-theme="light" на странице. Признак ставит
   маленький скрипт (hub/_theme_boot.html) — и только на страницах курса.
   Урок или этап модуля 7, где этого скрипта нет, остаётся тёмным при любых
   настройках браузера и системы: автоматического переключения тут нет.

   Значения подобраны расчётом контраста по всем сочетаниям «текст × поверхность»,
   порог 4,5. Разбор — в ПЛАН-СВЕТЛАЯ-ТЕМА.md, подшаг 10.1.
   ═══════════════════════════════════════════════════════════════════════ */

:root[data-theme="light"] {
  /* ── Поверхности ───────────────────────────────────────────────────── */
  --page-bg:   #F1F5F6;
  --bg:        #FFFFFF;
  --panel:     #F7FAFA;
  --panel-2:   #EAF1F3;
  /* Блоки кода и «терминала» остаются тёмными в обеих темах (решение 10.09) */
  --code-bg:   #081821;
  --term-bg:   #06141B;

  /* ── Текст ─────────────────────────────────────────────────────────── */
  --text:      #0E1F27;
  --muted:     #54677A;
  --muted-2:   #5F6D77;
  --code-text: #C9D4DE;   /* лежит на тёмной подложке кода — не меняется */
  --disabled:  #98A6B0;   /* намеренно тусклый: метка «пункт закрыт» */

  /* ── Линии ─────────────────────────────────────────────────────────── */
  --border:    #D9E3E7;
  --border-2:  #B4C6CE;

  /* ── Акцент бренда ─────────────────────────────────────────────────────
     Неон на белом даёт контраст 1,5 при норме 4,5 и не читается. Этот зелёный —
     самый светлый, который проходит разом три условия: текстом на бледной
     поверхности (5,8), под белым текстом кнопки (6,6) и на своей же
     16%-подложке (4,6) — так устроены вкладки в шапке. */
  --neon:      #106B2C;
  --neon-rgb:  16, 107, 44;
  --neon-soft: #2FA24E;
  --on-neon:   #FFFFFF;   /* на тёмно-зелёной кнопке текст обязан быть светлым */

  /* ── Состояния ─────────────────────────────────────────────────────── */
  --warn:      #8A5A12;
  --crit:      #C02718;
  --bad:       #B3261E;
  --info:      #1A6BA8;
  /* Оба затемнены до порога 4,5 на белом, на панели и на своей 10%-подложке.
     Оранжевый взят из тура по Claude — там эта пара уже была подобрана. */
  --sky:       #13729B;
  --hot:       #B4441A;

  /* ── Текст на цветной плашке и второй уровень текста ─────────────────── */
  --text-hi:   #071620;
  --text-2:    #2C3B47;
  --ok-text:   #106B2C;
  --crit-text: #A3241A;
  --info-text: #175E92;
  --neon-deep: #0A5423;

  /* ── Основы для полупрозрачных подложек ────────────────────────────── */
  --shadow-rgb:  14, 31, 39;
  --shadow-k:    0.28;

  --bg-rgb:      255, 255, 255;
  --panel-rgb:   247, 250, 250;
  --border-rgb:  217, 227, 231;
  --warn-rgb:    138, 90, 18;
  --crit-rgb:    192, 39, 24;
  --info-rgb:     26, 107, 168;
  --track-internal:     #1A6BA8;
  --track-internal-rgb:  26, 107, 168;
  --page-bg-rgb: 241, 245, 246;
  --panel-2-rgb: 234, 241, 243;
  --text-rgb:     14, 31, 39;
  --muted-rgb:    84, 103, 122;
  --bad-rgb:     179, 38, 30;
  --sky-rgb:      19, 114, 155;
  --tint-rgb:     14, 31, 39;
}

/* Островок тёмного. Раз подложка остаётся тёмной в обеих темах, палитра внутри
   неё тоже обязана остаться тёмной — иначе тёмный текст ляжет на тёмный фон.
   Так помечаются блоки кода и «терминалы» в уроках, а также всплывающие окна
   и тосты, которые нарисованы тёмными по замыслу: окно «Отличная работа»,
   тосты достижений и заявок, значок состояния заявки.

   ⚠️ Класс ставится на сам тёмный элемент, НЕ на строку вокруг него: иначе
   соседняя кнопка возьмёт тёмную палитру и побледнеет на светлом фоне.
   ⚠️ Здесь только переменные, без `color`. Элементы-островки задают свой цвет
   текста сами, а правило отсюда специфичнее и перебило бы его — тогда островок
   выглядел бы в двух темах по-разному, ровно чего мы и избегаем.
   ⚠️ Тот же список имён продублирован в css/slides-theme.css для уроков —
   там он навешивается на 40 селекторов сразу, а не по классу. Держать в паре. */
:root[data-theme="light"] .on-dark {
  --text:      #E3ECF7;
  --text-hi:   #FFFFFF;
  --text-2:    #C6D2E0;
  --muted:     #9AA6B6;
  --muted-rgb: 154, 166, 182;
  --muted-2:   #6B7A88;
  --disabled:  #3A4751;
  --border:    #1C3A46;
  --border-2:  #2A5364;
  --border-rgb: 28, 58, 70;
  --neon:      #19F05A;
  --neon-rgb:  25, 240, 90;
  --neon-soft: #8CFFBE;
  --on-neon:   #0B1C24;
  --warn:      #FFBD2E;
  --warn-rgb:  255, 189, 46;
  --crit:      #FF6B6B;
  --crit-rgb:  255, 107, 107;
  --bad:       #FF6059;
  --info:      #7FC7FF;
  --info-rgb:  127, 199, 255;
  --sky:       #5BC0EB;
  --sky-rgb:   91, 192, 235;
  --tint-rgb:  255, 255, 255;
  --hot:       #FF7A45;
  --bg:        #0B1C24;
  --bg-rgb:    11, 28, 36;
  --panel:     #0F2430;
  --panel-rgb: 15, 36, 48;
  --panel-2:   #102833;
  /* Тень внутри тёмного окна остаётся чёрной и полной густоты */
  --shadow-rgb: 0, 0, 0;
  --shadow-k:   1;
}