/* ============================================================
   LevioClass · База: reset, фон, типографическая шкала
   Требует tokens.css.
   Размер внутри роли задаётся переменной --fs:
       <h2 class="t-h2" style="--fs:34px">
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
input, textarea, select { font: inherit; color: inherit; }

/* Длинные неразрывные токены — пути, адреса, коды — не должны
   распирать колонку: базовая ширина вёрстки всего 390px. */
code, kbd, samp {
  font-family: var(--mono);
  font-size: 0.92em;
  overflow-wrap: anywhere;
}
a, .t-body, .t-small, .t-lead { overflow-wrap: break-word; }

/* ── Заголовки ───────────────────────────────────────────────
   Интерлиньяж Space Grotesk не ниже 1.14: ink-box шрифта равен
   1.27 × font-size, при меньших значениях строки слипаются.
   Если внутри заголовка есть плашка .mark — не ниже 1.22.
   ──────────────────────────────────────────────────────────── */

.t-h1 {
  font-family: var(--display);
  font-size: var(--fs, 39px);   /* 39–42 */
  line-height: 1.22;
  letter-spacing: -0.04em;
  font-weight: 700;
  text-wrap: pretty;
}

.t-h2 {
  font-family: var(--display);
  font-size: var(--fs, 30px);   /* 28–34 */
  line-height: 1.14;
  letter-spacing: -0.035em;
  font-weight: 700;
  text-wrap: pretty;
}

.t-h3 {
  font-family: var(--display);
  font-size: var(--fs, 20px);   /* 19–22 */
  line-height: 1.19;
  letter-spacing: -0.025em;
  font-weight: 600;
}

/* Заголовок строки списка */
.t-row {
  font-family: var(--display);
  font-size: var(--fs, 17px);   /* 16.5–18 */
  line-height: 1.22;
  letter-spacing: -0.02em;
  font-weight: 600;
}

/* Плашка-выделение внутри заголовка */
.mark {
  background: var(--accent);
  padding: 0 4px;
  border-radius: var(--r-mark);
}
.t-h2:has(.mark),
.t-h3:has(.mark),
.t-h2--mark { line-height: 1.22; }

/* ── Текст ───────────────────────────────────────────────── */

.t-lead  { font-size: var(--fs, 16px);   line-height: 1.55; color: var(--ink-3); }
.t-body  { font-size: var(--fs, 14.5px); line-height: 1.52; color: var(--ink-4); }
.t-small { font-size: var(--fs, 13px);   line-height: 1.42; color: var(--muted); }

/* Длинное чтение — только читалка и цитаты родителей на лендинге */
.t-reader {
  font-family: var(--serif);
  font-size: var(--fs, 17.5px);
  line-height: 1.72;
  color: var(--ink-2);
}

/* Моно-метка. Всегда uppercase, никогда мельче 11px. */
.t-mono {
  font-family: var(--mono);
  font-size: var(--fs, 11px);        /* 11–11.5 */
  letter-spacing: var(--ls, 0.1em);  /* 0.06–0.14em */
  text-transform: uppercase;
  color: var(--muted);
}
/* Моно без капса — даты, суммы, номера внутри строк */
.t-mono--plain { text-transform: none; --ls: 0.06em; }

/* Крупная цифра-статистика */
.t-stat {
  font-family: var(--display);
  font-size: var(--fs, 34px);   /* 21–60 */
  line-height: 0.84;            /* 0.82–0.85 */
  letter-spacing: -0.04em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Цветовые модификаторы текста ────────────────────────── */
.c-ink     { color: var(--ink); }
.c-ink-2   { color: var(--ink-2); }
.c-ink-4   { color: var(--ink-4); }
.c-muted   { color: var(--muted); }
.c-muted-2 { color: var(--muted-2); }
.c-accent  { color: var(--accent); }
.c-moss    { color: var(--moss); }
.c-ochre   { color: var(--ochre); }

/* На тёмном фоне.
   Список тёмных контейнеров держим здесь: если правило висит только
   на .on-ink, то моно-метка внутри .block-ink получает --muted
   (#6E6A61 = 3.52:1 на #12100E) и нарушает правило контраста
   «на #12100E текст не темнее #8C877C». */
:is(.on-ink, .block-ink, .tile--ink, .inset-ink,
    .stack-list--ink .stack-list__row) {
  color: var(--on-ink);
}
:is(.on-ink, .block-ink, .tile--ink, .inset-ink,
    .stack-list--ink .stack-list__row) :is(.t-lead, .t-body, .t-small) {
  color: var(--on-ink-muted);
}
:is(.on-ink, .block-ink, .tile--ink, .inset-ink,
    .stack-list--ink .stack-list__row) .t-mono {
  color: var(--on-ink-muted-2);
}
:is(.on-ink, .block-ink, .tile--ink, .inset-ink,
    .stack-list--ink .stack-list__row) :is(.t-h1, .t-h2, .t-h3, .t-row) {
  color: var(--on-ink);
}

/* Явно заданный цвет должен побеждать правила тёмного фона выше:
   у тех специфичность 0,2,0, у одиночного .c-accent — 0,1,0, и без
   этого блока лаймовая метка внутри .block-ink рисуется серой. */
:is(.on-ink, .block-ink, .tile--ink, .inset-ink,
    .stack-list--ink .stack-list__row) .c-accent { color: var(--accent); }
:is(.on-ink, .block-ink, .tile--ink, .inset-ink,
    .stack-list--ink .stack-list__row) .c-ochre  { color: var(--ochre); }
:is(.on-ink, .block-ink, .tile--ink, .inset-ink,
    .stack-list--ink .stack-list__row) .on-ink-strong { color: var(--on-ink); }

/* ── Фокус с клавиатуры ──────────────────────────────────────
   В макете состояния фокуса нет: он мобильный. Без кольца по
   интерфейсу нельзя пройти с клавиатуры, поэтому задаём его один
   раз на всё. :focus-visible не срабатывает от пальца и мыши —
   мобильный вид не меняется.

   Список тёмных контейнеров здесь свой, шире, чем у правил цвета
   выше: там перечислены те, что задают цвет текста, а кольцу важна
   только тёмная подложка — под неё попадают ещё .section--ink,
   .appbar--ink и тёмные обложки. Добавляя новый тёмный контейнер,
   впиши его в оба списка.
   ──────────────────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

:is(.on-ink, .block-ink, .tile--ink, .inset-ink, .section--ink,
    .appbar--ink, .stack-list--ink) :focus-visible,
:is(.tile--ink, .inset-ink):focus-visible {
  outline-color: var(--accent);
}

/* Элементы, которые заполняют свою рамку целиком или лежат в
   контейнере с overflow: hidden (.stack-list, карточка каталога),
   кольцо снаружи потеряли бы — рисуем внутрь. */
:is(.stack-list__row, .card, .tile, .cover, .option, .mini__option,
    .chip--tap):focus-visible {
  outline-offset: -3px;
}

/* ── Служебное ───────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── Уменьшенное движение ────────────────────────────────────
   Анимации в системе всего две — скелетон читалки и переходы
   ховера, — но глушим разом, чтобы новые не приходилось искать.
   Плавный скролл, заданный из JS (scrollIntoView с behavior:
   'smooth'), CSS отсюда не отменяет: это правится в экране.
   ──────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}