/* Токены визуального направления «Чёрная галерея».
 *
 * Источник — ai/docs/design-direction.md, вариант А, выбран оператором
 * 2026-09-20. Основа: Sequel (чёрный холст, сериф только в крупных
 * заголовках, полное отсутствие хроматики). Заимствовано у Atlas Card:
 * моноширинный для мелкой служебной информации.
 *
 * ПРАВИЛО РОЛЕЙ. Каждый токен имеет назначение, и оно не меняется:
 *   --ink        только фон страницы
 *   --bone       текст высшего контраста И заливка основного действия
 *   --mist       обычный текст
 *   --ash        служебное, подписи, метаданные
 *   --graphite   слегка приподнятая поверхность, НЕ фон страницы
 *   --hairline   границы
 * Хроматических токенов нет намеренно. Не добавлять: отсутствие цвета —
 * это и есть заявленная дискретность, а не недоделка.
 */

:root {
  /* Нейтрали с лёгким тёплым уклоном — выбраны, а не взяты по умолчанию.
     Чистый серый читается как непродуманный. */
  --ink: #000000;
  --graphite: #141412;
  --bone: #f5f5f0;
  --mist: #c2c2bc;
  --ash: #82827b;

  --hairline: rgba(245, 245, 240, 0.14);
  --hairline-strong: rgba(245, 245, 240, 0.32);

  --display: "Prata", Georgia, "Times New Roman", serif;
  --ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Шкала. Сериф допускается только от --fs-display-sm и выше. */
  --fs-caption: 11px;
  --fs-meta: 12px;
  --fs-body: 16px;
  --fs-lede: clamp(17px, 2.4vw, 19px);
  --fs-display-sm: clamp(26px, 4.6vw, 34px);
  --fs-display: clamp(38px, 8.5vw, 74px);

  --gap-xs: 12px;
  --gap-sm: 20px;
  --gap-md: 32px;
  --gap-lg: 56px;
  --gap-xl: 80px;

  --measure: 62ch;
  --page: 660px;

  /* Широкий холст десктопа. --page остаётся мерой колонки чтения; --shell —
     это ширина композиции, внутри которой колонка чтения лежит справа, а
     заголовок раздела — слева. Разведение этих двух величин и есть разница
     между «растянуть мобильную колонку» и другой раскладкой. */
  --shell: 1240px;
  --pad: clamp(20px, 4vw, 72px);

  color-scheme: dark;
}

/* Шкала не замирала выше 870 точек: clamp у --fs-display упирался в потолок
   раньше, чем экран доходил до ноутбучной ширины, и от 1280 до 2560 кегли
   были одни и те же. Ступени ниже возвращают шкале зависимость от экрана. */
@media (min-width: 1200px) {
  :root {
    --fs-lede: clamp(19px, 1.5vw, 23px);
    --fs-display-sm: clamp(34px, 2.7vw, 44px);
    --fs-display: clamp(74px, 6.2vw, 104px);
    --gap-xl: 112px;
  }
}

@media (min-width: 1600px) {
  :root {
    --fs-body: 17px;
    --fs-meta: 13px;
    --shell: 1360px;
  }
}

@media (min-width: 1920px) {
  :root { --shell: 1480px; }
}