/* ─────────────────────────────────────────────────────────────────────────
   Шрифты и токены сайта beauty.chirkov.info

   Объявления шрифтов переехали сюда из отдельного файла 18.08.2026: каждый
   блокирующий файл стилей это отдельное обращение к серверу, а сервер отдаёт
   по одному соединению за раз, и первый экран не укладывался в порог 2,5 секунды.
   Лицензии шрифтов лежат рядом с самими файлами, в fonts/ЛИЦЕНЗИИ.md.
   ───────────────────────────────────────────────────────────────────────── */

/* Manrope — основная гарнитура (текст и заголовки), переменный шрифт, ось wght 200-800 */
@font-face {
  font-family: "Manrope";
  src: url("/fonts/Manrope-Variable.woff2") format("woff2-variations"),
       url("/fonts/Manrope-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* Lora — акцентная антиква, только курсив, для одного акцентного слова в заголовках */
@font-face {
  font-family: "Lora";
  src: url("/fonts/Lora-Italic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* JetBrains Mono — служебная моноширинная, техническая мета (годы, роли, цифры разделов) */
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Цвет. Шесть значений с ролями плюс служебные производные.
     Фон тёплый кремовый, не белый: белый читается как шаблон.
     Хроматический акцент один (зелёный). Второй хроматический (кирпичный)
     появляется РОВНО в одном месте, в сцене выручки, где цвет означает
     данные: убыток против прибыли. Это законное исключение ВКУС.md §2.
     Контрасты посчитаны: текст 15,6 к 1, вторичный 5,6, акцент 6,0. ── */
  --c-bg:        #FAF7F1;
  --c-bg-2:      #F1EBE1;
  --c-ink:       #201E1B;
  --c-ink-2:     #6A625A;
  --c-accent:    #1B6B4B;
  --c-accent-hi: #248C61;
  --c-loss:      #A03A25;
  --c-line:      #E0D8CC;
  --c-on-accent: #FFFFFF;

  /* Тонировка теней и подложек в цвет фона: серая тень на тёплой бумаге
     читается как грязь. */
  --shadow-hue: 32 20% 18%;

  /* ── Гарнитуры по ролям. Три, больше не нужно: иерархия делается весом
     и размером, а не новыми гарнитурами. ── */
  --font-text: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-accent: "Lora", Georgia, serif;      /* только курсив, одно слово на страницу */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* ── Шкала кеглей. Восемь ступеней, шаг 1,333 (редакционный вид),
     база 17px. Размеров вне этой шкалы на сайте нет. ── */
  --fs-0: 13px;   /* моно-мета: годы, роли, номера разделов */
  --fs-1: 15px;   /* мелкий служебный текст */
  --fs-2: 17px;   /* основной текст */
  --fs-3: 22px;   /* лид, крупная цитата */
  --fs-4: 29px;   /* заголовок третьего уровня */
  --fs-5: 39px;   /* заголовок секции */
  --fs-6: 52px;   /* крупный заголовок */
  --fs-7: 69px;   /* первый экран */

  /* Адаптивные крайние ступени: границы clamp взяты из той же шкале. */
  --fs-hero: clamp(29px, 5.2vw, 52px);
  --fs-h2:   clamp(29px, 4.4vw, 52px);
  --fs-h3:   clamp(22px, 2.6vw, 29px);
  --fs-lead: clamp(17px, 2vw, 22px);
  --fs-num:  clamp(39px, 6vw, 69px);

  /* ── Межстрочное и трекинг ── */
  --lh-tight: 1.06;
  --lh-head:  1.12;
  --lh-text:  1.55;
  --tr-hero: -0.035em;
  --tr-head: -0.02em;
  --tr-mono: 0.06em;

  /* ── Шкала отступов, кратна 4. Значений вне шкалы ноль.
     Имена намеренно без слов padding и margin: замок токенов ищет их
     как имена свойств. ── */
  --s-4:  4px;
  --s-8:  8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-24: 24px;
  --s-32: 32px;
  --s-48: 48px;
  --s-64: 64px;
  --s-96: 96px;

  /* Вертикальный ритм секции: нижняя граница мобильная, верхняя десктопная,
     обе из шкалы. */
  --flow-section: clamp(64px, 9vw, 96px);
  --flow-block:   clamp(32px, 5vw, 64px);

  /* ── Ширины ── */
  --w-page: 1240px;
  --w-text: 68ch;    /* длина строки 60-75 знаков */
  --w-narrow: 52ch;

  /* ── Радиусы: три значения, больше не заводим ── */
  --r-s: 4px;
  --r-m: 12px;
  --r-l: 24px;

  /* ── Тени. Пять слоёв со смещениями 1, 2, 4, 8, 16 и альфой 0,03-0,08,
     один источник света на весь сайт, цвет тонирован в фон. ── */
  --sh-1:
    0 1px 1px hsl(var(--shadow-hue) / 0.04),
    0 2px 4px hsl(var(--shadow-hue) / 0.03);
  --sh-2:
    0 1px 1px hsl(var(--shadow-hue) / 0.05),
    0 2px 4px hsl(var(--shadow-hue) / 0.04),
    0 4px 8px hsl(var(--shadow-hue) / 0.04),
    0 8px 16px hsl(var(--shadow-hue) / 0.03);
  --sh-3:
    0 1px 1px hsl(var(--shadow-hue) / 0.05),
    0 2px 4px hsl(var(--shadow-hue) / 0.04),
    0 4px 8px hsl(var(--shadow-hue) / 0.04),
    0 8px 16px hsl(var(--shadow-hue) / 0.04),
    0 16px 32px hsl(var(--shadow-hue) / 0.05);

  /* На плоских поверхностях граница вместо тени: серая рамка это главная
     примета машинного дизайна, поэтому линия тёплая и почти прозрачная. */
  --border-hair: 1px solid hsl(var(--shadow-hue) / 0.09);

  /* ── Движение. Кривая на весь сайт ОДНА, вторая заведена только под
     другой класс движения (постановочная сцена против реакции на действие).
     Потолок длительности 300 мс, выход быстрее входа. ── */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-scene: cubic-bezier(0.25, 0.8, 0.3, 1);
  --t-tap:   120ms;   /* реакция на действие человека, 40-160 мс */
  --t-ui:    180ms;
  --t-enter: 260ms;
  --t-scene: 300ms;
  --stagger: 60ms;
}

/* Уважение к тем, кому движение мешает. Обязательно, и это ещё признак ремесла. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-tap: 1ms;
    --t-ui: 1ms;
    --t-enter: 1ms;
    --t-scene: 1ms;
    --stagger: 0ms;
  }
}