/* ═══════════════════════════════════════════════════════════
   Baby Sleep Planner — CSS variables for static blog pages
   Mirrors global.css exactly so blog/articles match app themes
   Applied via data-theme attribute set by theme-inject.js
   ═══════════════════════════════════════════════════════════ */

/* ── BOY (default) ── */
:root, [data-theme="boy"] {
  --bg:            #EEF4FA;
  --bg2:           #FFFFFF;
  --bg3:           #E2EBF4;
  --surface:       rgba(255,255,255,0.88);
  --accent:        #81A4CD;
  --accent-deep:   #3E7CB1;
  --accent-soft:   rgba(129,164,205,0.14);
  --accent-mid:    rgba(62,124,177,0.22);
  --label:         #1A2436;
  --label2:        #506080;
  --label3:        #8BA8C4;
  --border:        rgba(129,164,205,0.22);
  --border-strong: rgba(62,124,177,0.30);
  --shadow-sm:     0 2px 8px rgba(62,124,177,0.06);
  --shadow-md:     0 4px 20px rgba(62,124,177,0.10);
  color-scheme: light;
}

/* ── GIRL ── */
[data-theme="girl"] {
  --bg:            #FEF6F3;
  --bg2:           #FFFFFF;
  --bg3:           #F8E8E2;
  --surface:       rgba(255,255,255,0.88);
  --accent:        #D4897A;
  --accent-deep:   #B5604E;
  --accent-soft:   rgba(212,137,122,0.14);
  --accent-mid:    rgba(181,96,78,0.22);
  --label:         #381816;
  --label2:        #7A4840;
  --label3:        #C49090;
  --border:        rgba(212,137,122,0.22);
  --border-strong: rgba(181,96,78,0.30);
  --shadow-sm:     0 2px 8px rgba(181,96,78,0.06);
  --shadow-md:     0 4px 20px rgba(181,96,78,0.10);
  color-scheme: light;
}

/* ── NEUTRAL ── */
[data-theme="neutral"] {
  --bg:            #FAF7F2;
  --bg2:           #FFFFFF;
  --bg3:           #F0E8DA;
  --surface:       rgba(255,255,255,0.88);
  --accent:        #C09060;
  --accent-deep:   #8A6238;
  --accent-soft:   rgba(192,144,96,0.14);
  --accent-mid:    rgba(138,98,56,0.22);
  --label:         #2A2010;
  --label2:        #6A5838;
  --label3:        #AA9878;
  --border:        rgba(192,144,96,0.22);
  --border-strong: rgba(138,98,56,0.30);
  --shadow-sm:     0 2px 8px rgba(138,98,56,0.06);
  --shadow-md:     0 4px 20px rgba(138,98,56,0.10);
  color-scheme: light;
}

/* ── GRAPHITE ── */
[data-theme="graphite"] {
  --bg:            #15181E;
  --bg2:           #1E222A;
  --bg3:           #252B34;
  --surface:       rgba(30,34,42,0.92);
  --accent:        #84A59D;
  --accent-deep:   #5A8880;
  --accent-soft:   rgba(132,165,157,0.16);
  --accent-mid:    rgba(90,136,128,0.24);
  --label:         #E2E8F0;
  --label2:        #8898AC;
  --label3:        #4A5A6C;
  --border:        rgba(132,165,157,0.14);
  --border-strong: rgba(90,136,128,0.22);
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.25);
  --shadow-md:     0 4px 20px rgba(0,0,0,0.35);
  color-scheme: dark;
}

/* ── Shared base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--bg);
  color: var(--label);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--bg);
  color: var(--label);
  transition: background 0.3s ease, color 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Baby Sleep Planner — ПОВЕРХНОСТИ статических статей и блога

   ЗАЧЕМ ЭТОТ ФАЙЛ СУЩЕСТВУЕТ
   Статьи — статический HTML со своим инлайновым <style>, где фоны блоков
   прибиты значениями: .signs-card{background:white}, .danger{background:#ffebee},
   .warning{background:#fff8e1}. Цвет текста при этом приходил из темы страницы
   (var(--label)). В графитовой теме это давало светлый текст на белой карточке —
   блок пропадал. Показательно, что соседняя таблица читалась: она брала цвета
   из переменных темы, а карточка — из разметки.

   ПРАВИЛО, КОТОРОЕ ФАЙЛ УСТАНАВЛИВАЕТ
   Цвет текста определяется ФОНОМ САМОГО БЛОКА, а не темой страницы. Поэтому
   фон и текст здесь объявляются ТОЛЬКО ПАРОЙ, в одном правиле. Развести их
   больше нельзя: чтобы у блока появился свой фон, надо взять пару токенов, а
   пара по построению контрастна во всех четырёх темах.

   ПОЧЕМУ ЕДИНЫЙ ФАЙЛ, А НЕ ПРАВКА ПО СТАТЬЯМ
   Статей 267 в восьми языках. Подкрашивание найденного блока лечит один экран
   и оставляет болезнь: следующая статья приедет с тем же прибитым белым. Здесь
   один источник истины на весь корпус, подключённый и из blog-vars.css, и из
   blog-theme.css, поэтому новая статья получает согласованную пару автоматически.

   ПРОВЕРКА
   web/scripts/contrast-audit.mjs — обходит все страницы во всех темах, считает
   контраст пары «текст / ФАКТИЧЕСКИЙ фон» (композиция слоёв, а не объявленное
   у элемента) и роняет прогон ниже WCAG AA. Значения токенов ниже подобраны
   этим замером, а не на глаз: все сочетания «краска × поверхность» >= 4.5:1.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1. ТОКЕНЫ ПОВЕРХНОСТЕЙ И КРАСОК

   srf-*-bg / srf-*-fg — пара «фон блока / текст на нём».
   ink-*               — семантические краски (бренд/успех/предупреждение/
                         опасность), легальные на ЛЮБОЙ поверхности своей темы.
   fill-brand          — заливка под белым текстом (шапка, шапки таблиц, CTA).
   ─────────────────────────────────────────────────────────────────────────── */

:root,
[data-theme="boy"] {
  --srf-card-bg:     #FFFFFF;
  --srf-subtle-bg:   #F0F5FB;
  --srf-info-bg:     #E8F4FD;
  --srf-warn-bg:     #FFF8E1;
  --srf-danger-bg:   #FFEBEE;
  --srf-success-bg:  #E8F5E9;

  --ink-body:        #1A2436;
  --ink-muted:       #46566E;
  --ink-brand:       #2F6796;
  --ink-ok:          #1E6B2A;
  --ink-warn:        #8A5200;
  --ink-bad:         #B02A2A;
  --ink-violet:      #5B4FCF;

  /* Заливка под белым: #3E7CB1 давал 4.45:1 — на волос ниже AA. Затемнение
     на 2% незаметно глазом и переводит пару через порог. */
  --fill-brand:      #3D7AAD;
  --fill-brand-ink:  #FFFFFF;

  --srf-header-bg:   var(--fill-brand);
  --srf-header-fg:   #FFFFFF;
  --srf-border:      rgba(62,124,177,0.20);
}

[data-theme="girl"] {
  --srf-card-bg:     #FFFFFF;
  --srf-subtle-bg:   #FAF0ED;
  --srf-info-bg:     #FDEEE9;
  --srf-warn-bg:     #FFF8E1;
  --srf-danger-bg:   #FFEBEE;
  --srf-success-bg:  #E8F5E9;

  --ink-body:        #381816;
  --ink-muted:       #6B403A;
  --ink-brand:       #A2513F;
  --ink-ok:          #1E6B2A;
  --ink-warn:        #8A5200;
  --ink-bad:         #B02A2A;
  --ink-violet:      #5B4FCF;

  --fill-brand:      #B15E4C;
  --fill-brand-ink:  #FFFFFF;

  --srf-header-bg:   var(--fill-brand);
  --srf-header-fg:   #FFFFFF;
  --srf-border:      rgba(181,96,78,0.22);
}

[data-theme="neutral"] {
  --srf-card-bg:     #FFFFFF;
  --srf-subtle-bg:   #F5F0E6;
  --srf-info-bg:     #F5EDE0;
  --srf-warn-bg:     #FFF8E1;
  --srf-danger-bg:   #FFEBEE;
  --srf-success-bg:  #E8F5E9;

  --ink-body:        #2A2010;
  --ink-muted:       #5C4C30;
  --ink-brand:       #7A5530;
  --ink-ok:          #1E6B2A;
  --ink-warn:        #8A5200;
  --ink-bad:         #B02A2A;
  --ink-violet:      #5B4FCF;

  --fill-brand:      #8A6238;
  --fill-brand-ink:  #FFFFFF;

  --srf-header-bg:   var(--fill-brand);
  --srf-header-fg:   #FFFFFF;
  --srf-border:      rgba(138,98,56,0.24);
}

/* Тёмная тема. Поверхности здесь ТЁМНЫЕ — это и есть суть починки: белая
   карточка на тёмной странице не только нечитаема, но и слепит. */
[data-theme="graphite"] {
  --srf-card-bg:     #1E222A;
  --srf-subtle-bg:   #242A33;
  --srf-info-bg:     #1B2A2E;
  --srf-warn-bg:     #2C2517;
  --srf-danger-bg:   #2E1A1D;
  --srf-success-bg:  #16281B;

  --ink-body:        #E2E8F0;
  --ink-muted:       #A9B6C6;
  --ink-brand:       #9CC7BE;
  --ink-ok:          #86D89A;
  --ink-warn:        #E8B863;
  --ink-bad:         #F2A0A0;
  --ink-violet:      #B7AEF5;

  /* Акцент графита (#5A8880) под белым давал 3.99:1 — темнее светлых тем.
     Правило владельца «паритет в сторону правильного»: подтягиваем отставшую
     сторону, а не выравниваем вниз. */
  --fill-brand:      #3E6B63;
  --fill-brand-ink:  #FFFFFF;

  --srf-header-bg:   #1E222A;
  --srf-header-fg:   #E2E8F0;
  --srf-border:      rgba(132,165,157,0.18);
}

/* ───────────────────────────────────────────────────────────────────────────
   2. СТРАНИЦА СЛЕДУЕТ ТЕМЕ

   theme-inject.js ставит data-theme на всех 267 страницах, но инлайновый
   <style> статьи объявляет body{background:#f7f9fc;color:#1a2436} и в каскаде
   побеждал: правило blog-vars.css шло без !important. Из-за этого выбранная
   тёмная тема применялась лишь на 12 страницах, подключавших blog-theme.css,
   а на остальных доезжал только color-scheme: dark — отчего браузер красил
   ссылки светло-фиолетовым (#9E9EFF) поверх светлого фона, 2.27:1.
   ─────────────────────────────────────────────────────────────────────────── */

html,
body {
  background: var(--bg) !important;
  color: var(--label) !important;
}

h1, h2 { color: var(--label) !important; }
h3, h4 { color: var(--ink-brand) !important; }
p, li, td, dd, dt, blockquote { color: var(--label); }
.lead, .faq-a, .meta, .note, .muted, .sources, .fine, .card-desc, .cta-sub, .consent { color: var(--label2) !important; }
.sources li, .sources strong, .muted strong { color: inherit !important; }

/* Ссылка в тексте. Без явного цвета её красит браузер, а под color-scheme:dark
   он берёт светло-фиолетовый — он и всплывал на светлых врезках. */
a { color: var(--ink-brand); }
.container a,
article a,
p a, li a, td a { color: var(--ink-brand) !important; }

/* ───────────────────────────────────────────────────────────────────────────
   3. БЛОКИ СО СВОИМ ФОНОМ

   Каждое правило задаёт background И color вместе. Потомки перечислены явно:
   без этого их перехватывает общее `p, li { color: var(--label) }` темы —
   ровно тот канал, по которому дефект и приходил.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Карточка (в разметке: background:white) ── */
.norm-card, .schedule-block, .cause-card, .summary-card, .quote, .method-card,
.col-card, .step-card, .env-card, .signs-card, .sign-card, .reason-card,
.age-block, .schedule, .step-btn, .cta a, .card, .stat-card, .tool-card {
  background: var(--srf-card-bg) !important;
  color: var(--ink-body) !important;
  border-color: var(--srf-border);
}

/* ── Приглушённая плашка (в разметке: #f0f5fb / #f7f9fc / нечётные строки) ── */
.nav-links a, .pros, .cons, .chip, .tag, .hero-badge,
table tr:nth-child(even) td {
  background: var(--srf-subtle-bg) !important;
  color: var(--ink-body) !important;
}

/* ── Информационная врезка (в разметке: #e8f4fd / #f0f7ff) ── */
.tip, .cause-fix, .badge, .info {
  background: var(--srf-info-bg) !important;
  color: var(--ink-body) !important;
  border-color: var(--srf-border);
}

/* ── Предупреждение (в разметке: #fff8e1 / #fff3cd) ── */
.warning, .warn, .transition, .mi.medium,
table tr.hl td, table tr.highlight td {
  background: var(--srf-warn-bg) !important;
  color: var(--ink-body) !important;
}

/* ── Опасность (в разметке: #ffebee) — розовая врезка из отчёта ── */
.danger {
  background: var(--srf-danger-bg) !important;
  color: var(--ink-body) !important;
}

/* ── Успех (в разметке: #e8f5e9) ── */
.soft {
  background: var(--srf-success-bg) !important;
  color: var(--ink-ok) !important;
}

/* Потомки внутри любой поверхности берут её цвет текста.
   Перечисление обязательно: тема объявляет `p, li { color: var(--label) }`,
   и без этих правил текст внутри блока снова уехал бы к теме страницы. */
.norm-card p, .norm-card li, .norm-card div, .norm-card span, .norm-card strong, .norm-card em, .norm-card td,
.schedule-block p, .schedule-block li, .schedule-block div, .schedule-block span, .schedule-block strong,
.cause-card p, .cause-card li, .cause-card div, .cause-card span, .cause-card strong,
.summary-card p, .summary-card li, .summary-card div, .summary-card span, .summary-card strong,
.method-card p, .method-card li, .method-card div, .method-card span, .method-card strong,
.col-card p, .col-card li, .col-card div, .col-card span, .col-card strong,
.step-card p, .step-card li, .step-card div, .step-card span, .step-card strong,
.env-card p, .env-card li, .env-card div, .env-card span, .env-card strong,
.signs-card p, .signs-card li, .signs-card div, .signs-card span, .signs-card strong,
.sign-card p, .sign-card li, .sign-card div, .sign-card span, .sign-card strong,
.reason-card p, .reason-card li, .reason-card div, .reason-card span, .reason-card strong,
.age-block p, .age-block li, .age-block div, .age-block span, .age-block strong,
.schedule p, .schedule li, .schedule div, .schedule span, .schedule strong,
.quote p, .quote li, .quote div, .quote span, .quote strong,
.tip p, .tip li, .tip div, .tip span, .tip em,
.cause-fix p, .cause-fix li, .cause-fix div, .cause-fix span, .cause-fix em,
.warning p, .warning li, .warning div, .warning span, .warning em,
.warn p, .warn li, .warn div, .warn span, .warn em,
.transition p, .transition li, .transition div, .transition span, .transition em,
.danger p, .danger li, .danger div, .danger span, .danger em,
.pros p, .pros li, .pros div, .pros span,
.cons p, .cons li, .cons div, .cons span,
table tr:nth-child(even) td p, table tr:nth-child(even) td span,
table tr.hl td p, table tr.hl td span {
  color: inherit !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   4. СЕМАНТИЧЕСКИЕ КРАСКИ ВНУТРИ БЛОКОВ

   Зелёный «раннего признака» и красный «позднего» несут смысл, поэтому их не
   гасим в цвет текста — переводим на краски темы, легальные на её поверхностях.
   ─────────────────────────────────────────────────────────────────────────── */

.signs-card.early h4, .sign-card.early h4, .pros h4, .yes, .ok, .good {
  color: var(--ink-ok) !important;
}
.signs-card.late h4, .sign-card.late h4, .cons h4, .no, .bad {
  color: var(--ink-bad) !important;
}
.col-card.day h4, .mi.medium, .medium, .transition strong {
  color: var(--ink-warn) !important;
}
.col-card.night h4, .tip strong, .cause-fix strong, .badge, .schedule-time,
.age-label, .cause-num, .time, .card-tag, .card-arrow, .section-label,
.kicker, .step-label, .cta-icon, .card-tag, .header-btn, .faq-q + .faq-a a {
  color: var(--ink-brand) !important;
}
.hero-badge, .hero-badge span { color: var(--ink-brand) !important; }
.schedule-sleep .schedule-time { color: var(--ink-violet) !important; }
.quote { color: var(--ink-muted) !important; }
.quote p, .quote span { color: inherit !important; }

/* ───────────────────────────────────────────────────────────────────────────
   5. БРЕНДОВАЯ ЗАЛИВКА ПОД БЕЛЫМ ТЕКСТОМ

   Здесь наоборот: текст прибит разметкой (белый), а фон ехал за темой — в
   графите акцент оказывался тусклее, чем в светлых. Пара тоже задаётся вместе.
   ─────────────────────────────────────────────────────────────────────────── */

div.header {
  background: var(--srf-header-bg) !important;
  color: var(--srf-header-fg) !important;
  border-bottom: 1px solid var(--srf-border);
}
div.header a { color: var(--srf-header-fg) !important; }
/* Подзаголовок шапки шёл с opacity:.7 и БЕЗ своего цвета — на 255 страницах он
   наследовал тёмный текст body и ложился тёмным на тёмно-синюю шапку (1.85:1). */
div.header span { color: var(--srf-header-fg) !important; opacity: 1 !important; }

table th, .cta, .cta-btn, .step-card .step-num, .step-num, button[type="submit"], .btn-primary {
  background: var(--fill-brand) !important;
  color: var(--fill-brand-ink) !important;
}
.cta h2, .cta h3, .cta h4 { color: var(--fill-brand-ink) !important; }
.step-card .step-num { color: var(--fill-brand-ink) !important; }
.cta p, .cta li, .cta span, .cta .cta-sub, .cta .cta-icon { color: var(--fill-brand-ink) !important; }
/* Кнопка внутри CTA — светлая плашка с брендовой краской. */
.cta a {
  background: var(--srf-card-bg) !important;
  color: var(--ink-brand) !important;
}

table td { border-bottom-color: var(--srf-border) !important; }
.faq-item { border-top-color: var(--srf-border) !important; }

footer {
  background: var(--bg2) !important;
  color: var(--label2) !important;
  border-top: 1px solid var(--srf-border) !important;
}
footer a { color: var(--label2) !important; }
footer a:hover { color: var(--ink-brand) !important; }