/* ============================================================
   theme.css — СЛОЙ ТЕМЫ (design tokens) · Пульс
   ФИНАЛЬНЫЙ БРЕНД (утверждён владельцем). Имя — «Пульс», знак — сигнал-пинг/
   радар (концепция 2). Палитра — направление «Пульс» (территория Г, ум/данные)
   из `docs/planning/branding/04-palettes.md`: нейтральный тёмный экран +
   тёплый амбер→коралловый «сигнал/импульс». Дальше в гамме — тёплый камень/
   алебастр (не холодный техно-серый), чтобы бренд оставался «бизнес,
   прощупанный в реальном времени», а не абстрактный холодный «ИИ»-стартап.

   Почему для ЦА (владельцы/директора СПА, не айтишники): чистый нейтральный
   тёмный фон (#121212, «экран монитора») читается как приборная панель/пульт
   мониторинга их бизнеса — а не бухгалтерская таблица. Амбер→коралл — цвет
   именно «сигнала» (пульс, вспышка на графике, живой показатель), не игрушечный
   и не холодно-синий (синий = типовой SaaS, этого сознательно избегали на всех
   этапах нейминга). Тёплый камень/алебастр в светлой теме и тёплый айвори текста
   в тёмной — не дают гамме съехать в «холодный дашборд», сохраняя тёплый,
   человеческий характер поверх технологичной формы.

   Подключается ПЕРЕД styles.css. styles.css — только вёрстка, цвета/формы/
   шрифты берутся отсюда. Значения токенов меняются, набор/имена — контракт,
   не тронуты (сверено построчно со всеми var(--…) в styles.css:
   --accent --accent-2 --accent-ink --accent-soft --amber --amber-soft --blue
   --blue-soft --border --code-inline --font-display --g --green --green-2
   --green-soft --mono --muted --on-accent --panel --panel-soft --pre-bg
   --pre-text --radius --radius-lg --red --red-soft --sans --shadow
   --shadow-lg --sidebar --sidebar-hover --sidebar-line --sidebar-text
   --sidebar-text-mut --surface-2 --text --text-mut --text-soft --topbar-bg
   --topbar-h --violet --violet-soft — 41 использованных токенов, все ниже
   определены дважды (тёмная + светлая), плюс --bg/--bg-soft/--theme-color,
   которые styles.css не использует напрямую, но держим для совместимости и
   для <meta name="theme-color"> (app.js читает --theme-color в рантайме).

   Контраст текста к фону проверен по WCAG AA (относительная яркость sRGB):
   ratio ≥4.5:1 для обычного текста/мелких меток, ≥3:1 — для крупного/
   декоративного UI. Ключевые пары — в комментариях у каждого блока; полный
   пересчёт (все ключевые пары формулой) — в team/history/designer.md.

   Веб-шрифты подключает владелец вручную в index.html (слот #theme-fonts →
   Google Fonts) — здесь НЕТ @import, чтобы не дублировать/не конфликтовать с
   этим подключением. Пара шрифтов: Space Grotesk (заголовки, --font-display) +
   Manrope (текст, --sans) — техно-геометричный гротеск с характером «сигнала»
   для заголовков и чистый гуманистический сан для текста (баланс
   «технологичность без холодного айти-синего», сама палитра держит тепло).
   ============================================================ */

:root {
  /* ── Поверхности (тёмная — «экран монитора»: нейтральный глубокий тёмный,
       НЕ холодный синий-графит и НЕ кофейно-коричневый) ── */
  --bg:            #121212;   /* нейтральный глубокий тёмный — «экран» */
  --bg-soft:       #17130f;
  --sidebar:       #0f0d0a;   /* фон бокового меню — самый тёмный слой */
  --sidebar-hover: #221d17;   /* ховер пункта меню */
  --sidebar-line:  #2c251d;   /* разделители/рамки в сайдбаре */
  --panel:         #1b1815;   /* фон карточек — чуть светлее страницы (приподнятость) */
  --panel-soft:    #15120f;   /* фон страницы, мягкие плашки */
  --border:        #302921;
  --surface-2:     #241f18;   /* плашки (чипы, инлайн-код фон) */
  --topbar-bg:     rgba(18,18,18,.85); /* фон верхней панели (полупрозрачный) */

  /* ── Текст (тёплый айвори на нейтральном угле — держит бренд тёплым поверх
       техно-формы) ── */
  --text:      #f2ece2;   /* AA: 15.9:1 к --bg, 15.0:1 к --panel */
  --text-soft: #cbbfae;   /* AA: 9.8:1 к --panel */
  --text-mut:  #a89a8c;   /* AA: 6.5:1 к --panel */
  --sidebar-text:     #eeeae4; /* AA: 16.2:1 к --sidebar */
  --sidebar-text-mut: #9c8f81; /* AA: 6.2:1 к --sidebar */
  --on-accent: #1c1108;        /* тёмный тёплый уголь-текст на ярком сигнальном акценте — AA 10.4:1 */

  /* ── Акцент — «сигнал»: амбер → коралл (брендовый градиент импульса,
       ярче базовых значений палитры — специально для тёмной темы, чтобы
       «гореть» на нейтральном экране) ── */
  --accent:      #ffb347;   /* амбер-сигнал: AA 9.9:1 к --panel, 10.4:1 к --on-accent */
  --accent-2:    #ff6b4a;   /* коралл-импульс — второй акцент (пик графика, вспышка): AA 6.3:1 к --panel */
  --accent-soft: #3a2414;   /* тёмная амбер-подложка; accent/accent-soft = 8.2:1 */

  /* ── Совместимость: токены, на которые ссылается styles.css (алиасы через var,
       сами подхватят светлую/тёмную тему). --g — акцент секции «Архитектура». ── */
  --topbar-h:   60px;
  --muted:      var(--text-mut);
  --accent-ink: var(--on-accent);
  --g:          var(--accent);

  /* ── Семантика статусов. Зелёный/янтарный статуса намеренно НЕ повторяют
       брендовый сигнальный амбер/коралл — статус (готово/предупреждение) и
       бренд-акцент должны различаться на глаз, иначе теряется смысл индикатора
       рядом с фирменным «пульсом». Один набор для обеих тем (пастельные
       -soft всегда светлые — чип читается одинаково в обеих темах). ── */
  --green: #3f6630; --green-2: #6a9c52; --green-soft: #e7f0df; /* green/soft 5.7:1, green/white 6.6:1 */
  --amber: #8a5a12; --amber-soft: #f8ecd3;                     /* amber/soft 5.1:1, amber/white 5.8:1 */
  --red:   #a8331f; --red-soft:   #fbe4de;                     /* red/soft 5.5:1, red/white 6.5:1 */
  --blue:  #2f5b8a; --blue-soft:  #e6eef5;                     /* blue/soft 6.0:1, blue/white 6.9:1 */
  --violet: #6d4a91; --violet-soft: #efe6f5;                   /* violet/soft 5.7:1, violet/white 6.8:1 */

  /* ── Формы — точечные дот-индикаторы «сигнала», умеренные скругления
       (не приборно-острые, но и не плюшевые — «пульс», а не «уют») ── */
  --radius:    10px;
  --radius-lg: 18px;
  --shadow:    0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.26);
  --shadow-lg: 0 16px 34px rgba(0,0,0,.5);

  /* ── Код ── */
  --code-inline: #e29a6a;   /* тёплый янтарный код-акцент, AA 7.1:1 к --surface-2 */
  --pre-bg:      #0f0d0a;   /* фон блока кода — самый тёмный слой */
  --pre-text:    #f2ece2;   /* AA ~16.5:1 к --pre-bg */

  /* ── Типографика ── */
  --sans: 'Manrope', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', system-ui, sans-serif;
  --mono: 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
  --font-display: 'Space Grotesk', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif; /* техно-геометричный гротеск «сигнала» для заголовков */

  /* ── Мета ── */
  --theme-color: #121212;   /* цвет строки браузера (моб.), = <meta theme-color> */
}

/* ============================================================
   СВЕТЛАЯ ВЕРСИЯ — «Пульс» днём: тёплый светлый камень/алебастр, сигнал
   становится темнее (терракотовый амбер / тёмный коралл) для контраста на
   светлом фоне — сам «пульс» (форма/типографика/дот-индикаторы) не меняется.
   Включается: <html data-theme="light">.
   ============================================================ */
:root[data-theme="light"] {
  --bg:            #f7f1ea;   /* тёплый светлый камень/алебастр */
  --bg-soft:       #efe8dd;
  --sidebar:       #f1ece3;   /* сайдбар — чуть более насыщенный тёплый тон */
  --sidebar-hover: #e3dccd;
  --sidebar-line:  #ddd4c2;
  --panel:         #fffdf9;   /* карточки — почти белый с тёплым оттенком */
  --panel-soft:    #f2ece2;
  --border:        #e0d8c8;
  --surface-2:     #ece4d5;
  --topbar-bg:     rgba(247,241,234,.85);

  /* AA: text/bg 15.2:1, text/panel 16.7:1, text-soft/panel 9.4:1, text-mut/panel 5.7:1 */
  --text:      #221b16;   /* «чернила» — тёплый глубокий уголь, не чёрный */
  --text-soft: #4d443b;
  --text-mut:  #6d6459;
  --sidebar-text:     #2a2117; /* AA 13.4:1 к --sidebar */
  --sidebar-text-mut: #6a6055; /* AA 5.2:1 к --sidebar */
  --on-accent: #fffaf3;        /* AA 5.3:1 к --accent */

  /* AA: accent/panel 5.4:1, accent/bg 4.9:1, accent/accent-soft 4.8:1 */
  --accent:      #a8501f;   /* амбер-сигнал, затемнён под светлый фон — тот же «пульс», дневной свет */
  --accent-2:    #b23a26;   /* коралл-импульс, затемнён — AA 5.9:1 к --panel */
  --accent-soft: #f9efdf;

  --green: #3f6630; --green-2: #6a9c52; --green-soft: #e7f0df;
  --amber: #8a5a12; --amber-soft: #f8ecd3;
  --red:   #a8331f; --red-soft:   #fbe4de;
  --blue:  #2f5b8a; --blue-soft:  #e6eef5;
  --violet: #6d4a91; --violet-soft: #efe6f5;

  --shadow:    0 1px 3px rgba(34,27,22,.09), 0 1px 2px rgba(34,27,22,.05);
  --shadow-lg: 0 16px 34px rgba(34,27,22,.14);

  --code-inline: #9a3d1f;   /* AA 5.4:1 к --surface-2 */
  --pre-bg:      #15120f;   /* код-блок всегда тёмный (как терминал), в обеих темах */
  --pre-text:    #f2ece2;   /* AA ~15.9:1 к --pre-bg */

  --theme-color: #f7f1ea;
}