/* ============================================================================
   Sonaro · токены оформления
   Источник: NEW_DESIGN/nachisto.html и NEW_DESIGN/landing.html, блок :root.
   Значения перенесены дословно вместе с пояснениями. Здесь ничего не
   изобретается: если нужен другой цвет или отступ — он сначала появляется
   в макете, потом здесь.
   ========================================================================= */

/* Шрифты лежат в расширении: интерфейс не должен зависеть от сети и не должен
   менять вид от того, какие шрифты стоят у пользователя в системе.
   Файл fonts.css собран скриптом, руками не правится. */
@import url('fonts.css');

:root {
  color-scheme: light;

  /* ── поверхности ── тёплые, потому что человек приходит сюда уставшим ── */
  --ground: #FBF8F4;
  --sheet:  #FFFFFF;
  --inset:  #F6F1E9;
  --inset-2:#EFE8DD;

  /* ── чернила ── */
  --ink:   #241E18;   /* 15,6 : 1 на основном фоне */
  --ink-2: #6B6058;   /*  5,8 : 1 */
  /* Третьи чернила темнее, чем просится на глаз: на этой краске набраны
     времена, счётчики и подписи к кадрам — то есть сведения, а не украшение.

     Оттенок правился дважды, и оба раза замером. В nachisto.html стояло
     #9C9087 — 2,9 : 1 при потребных 4,5. В landing.html его исправили
     на #7C7066, но мерили только против самого светлого фона: на --ground
     это 4,54, а на --inset уже 4,28, на --inset-2 — 3,95. Ровно на этих
     поверхностях и стоят подпись кадра и шапка макета.

     Здесь стоит самый светлый оттенок той же тёплой линии, который держит
     4,5 на всех четырёх поверхностях сразу. Мерить краску против одного
     фона недостаточно: она ставится на все. */
  --ink-3: #72665C;   /* 5,26 на ground · 4,95 на inset · 4,58 на inset-2 */

  /* ── линии ── */
  --line:   #EBE3D8;
  --line-2: #DDD2C3;

  /* ── акцент: жжёная охра, цвет пометки на полях ── */
  --mark:      #A34E14;
  --mark-deep: #7E3B0F;
  --mark-wash: #FBEFE4;
  --mark-edge: #EBD3BC;

  /* ── смысловые краски, тёплые в тон ── */
  --lost:      #9E3B3B;   --lost-wash: #FBECEA;
  --done:      #3E6B45;   --done-wash: #EDF3EC;
  /* Красного «глубже» в макете нет, потому что в макете нет идущей записи.
     У нас она есть: плашка и кнопка «Стоп» держат два оттенка одного цвета,
     иначе нажатое состояние неотличимо от обычного. Затемнение взято тем же
     отношением, что --mark → --mark-deep. */
  --lost-deep: #7A2D2D;

  /* ── ночь: одна глава, где страница слушает ── */
  --night:      #221C16;
  --night-2:    #2E271F;
  --night-ink:  #F7F1E8;
  --night-ink-2:#B6A697;
  --night-line: #3E342A;
  --night-mark: #E08A45;

  /* ── шрифт ──
     Два семейства на весь продукт. Кириллица есть у обоих, поэтому запасного
     семейства под неё — как были PT Sans Narrow и Golos Text при Barlow —
     больше не нужно.

     Моноширинного в наборе нет вовсе. Прежде JetBrains Mono держал времена
     и счётчики, то есть места, где цифры обязаны стоять в колонку. Теперь
     это делает font-variant-numeric: tabular-nums по самому Onest, и делать
     это обязательно: замером по файлу шрифта цифры Onest имеют десять разных
     ширин (363…665 единиц), а с tabular-nums — одну, 672. Без него часы
     записи дёргаются на каждой секунде. */
  --face: "Unbounded", "Onest", system-ui, sans-serif;
  --text: "Onest", "Segoe UI", system-ui, sans-serif;
  /* Заголовки Unbounded набраны тонким начертанием: у него широкие буквы,
     и на полужирном заголовок превращается в плашку. В макете это 300
     на всех h1/h2. Ниже 21 px Unbounded не ставится вовсе — там работает
     Onest начертанием 600. */
  --face-weight: 300;
  /* Моноширинный из набора убран, но остались два места, где ширина знака
     несёт смысл: путь к файлу и имя файла. Их читают по буквам, ищут
     в них расширение и точку, и в пропорциональном наборе `l`, `I` и `1`
     сливаются. Шрифт здесь системный — файла своего нет и не нужно:
     это техническая надобность, а не краска оформления. */
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

  /* ── воздух: шаг 4, жизнь на 8 ── */
  --a1:4px;  --a2:8px;  --a3:12px; --a4:16px; --a5:24px;
  --a6:32px; --a7:48px; --a8:72px; --a9:104px;

  /* ── скругления ── */
  --r1:8px; --r2:12px; --r3:18px; --r4:26px; --pill:999px;

  /* ── подъём: тень тёплая, иначе на кремовом она серая и грязная ── */
  --up1: 0 1px 2px rgba(70,48,26,.05);
  --up2: 0 1px 2px rgba(70,48,26,.05), 0 10px 28px -14px rgba(70,48,26,.22);
  --up3: 0 2px 4px rgba(70,48,26,.06), 0 24px 56px -24px rgba(70,48,26,.30);
}

/* Тёмной темы в продукте нет — см. PRODUCT.md §7. Поэтому prefers-color-scheme
   не обрабатывается намеренно, а фон задаётся явно. */

@keyframes son-run   { 0% { transform: translateX(-100%) } 100% { transform: translateX(320%) } }
@keyframes son-blink { 0%,100% { opacity: 1 } 50% { opacity: .2 } }
@keyframes son-ring  { 0% { box-shadow: 0 0 0 0 rgba(158,59,59,.5) } 100% { box-shadow: 0 0 0 11px rgba(158,59,59,0) } }