/* ─── ШРИФТ ────────────────────────────────────────────────────────────
   Inter Display — для крупного кегля: у него плотнее межбуквенное и другие
   пропорции, чем у текстового Inter. Это то, ради чего в референсах берут
   платный HelveticaNow Display; Inter даёт тот же характер бесплатно.

   Файлы свои, с нашего домена: сторонний CDN — это лишний запрос и утечка
   посетителя третьей стороне. Урезаны до латиницы, 8 КБ каждый вместо 120.

   swap, а не block: пока шрифт летит, текст виден системным. Прыжок кегля
   на долю секунды честнее, чем пустая шапка. */

@font-face {
  font-family: "Inter Display";
  src: url("/assets/fonts/InterDisplay-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Display";
  src: url("/assets/fonts/InterDisplay-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Пиксельный — только для знака и коротких акцентов. В наборе текста он
   нечитаем, особенно на телефоне, поэтому основной шрифт остаётся прежним.
   4,7 КБ, свой файл: сторонний CDN это лишний запрос и утечка посетителя. */
@font-face {
  font-family: "Press Start 2P";
  src: url("/assets/fonts/PressStart2P.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════════════
   9APE — TOKENS

   Один закон системы: интерфейс монохромный, цвет принадлежит данным.
   Плашка, кнопка, рубрика, рамка — все серые. Зелёное и красное на экране
   означает ровно одно: вероятность двинулась. Нет движения — нет цвета.

   Отсюда всё остальное:
   · линия в один пиксель вместо толстой рамки — премиум строится на тонком
   · слои разделяются светлотой и воздухом, а не тенью
   · раз цвета нет, работает контраст размеров: типографика несёт всё
   · углы прямые
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── НЕЙТРАЛЬ ───────────────────────────────────────────────────────
     14 ступеней. Чем меньше цвета в системе, тем больше нужно градаций
     серого — иначе нечем строить иерархию. */

  --n-00: #ffffff;
  --n-01: #fbfaf8;   /* бумага: тёплый сдвиг, чистый белый выжигает */
  --n-02: #f4f2ef;
  --n-03: #eae7e2;
  --n-04: #ddd9d3;
  --n-05: #c4bfb8;
  --n-06: #a29d95;
  --n-07: #7d7871;
  --n-08: #5c5852;
  --n-09: #403d38;
  --n-10: #2b2925;
  --n-11: #1c1a17;
  --n-12: #131210;
  --n-13: #0a0908;

  /* ─── ДАННЫЕ ─────────────────────────────────────────────────────────
     Единственный цвет в проекте. Приглушённый: рядом с монохромом даже
     спокойный тон читается как вспышка. */

  --up-l:   #1f7a4d;
  --down-l: #b0342a;
  --up-d:   #4fc98a;
  --down-d: #ff7062;

  /* ─── СЕМАНТИКА · СВЕТЛАЯ ────────────────────────────────────────────*/

  --bg:        #bcbcb8;   /* поле каталога: темнее карточек */
  --bg-2:      #b4b4b0;
  --surface:   #cacac6;   /* плашка поста — светлее поля */
  --surface-2: #c2c2be;
  --ink:       #171716;   /* полоса шапки и инверсные карточки */

  --text:   #121211;
  --text-2: var(--n-08);
  --text-3: var(--n-07);
  --text-4: var(--n-06);   /* технические подписи */

  --hair:      #a9a9a5;
  --hair-hard: var(--n-13);
  --mark:      #171716;   /* кропмарки */

  --up:   var(--up-l);
  --down: var(--down-l);

  --ch-line: var(--n-13);
  --ch-grid: #a8a7a1;
  --ch-2:    var(--n-06);   /* вторая серия — не цвет, а светлота */

  /* ─── РИТМ ───────────────────────────────────────────────────────────*/

  --s-1: 4px;    --s-2: 8px;    --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;   --s-6: 32px;   --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;   --s-10: 128px; --s-11: 176px;

  /* ─── ТИПОГРАФИКА ────────────────────────────────────────────────────
     Разрыв между ступенями нарочно большой: в монохроме иерархия держится
     на размере, а плавные переходы её размывают. */

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Крупный кегль набирается своим семейством, а не тем же шрифтом крупнее. */
  --font-display: "Inter Display", "Inter", ui-sans-serif, system-ui,
                  "Helvetica Neue", Arial, sans-serif;

  /* Пиксельный. Только знак, кнопки и подписи в одну-две строки. */
  --font-pixel: "Press Start 2P", ui-monospace, "Courier New", monospace;

  /* ─── ПИКСЕЛЬНАЯ СЕТКА ───────────────────────────────────────────────
     Шаг «пикселя» — единица, из которой собирается вся игровая часть:
     размер клетки фона, толщина ступенчатой рамки, ход анимации. Держать
     его здесь, а не в компонентах, чтобы сетка не разъехалась между
     экранами. */
  --px:      4px;    /* базовая клетка */
  --px-2:    8px;
  --px-4:   16px;

  --t-2xs:  11px;
  --t-xs:   12px;
  --t-sm:   clamp(13px, 0.8rem + 0.1vw, 14px);
  --t-base: clamp(15px, 0.92rem + 0.15vw, 16px);
  --t-md:   clamp(17px, 1rem + 0.3vw, 19px);
  --t-lg:   clamp(21px, 1.05rem + 1vw, 27px);
  --t-xl:   clamp(28px, 1.1rem + 2.2vw, 40px);
  --t-2xl:  clamp(36px, 1.15rem + 4vw, 62px);
  --t-3xl:  clamp(48px, 1.2rem + 7vw, 104px);
  --t-num:  clamp(52px, 1.2rem + 8vw, 128px);

  --lh-1: 1;
  --lh-2: 1.08;
  --lh-3: 1.55;

  --tr-tight: -0.035em;
  --tr-flat:  -0.01em;
  --tr-wide:  0.14em;

  /* ─── ФОРМА ──────────────────────────────────────────────────────────*/

  --bd:      1px;   /* волосяная — по умолчанию */
  --bd-2:    2px;   /* акцентная */
  --bd-rule: 3px;   /* под заголовком рубрики */

  --wrap:      1280px;
  --wrap-read: 680px;
  --gutter:    clamp(16px, 4vw, 40px);

  --fast: 120ms;
  --mid:  220ms;
  --ease: cubic-bezier(0.22, 0.7, 0.28, 1);

  /* ─── СЛОИ ───────────────────────────────────────────────────────────
     z-index только отсюда. Число, выбранное на месте, всегда оказывается
     либо мало, либо превращается в 9999 — и то и другое ломает следующий
     экран. */

  --z-base:   1;
  --z-sticky: 10;
  --z-head:   20;
  --z-over:   30;    /* модалка, выпадашка */
  --z-top:    40;    /* тост, подсказка */

  /* ─── БРЕЙКПОИНТЫ ────────────────────────────────────────────────────
     Как справка: в @media их подставить нельзя, там значения повторены
     литералами. Меняешь здесь — ищи те же числа в app.css. */

  --bp-sm: 600px;
  --bp-md: 780px;
  --bp-lg: 980px;
  --bp-xl: 1200px;

  /* ─── МЕРЫ СТРОКИ ────────────────────────────────────────────────────
     Длина строки — часть типографики, а не случайность вёрстки. */

  --measure-tight: 34ch;   /* подписи, врезки */
  --measure:       56ch;   /* технический текст */
  --measure-read:  72ch;   /* сплошной текст статьи */
}

/* Тёмной темы в проекте нет. Поле каталога всегда серое: это часть
   айдентики, а не предпочтение пользователя. */