/* ============================================================
   Токены Paperrow — направление «Верстак».

   Единственное место в проекте, где стоят настоящие значения
   цвета, шрифта и размера. Ни одного цвета вне этого файла:
   правило перенесено из Warm Lens.
   ============================================================ */

:root {
  /* ---- цвет ---- */
  /*
   * Владелец сказал: сайт выглядит очень тёмным. Так и было — карточка
   * отличалась от фона на десять единиц яркости, и вся страница читалась
   * одним чёрным полем. Поверхности разведены: фон, карточка, приподнятое.
   * Теперь между ними видна ступенька, а не догадка.
   */
  /*
   * Сами серые уведены в сторону акцента — «сливовые».
   *
   * Были зеленоватыми: в #191C1A больше всего зелени. Зелёный и розовый
   * стоят почти напротив друг друга на круге, и серый рядом с розовым от
   * этого мутнел — владелец назвал это грязным, и это ровно оно.
   *
   * Насыщенность держим на 8–11 %: это по-прежнему серый, просто
   * родственный собственному свету страницы, а не спорящий с ним. Выше 15 %
   * он перестал бы быть серым и начал спорить с кнопкой.
   *
   * Тон один на всю лестницу — 338°, тон самого акцента.
   */
  /*
   * Земля светлая, и это главное отличие от соседнего сайта: Shelfready
   * тёмный. Бумага, а не белизна — чистый #FFF рядом с таблицей цифр
   * отсвечивает, а тёплый оттенок держит страницу спокойной.
   *
   * Лестница поверхностей не переворачивается механически. Карточка белее
   * земли, а «приподнятое» и «утопленное» — притемнённые оттенки бумаги:
   * на светлом ступень читается тоном, а не свечением.
   */
  --c-bg:        #F2F1EA;   /* бумага: фон страницы */
  --c-surface:   #FFFFFF;   /* карточка, поле, панель */
  --c-raised:    #EAE8DE;   /* приподнятое: шапка таблицы, наведение, чередование */
  --c-sunk:      #E7E5DA;   /* утопленное: подложка под кадром */
  --c-text:      #19201A;   /* основной текст — 14,69 : 1 на бумаге */
  --c-muted:     #5C635D;   /* подписи, размеры, второстепенное — 5,46 : 1 */

  /*
   * Те же два цвета ещё раз, числами.
   *
   * Тёмная плита затеняет --c-text и --c-muted внутри себя, а карточки внутри
   * неё изображают светлый интерфейс и обязаны вернуться к бумажным значениям.
   * Псевдоним `var(--c-text)` тут не годится: произвольное свойство
   * подставляется в месте использования, и внутри плиты он подхватил бы
   * затенённое значение. Отсюда повтор числа — осознанный, а не забытый.
   */
  --c-text-paper:  #19201A;
  --c-muted-paper: #5C635D;

  /*
   * Зелёный выбран расчётом, а не на глаз, и первые два кандидата отпали
   * именно по расчёту: лайм шаблона #11A22F даёт текстом 2,98 : 1, а
   * приглушённый #2F7D46 — 4,48 при пороге 4,5. Этот берёт 4,85 текстом на
   * бумаге и 5,49 белым по себе, то есть закрывает обе роли одним тоном.
   *
   * Тон 148 на круге. У Shelfready 3, у Warm Lens 34–53: до ближайшего
   * соседа 90 градусов, спутать нечем.
   */
  --c-accent:    #2C7742;   /* акцент-заливка: кнопка, черта */
  --c-accent-in: #FFFFFF;   /* текст на акценте */

  /*
   * Готовность — тот же зелёный, что акцент. Двух разных зелёных светлая
   * страница не различает, а состояние и без того подписано словами
   * («Paid — waiting to be read»). Решение, а не вывод.
   */
  --c-ok:        #2C7742;   /* готово */

  /*
   * Отдельный токен для акцента текстом остаётся, хотя значение у него то же.
   * Он разошёлся на 17 мест, и сведение его к акценту стоило бы шестнадцати
   * правок ради ничего. У Shelfready два токена были нужны потому, что
   * розовый текстом не добирал контраста; зелёный добирает.
   */
  --c-accent-text: #2C7742;
  --c-error:       #A03A30;   /* 5,90 : 1 на бумаге */

  /*
   * Тёмная плита внутри светлой страницы.
   *
   * Приём взят у apex, где герой и «процесс» инвертированы целиком. Это
   * главный источник контраста: страница из одной бумаги читается плоско, и
   * владелец сказала об этом прямо.
   *
   * Не путать с лицом Shelfready: там тёмным был весь сайт. Здесь тёмные —
   * две плиты из восьми, на светлой земле.
   */
  --c-ink:        #151B16;   /* плита */
  --c-on-ink:     #EAE8DE;   /* текст на ней — 14,24 : 1 */

  /*
   * На плите наш зелёный текстом нечитаем: 3,19 : 1 при пороге 4,5
   * (измерено 13.09.2026). Осветлённый берёт 5,16. Заливке кнопки это не
   * мешает — для крупного пятна порог 3:1, и 3,19 его проходит.
   */
  --c-accent-ink: #4E9B64;

  /* производные — считаются от основных, отдельной правды не заводят */

  /*
   * Цвет краёв — явным числом, а не подмешиванием акцента к тексту.
   *
   * Прежняя формула `mix(текст 70%, акцент)` писалась под тёмное лицо, где
   * край обязан быть светлее фона. На бумаге она даёт тёмно-зелёную линию:
   * обведённая всем страница спорит сама с собой, а зелёный перестаёт
   * значить «здесь что-то происходит».
   *
   * 1,84 : 1 к бумаге. Это волосяная линия, а не текст: порог 4,5 к ней не
   * относится, и тянуть её темнее значит расчертить страницу решёткой.
   */
  --c-edge:      #B8B4A4;
  --c-line:      color-mix(in srgb, var(--c-edge) 55%, transparent);
  --c-line-soft: color-mix(in srgb, var(--c-edge) 30%, transparent);
  /*
   * Наведение поднимает карточку на ту же ступень, что и шапка таблицы, —
   * своего цвета ему не нужно. Прежде оно подмешивало 18 % текста и уезжало
   * до #464A47: подписи на нём давали 3,78 : 1 при норме 4,5, а у выбранной
   * ступени цен это не наведение, а постоянное состояние. Теперь худшее из
   * всего, что на нём пишут, — 4,62.
   */
  --c-hover:     var(--c-raised);
  --c-focus:     var(--c-accent);

  /* ---- шрифт ---- */
  /* Файлы лежат в assets/fonts своими woff2. С сервера Google ничего
     не тянем: он получает адрес каждого посетителя. */
  --f-display: "Nunito", "Trebuchet MS", Verdana, sans-serif;   /* заголовки */
  --f-body:    "Nunito", "Trebuchet MS", Verdana, sans-serif;
  --f-mono:    "Geist Mono", ui-monospace, Menlo, monospace;    /* числа, подписи */

  /* Курсивные вставки в заголовках — приём apex, у него Instrument Serif.
     Его взять нельзя: стоит у Warm Lens. */
  --f-serif:   "DM Serif Display", Georgia, "Times New Roman", serif;

  --fw-display: 800;
  --fw-semi:    600;
  --fw-medium:  500;
  --fw-body:    400;

  /* ---- размер текста ---- */
  --t-xs:   0.75rem;    /* 12 — подписи размеров */
  --t-sm:   0.875rem;   /* 14 */
  --t-base: 1rem;       /* 16 — основной */
  --t-lg:   1.125rem;   /* 18 */
  --t-xl:   1.5rem;     /* 24 */
  --t-2xl:  2rem;       /* 32 */
  --t-3xl:  clamp(1.75rem, 3.4vw, 2.5rem); /* заголовок раздела: мельче первого экрана */
  /* Первый экран. Крупно, но не настолько, чтобы окно броска ушло за край:
     оно здесь главное, а заголовок лишь объясняет. */
  --t-hero: clamp(2.25rem, 5vw, 3.5rem);

  --lh-tight: 1.04;
  --lh-snug:  1.28;
  --lh-body:  1.6;

  --ls-tight:   -0.025em;
  --ls-normal:  0;
  --ls-label:    0.14em;   /* моноширинные подписи в разрядку */

  /* ---- отступы ---- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;

  /*
   * Поля страницы, на которых лежат плиты.
   *
   * Было 10 px, и линованная бумага оказалась не видна вовсе: открытого фона
   * на всю страницу набиралось семьдесят пикселей просветов и десять по бокам.
   * Измерено. Теперь у листа есть поля, и разлиновка на них читается.
   */
  --s-gap: 24px;

  /* ---- ширины ---- */
  /*
   * Предел содержимого.
   *
   * Пробовали 1500 по образцу apex, у которого контейнер тянется до 1632.
   * Владелец посмотрела и вернула 1200: страница расширилась слишком сильно.
   *
   * Само число теперь работает. Прежде оно не решало ничего — ширину держал
   * контейнер родительской темы, и правку токена страница не замечала.
   */
  --w-page:  1200px;   /* предел содержимого */
  --w-text:  65ch;     /* читаемая строка */
  --w-form:  520px;

  /* ---- геометрия ---- */
  /*
   * Прежде углы были прямые везде: «верстак — прямые углы». Владелец
   * попросил скруглить кнопки, рамки и таблицы, и это его решение.
   *
   * Шкала, а не одно число: у поля ввода в 44 точки высотой и у панели
   * в 400 одинаковое скругление выглядит ошибкой — на маленьком оно
   * съедает угол, на большом теряется.
   */
  /*
   * Три ступени, не больше. Считал на главной: было десять разных
   * скруглений — 8, 14, 20, 28, 40, 3 плюс четыре односторонних, — и вещи
   * выглядели собранными из разных наборов. Шаг «md» и «xl» убраны: кнопки
   * скруглены полностью, а крупные панели берут ту же ступень, что карточки.
   */
  --r-sm:  8px;    /* поля ввода, мелкие плашки */
  --r-lg:  20px;   /* карточки, панели, таблица, призыв, зона загрузки */
  --r-slab: 40px;  /* плита; у apex 42 px при --radius: 1rem */
  --r-pill: 999px; /* кнопки: у apex они скруглены полностью */
  --r-dot: 50%;    /* кружок состояния */

  /*
   * Две тени, не шесть. Панель на бумаге лежит чуть выше бумаги; всё
   * нарисованное — чек, бумаги, книга — лежит на плите на одной высоте.
   * Прежде у трёх одинаковых по смыслу предметов были три разные тени
   * (0.22/38, 0.28/60, 0.30/34), и они висели на разной высоте без причины.
   */
  --sh-card: 0 10px 26px rgb(0 0 0 / 0.06);
  --sh-lift: 0 18px 40px rgb(0 0 0 / 0.24);

  --border: 1px solid var(--c-line);

  /* ---- движение ---- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; }
}

/* ============================================================
   Переменные GeneratePress, переведённые на наши токены.

   Родительская тема красит свою начинку не жёсткими цветами, а
   собственными переменными: карточка содержимого, например, берёт
   --base-3. Поэтому воевать правилами не нужно — достаточно сказать
   этим переменным, что они значат у нас, и вся начинка родителя
   покрасится сама, включая то, до чего мы ещё не дошли.

   Настоящие значения по-прежнему живут только выше, в блоке цвета.
   ============================================================ */

:root {
  --base:       var(--c-bg);
  --base-2:     var(--c-surface);
  --base-3:     var(--c-bg);
  --contrast:   var(--c-text);
  --contrast-2: var(--c-muted);
  --contrast-3: var(--c-line);
  --accent:     var(--c-accent);
}