/* Тёмная тема сайта.

   Как работает: светлая тема остаётся по умолчанию — сайт читают днём,
   на бумаге и в распечатке. Тёмная включается сама, если в системе стоит
   тёмный режим, или кнопкой в шапке. Выбор запоминается в браузере.
   Атрибут data-theme ставит короткий скрипт в <head> — до первой отрисовки,
   поэтому страница не мигает белым.

   Почему через переменные: страницы-разделы уже собраны на --paper/--ink,
   так что тёмная тема — это подмена восьми значений, а не второй набор CSS.
   Тетради остаются бумажными: у них метафора книги, инверсия её ломает.

   Цвета подобраны под контраст WCAG AA (4,5:1 для текста): серый #141A1C
   вместо чистого чёрного — на нём меньше ореолов вокруг букв. */

:root {
  /* Цвет текста на акцентных кнопках: в светлой теме белый. */
  --on-accent: #FFFFFF;
  /* Мягкий текст на страницах, где --ink-soft не был объявлен. */
  --ink-soft: #3C4649;
  /* Токены шапки; значения по умолчанию — светлая тема. */
  --nav-bg: rgba(247, 245, 240, 0.94);
  --nav-ink: #2C3539;
  --nav-muted: #626B70;
  --nav-accent: #5A7365;
  --nav-hover: #F1EDE4;
  --nav-line: #A85B43;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --on-accent: #10201A;
  --paper: #141A1C;
  --paper-2: #1B2326;
  --card: #1B2326;
  --ink: #E9E5DD;
  --ink-soft: #C6C1B7;
  --muted: #9BA4A7;
  --sage: #8FB39F;
  --terra: #E2916F;
  --rule: #33403F;
  --rule-soft: #26302F;
  --focus: #A7C9B4;
  --nav-bg: rgba(20, 26, 28, 0.94);
  --nav-ink: #E9E5DD;
  --nav-muted: #9BA4A7;
  --nav-accent: #8FB39F;
  --nav-hover: #202A2C;
  --nav-line: #E2916F;
}

html[data-theme="dark"] body {
  background: var(--paper);
  color: var(--ink);
}

/* Карточки и полосы в тёмной теме не должны светиться белым. */
html[data-theme="dark"] .book,
html[data-theme="dark"] .strip,
html[data-theme="dark"] .card {
  border-color: var(--rule-soft);
}

html[data-theme="dark"] .book-cover {
  background: var(--rule-soft);
}

html[data-theme="dark"] .skip:focus {
  background: var(--card);
  color: var(--ink);
}

html[data-theme="dark"] .chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

html[data-theme="dark"] .btn.free {
  color: var(--on-accent);
}

/* База знаний: бледно-зелёные плашки и подсветка поиска в тёмной теме
   иначе дают светлый текст на светлом фоне. */
html[data-theme="dark"] .kb-badge {
  background: var(--rule-soft);
}

html[data-theme="dark"] .kb-snippet mark {
  background: #4A3E22;
  color: var(--ink);
}

/* Кнопка темы в шапке: маленькая, но не меньше 44 px по высоте. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  margin-left: 6px;
  padding: 0 10px;
  border: 1px solid var(--rule, #DDD6CB);
  border-radius: 999px;
  background: transparent;
  color: var(--nav-muted, #626B70);
  font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.1;
  cursor: pointer;
  white-space: nowrap;
}

.theme-toggle:hover {
  border-color: var(--nav-accent, #5A7365);
  color: var(--nav-ink, #2C3539);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--nav-accent, #5A7365);
  outline-offset: 2px;
}

.theme-toggle .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
}

html[data-theme="dark"] .theme-toggle .dot {
  background: currentColor;
}

@media (max-width: 560px) {
  .theme-toggle {
    margin: 6px auto 0;
    min-height: 36px;
    font-size: 12.5px;
  }
}

/* Типографика. Русские переносы включаются только при указанном языке:
   без него браузер режет слова по-английски. text-wrap — прогрессивно:
   старые браузеры просто не применят его. */
p,
li,
.lead,
.hero-lead,
.pair-lead {
  -webkit-hyphens: auto;
  hyphens: auto;
  text-wrap: pretty;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

/* Печать всегда на бумаге, независимо от темы на экране. */
@media print {
  html[data-theme="dark"] {
    --paper: #FFFFFF;
    --paper-2: #FFFFFF;
    --card: #FFFFFF;
    --ink: #000000;
    --ink-soft: #222222;
    --muted: #444444;
    --rule: #CCCCCC;
    --rule-soft: #E5E5E5;
  }
  .theme-toggle {
    display: none;
  }
}