/* ОДИН СЛОЙ ТОКЕНОВ НА ВЕСЬ САЙТ.
 *
 * До 14.09.2026 его не было. Токены (`--disp`, `--accent`, `--bg`) жили в
 * `index.html`, а остальные четырнадцать страниц прибивали значения в каждое
 * правило: только шрифт заголовков был написан руками 53 раза. Поэтому сайт и
 * разошёлся с приложением - не потому, что кто-то так решил, а потому, что
 * свести их означало пройти 53 места и не забыть ни одного.
 *
 * ИСТОЧНИК ПРАВДЫ - КОНСТАНТЫ ПРИЛОЖЕНИЯ (`mobile/src/constants/colors.js`).
 * Значения ниже взяты оттуда, а не подобраны на глаз. Если они там меняются,
 * меняются и здесь, и это одно место, а не пятнадцать файлов.
 *
 * Подключается ПОСЛЕ `/fonts/fonts.css` (там @font-face) и ДО собственного
 * <style> страницы - чтобы страница могла что-то перебить, а не наоборот.
 */

:root {
  /* Земля и поверхности. Совпадают с приложением буква в букву. */
  --bg:        #040D07;   /* bgBase    */
  --bg2:       #07160C;
  --surface:   #0A1A10;   /* bgSurface */
  --card:      #0F1C12;
  --elevated:  #0E2416;   /* bgElevated - для стеклянных градиентов */

  /* Акцент. `--accent2` - светлее на наведении, `--accent-deep` - конец
     градиента у крупных кнопок, как `primaryDeep` в приложении. */
  --accent:      #C4A882;
  --accent2:     #E7D1AB;
  --accent-deep: #9C7F52;
  --gold-dim:    rgba(196,168,130,.12);
  --gold-glow:   rgba(196,168,130,.40);

  /* ЧЕРНИЛА НА АКЦЕНТЕ - СВОЙ ТОКЕН.
     Тёмная сторона кладёт ТЁМНУЮ подпись на СВЕТЛОЕ золото, светлая - СВЕТЛУЮ
     на ТЁМНОЕ. Пока подпись была числом (#1a1207), углубление акцента дало
     тёмное по тёмному: 2.47. Поймано гейтом в ту же минуту. */
  --on-accent: #1a1207;

  /* Бордовый - только слово SYLAR и его расщепление. Не заливка. */
  --burg:  #8B3A3A;
  /* Бордовый, которым набирают ТЕКСТ, а не слово SYLAR. Знак - логотип, он
     живёт по своим правилам и совпадает с мобильным GlitchLogo; надстрочник и
     номер шага - обычные буквы, и на тёмной земле #8B3A3A читается на 2.59
     при пороге 3.0. Разводим два применения одного цвета, а не красим знак. */
  --burg-ink: #AB5555;
  --burg1: rgba(160,50,50,.4);
  --burg2: rgba(80,20,20,.5);

  /* Чернила. `--txt` - основной текст, `--ink` - заголовки: в приложении
     заголовочная краска ярче основной, и на сайте было так же, но числом. */
  --ink:  #EDEFEA;        /* textPrimary   */
  --txt:  #B8BFB5;        /* textSecondary */
  --txt2: rgba(255,255,255,.5);
  --txt3: rgba(255,255,255,.44);   /* textMuted */

  --line:  rgba(196,168,130,.15);
  --line2: rgba(255,255,255,.06);  /* border */

  /* Украшение - НЕ текст. Бегущая строка с названиями сфер набрана нарочно
     еле-еле: её не читают, она держит ритм полосы и разгорается под курсором.
     Своим токеном она стала 15.09.2026: без него на светлой стороне белое
     осталось бы белым по кремовому - то есть исчезло бы совсем, а не
     приглушилось. */
  --ornament: rgba(255,255,255,.16);

  /* ЗЕМЛЯ ЛИПКОЙ ШАПКИ - ТОКЕН, А НЕ ЧИСЛО.
   *
   * Шапка главной полупрозрачна, и до 15.09.2026 её цвет был записан числом
   * rgba(4,13,7,.72). На светлой стороне она оставалась тёмной, а буквы на ней
   * уже были тёмными: контраст 1.09 при норме 4.5 - то самое «нечитаемо», о
   * чём написал владелец. Замена цвета по хэшу такое не ловит: числа в rgba
   * пишутся иначе, чем #040D07, и словарь замен прошёл мимо. */
  --nav-bg: rgba(4,13,7,.72);

  /* Заливка таблеток - плашки сфер на главной и надстрочник над заголовком.
     Тоже была числом, rgba(18,36,23,.5), и на кремовой земле оставалась
     тёмно-оливковой. Контраст внутри неё в норме, поэтому проба молчит: это
     не нечитаемость, а кусок тёмной темы, забытый на светлой. Глазом видно
     сразу, замером - нет, и это ровно тот случай, ради которого снимок
     смотрят руками. */
  --pill: rgba(18,36,23,.5);

  /* ТИПОГРАФИКА - ЗДЕСЬ САЙТ И РАСХОДИЛСЯ С ПРИЛОЖЕНИЕМ.
   *
   * В приложении заголовки набраны Playfair Display (`enableFonts()` ставит
   * `PlayfairDisplay_700Bold` и `_800ExtraBold`), а сайт говорил гротеском
   * Montserrat. Человек, пришедший с сайта в приложение, видел два продукта.
   *
   * ЗАПАСНОЙ INTER В СПИСКЕ ОБЯЗАТЕЛЕН, И ЭТО НЕ ПЕРЕСТРАХОВКА. В Playfair
   * НЕТ знаков ₽, ฿ и ₾ - замерено по ширине глифа. Цены на сайте набраны
   * крупно и в местной валюте; без запасного шрифта знак валюты рисуется
   * системным шрифтом вплотную к цифрам Playfair: другая толщина, другая
   * высота, другая форма. Приложение решает это тем же списком.
   *
   * Playfair переменный: Google отдаёт один файл на 500/700/800, поэтому
   * жирные начертания настоящие, а не подрисованные браузером. */
  /* Витринный шрифт сайта - Inter, решение владельца 15.09.2026.
     Здесь стоял Playfair Display: антиква, которую дизайнер назвал
     устаревшей и выбивающейся из оформления. У неё вдобавок нет знаков
     ₽ ฿ ₾ - рядом с ценой они рисовались чужим шрифтом. */
  --disp: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --maxw: 1180px;
}

/* ─── СВЕТЛАЯ СТОРОНА САЙТА ────────────────────────────────────────────────
 *
 * Владелец 15.09.2026: «на главной странице был переключатель темы светлая
 * тёмная рядом с выбором языка».
 *
 * ПОЧЕМУ ВТОРЫМ НАБОРОМ ТОКЕНОВ, А НЕ ВТОРЫМИ СТИЛЯМИ. Ровно так устроены
 * тридцать оформлений страницы заведения: правила, размеры и раскладка одни,
 * меняются ТОЛЬКО значения. Значит расходиться между сторонами нечему - а
 * вторая редакция правил разошлась бы с первой на первой же правке.
 *
 * ЗНАЧЕНИЯ НЕ ВЫДУМАНЫ. Это `lightColors` из приложения
 * (mobile/src/constants/colors.js) - та самая кремовая земля, которую владелец
 * утверждал, и та же, что у светлой стороны публичной страницы. Сайту
 * расходиться с приложением незачем.
 *
 * ПО СИСТЕМНОЙ ТЕМЕ САЙТ НЕ ПЕРЕКЛЮЧАЕТСЯ НАМЕРЕННО. Тёмный - это наш вид, и
 * человек, пришедший посмотреть на продукт, должен увидеть его таким. Светлая
 * сторона включается ВЫБОРОМ и живёт в браузере этого человека. Та же логика,
 * что у приложения в вебе и у страницы записи.
 */
:root[data-theme="light"] {
  --bg:        #EFE8D8;
  --bg2:       #E9E1CE;
  --surface:   #E6DECC;
  --card:      #EDE6D6;
  --elevated:  #E2D9C4;

  /* Акцент светлой стороны углублён 15.09.2026 - тем же замером, что и в
     приложении, и до того же значения: сайт и приложение обязаны говорить
     одним золотом. Было 3.7-4.1 на кремовых поверхностях, стало 4.9-5.6.
     Тёмная сторона берёт СВЕТЛОЕ золото на тёмном и даёт 7.9-8.7 - зеркало
     строится по чернилам, а не только по земле. */
  --accent:      #6B5027;
  --accent2:     #4A3718;
  --accent-deep: #4A3718;
  --gold-dim:    rgba(107,80,39,.14);
  --gold-glow:   rgba(107,80,39,.30);
  --on-accent:   #F4EFE3;

  --burg:  #7E2E2E;
  --burg-ink: #7E2E2E;
  --burg1: rgba(126,46,46,.35);
  --burg2: rgba(90,28,28,.45);

  --ink:  #241A0B;
  --txt:  #463618;
  --txt2: rgba(36,26,11,.68);
  --txt3: rgba(36,26,11,.58);

  --line:  rgba(107,80,39,.28);
  --line2: rgba(36,26,11,.12);

  --ornament: rgba(36,26,11,.18);
  --nav-bg: rgba(239,232,216,.80);
  --pill: rgba(36,26,11,.07);

  /* ВТОРОЙ СЛОВАРЬ ТОКЕНОВ - И ЭТО НЕ ОПЕЧАТКА.
   *
   * На сайте их два: index.html говорит словами brand.css (--txt, --line,
   * --card), а остальные девять страниц объявляют свой :root с другими именами
   * (--text, --border, --bg-card). Разошлись они задолго до светлой темы.
   *
   * Сводить их в один - работа по всем девяти страницам разом, и делать её
   * заодно со светлой темой значило бы менять две вещи одной правкой. Поэтому
   * светлая сторона называет ОБА словаря: она сильнее по весу селектора
   * (:root[data-theme] против :root), поэтому побеждает независимо от порядка
   * подключения. Сведение словарей - отдельный заход. */
  --text:      #463618;
  --text-muted: rgba(36,26,11,.68);
  --text-dim:  rgba(36,26,11,.58);
  --bg-card:   #E6DECC;
  --bg-card-hover: #E2D9C4;
  --border:    rgba(36,26,11,.12);
  --border-strong: rgba(36,26,11,.20);
  --burgundy:  #7E2E2E;
  --burgundy-glow-1: rgba(126,46,46,.35);
  --burgundy-glow-2: rgba(90,28,28,.45);
  --green:     #2F7D4F;
  --success:   #2F7D4F;
  --danger:    #8E2F2F;
}

/* Заголовки берут заголовочный шрифт по умолчанию - чтобы новая страница
   получала облик даром, а не вспоминала про него. Страница вправе перебить. */
h1, h2, h3, h4 {
  font-family: var(--disp);
  color: var(--ink);
}
h1, h2 { letter-spacing: -.02em; line-height: 1.06; }

/* ДЛИННОЕ СЛОВО НЕ ТАЩИТ СТРАНИЦУ ВБОК.

   Замер браузером 14.09.2026 на ширине 390: страница цен уезжала вбок на 44px
   на ВСЕХ языках, условия - на 38px по-немецки. Виноваты не блоки, а отдельные
   неразрывные строки: немецкое «Nutzungsbedingungen» шире своей колонки, а в
   ответе про возвраты стоит адрес `support@sylar.app`, который браузер не рвёт
   нигде. Коробка при этом остаётся в границах - поэтому обычная проверка
   «торчит ли узел» такое не находит, а человек видит горизонтальную прокрутку.

   `break-word` рвёт слово ТОЛЬКО когда иначе оно вылезет, поэтому обычный текст
   выглядит как прежде. Правило наследуется от `body`, значит новая страница
   получает его даром. Проверяется `scripts/check-overflow.cjs`. */
body {
  overflow-wrap: break-word;
}