/*
 * Токены дизайн-системы ФРК.
 *
 * Макет отрисован в трёх ширинах: 360, 768 и 1920. В этих точках вёрстка обязана
 * совпадать с макетом попиксельно, между ними значения интерполируются линейно.
 * Поэтому токены объявляются трижды — базовый блок держит мобильные значения,
 * а медиазапросы переопределяют их на планшете и десктопе.
 *
 * Шире 1920 сетка продолжает тянуться, а кегль и внутренние отступы замирают:
 * плиточное полотно должно заполнять экран, но строки текста не должны
 * разъезжаться за комфортные 80–90 символов.
 */

:root {
  /* --- Цвет ------------------------------------------------------------- */

  --frk-color-ink: #131212;
  --frk-color-gold: #a8955a;
  --frk-color-paper: #ffffff;

  /* Затемнение поверх фотографий в героях и карточках */
  --frk-color-overlay: rgb(0 0 0 / 40%);

  /* Подложка выдвижных панелей входа и личного кабинета: в макете 30%, а не 40% как у скрима на фото */
  --frk-color-backdrop: rgb(0 0 0 / 30%);

  --frk-color-success: #467f17;

  /* Подложка поля поиска */
  --frk-color-surface-muted: #f4f4f4;

  /* Тонкая рамка и разделитель (Color/Gray Light в макете), цвет ошибки формы */
  --frk-color-border: #d9d9d9;
  --frk-color-error: #b3261e;

  /* Фон героя: фотография растворяется в нём градиентом */
  --frk-color-surface-hero: #ededee;

  --frk-color-surface: var(--frk-color-paper);
  --frk-color-surface-inverse: var(--frk-color-ink);
  --frk-color-text: var(--frk-color-ink);
  --frk-color-text-inverse: var(--frk-color-paper);
  --frk-color-text-accent: var(--frk-color-gold);

  /* --- Сетка ------------------------------------------------------------ */

  /*
   * Двенадцать колонок с зазором 4px. Все размеры из макета ложатся на эту
   * сетку без остатка: 473 = 3 колонки, 632 = 4, 950 = 6, 1904 = 12.
   * Ширина колонки не задаётся числом — её считает grid, поэтому сетка
   * тянется на любой ширине экрана.
   */
  --frk-layout-columns: 12;
  --frk-layout-gap: 4px;
  --frk-layout-gutter: 6px;

  /* --- Отступы ----------------------------------------------------------- */

  /*
   * Шаг 4px наследует зазор сетки — вертикальный ритм совпадает с горизонтальным.
   */
  --frk-space-2xs: 4px;
  --frk-space-xs: 8px;
  --frk-space-sm: 16px;
  --frk-space-md: 24px;
  --frk-space-lg: 32px;
  --frk-space-xl: 48px;
  --frk-space-2xl: 64px;
  --frk-space-3xl: 96px;

  /* --- Вертикальный ритм -------------------------------------------------- */

  /*
   * Разрыв между секциями. В макетах 360 и 640 он одинаков на всей странице —
   * 80 пикселей; на 1920 дизайнер развёл секции сильнее и часть стыков сделал
   * особыми. Поэтому базовое значение одно, а исключения живут отдельными
   * токенами и оживают только на десктопе.
   */
  --frk-rhythm: 80px;

  /* Герой → о проекте: на 1920 стык плотнее остальных */
  --frk-rhythm-hero: var(--frk-rhythm);

  /* Категории → внимание к деталям: на 1920 стык шире остальных */
  --frk-rhythm-details: var(--frk-rhythm);

  /* Детали → новинки */
  --frk-rhythm-new: var(--frk-rhythm);

  /* Журнал → подвал: подвал подтянут к последней секции */
  --frk-rhythm-footer: var(--frk-rhythm);

  /* --- Скругления -------------------------------------------------------- */

  /* В макете единственный радиус — он едва заметен и держит «музейную» строгость */
  --frk-radius: 2px;

  /*
   * Поля серой плашки с содержимым (форма сертификата, карточки ЛК, форма
   * контактов, карточки «О бренде»): на планшете и телефоне 12 сверху,
   * 6 по бокам и снизу (баг-лист 2, строка 5), на десктопе 16.
   * Значение для свойства padding целиком, не для padding-top и подобных.
   */
  --frk-plate-padding: 12px 6px 6px;

  /* --- Типографика ------------------------------------------------------- */

  /*
   * Роли гарнитур из макета. Семейств теперь два (см. fonts.css): title
   * раньше был Source Serif 4, accent — Onest; роли оставлены, чтобы
   * замена семейства оставалась правкой в одном месте.
   */
  --frk-font-display: "Roboto Serif", "Times New Roman", serif;
  --frk-font-title: "Roboto Serif", "Times New Roman", serif;
  --frk-font-ui: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Подзаголовок героя и подписи цитат — тонкое начертание гротеска */
  --frk-font-accent: "Inter", "Helvetica Neue", Arial, sans-serif;

  --frk-weight-thin: 100;
  --frk-weight-extralight: 200;
  --frk-weight-light: 300;
  --frk-weight-regular: 400;
  --frk-weight-medium: 500;

  /*
   * Трекинг в макете пропорционален кеглю и сводится к двум значениям:
   * интерфейсный текст сжат на 5%, засечный — на 3%.
   */
  --frk-tracking-ui: -0.05em;
  --frk-tracking-serif: -0.03em;

  --frk-leading-display: 0.9;
  --frk-leading-tight: 1.05;
  --frk-leading-base: 1.2;
  --frk-leading-text: 1.45;
  /*
   * Заголовки 96 (страниц и разделов) набраны с межстрочным 1.05 (заказчик,
   * 2026-09-29), а отступы вокруг них сняты с макета при 0.9. Прибавку
   * половинного интерлиньяжа убираем полями сверху и снизу: растёт только
   * расстояние между строками, первая и последняя строка стоят где стояли.
   */
  --frk-leading-title: 1.05;
  --frk-title-leading-trim: calc((var(--frk-leading-title) - var(--frk-leading-display)) / 2 * 1em);

  /*
   * Кегли названы по роли, а не по размеру: на мобильном те же роли получают
   * другие значения, и «88px» в имени переменной быстро стало бы враньём.
   * Значения ниже — мобильные, десктопные заданы в медиазапросах.
   */
  /*
   * Заголовок героя. В макете 360 стоит 56px, но макет набран Source Serif 4,
   * а проект переведён на Roboto Serif — он заметно шире. При 56 строка
   * «которые носят» требует 400 пикселей против 336 доступных и уезжает
   * на третью строку. 46 удерживают перенос там же, где в макете.
   */
  --frk-size-display-2xl: clamp(46px, 8.94px + 10.294vw, 88px);
  --frk-size-hero-lead: 16px;   /* подзаголовок героя */
  --frk-size-display-xl: 36px;  /* заголовок секции */
  /*
   * Заголовок страницы («Каталог», «Доставка», «Избранное»): 96 на 1920,
   * на планшете и телефоне 40 (баг-лист 2, строка 3). Растёт от 40 на 1024,
   * поэтому на границе десктопа не прыгает, и медиазапрос ему не нужен.
   */
  --frk-size-page-title: clamp(40px, 6.25vw - 24px, 96px);
  /*
   * Крупный заголовок внутри страницы («Есть вопросы?», «Вам может
   * понравиться», ценности «О бренде», разделы статьи): 36 до 1024, 96
   * на 1920. На любой ширине не крупнее заголовка страницы.
   */
  --frk-size-section-title: clamp(36px, 6.696vw - 32.57px, 96px);
  --frk-size-display-md: 16px;  /* подпись под плиткой категории */
  --frk-size-caption: 12px;     /* номер детали */
  /*
   * Кавычки вокруг цитаты пропорциональны полотну: в макете 1920 их строка
   * занимает 315 пикселей по высоте, то есть ровно 15.6% ширины экрана.
   */
  --frk-size-quote-mark: clamp(56px, 15.625vw, 300px);

  /*
   * Стикеры «Новинка» и «Хит сезона». В макете 360 подпись набрана 10-м
   * кеглем с полем 4, в макете 1920 — 20-м с полем 8. Между точками растут
   * линейно, поэтому одного clamp хватает на весь диапазон.
   */
  --frk-size-badge: clamp(10px, 0.641vw + 7.69px, 20px);
  --frk-space-badge: clamp(4px, 0.256vw + 3.08px, 8px);

  /*
   * Расстояния внутри блока цитат: в макете 1920 это 68 пикселей между
   * крупными элементами и 40 между подписью и метаданными.
   */
  --frk-quote-gap: clamp(20px, 3.54vw, 68px);
  --frk-quote-gap-sm: clamp(16px, 2.083vw, 40px);
  --frk-size-footer-lead: 24px; /* назначение магазина в подвале */
  --frk-size-display-lg: 24px;  /* крупное утверждение */
  --frk-size-title-md: 20px;    /* название товара */
  --frk-size-title-sm: 14px;    /* цена */
  --frk-size-ui-lg: 16px;       /* описания, пункты меню */
  --frk-size-ui-md: 14px;
  --frk-size-ui-sm: 12px;       /* подписи, заголовки колонок меню */
  --frk-size-button: 14px;

  /* --- Движение ---------------------------------------------------------- */

  --frk-motion-fast: 160ms;
  --frk-motion-base: 280ms;
  --frk-motion-slow: 560ms;

  /* Мягкий выход без отскока — движение должно быть незаметным, а не игривым */
  --frk-motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/*
 * Между планшетом и десктопом кегли растут линейно, попадая точно в макет
 * на 768 и на 1920. Скачком их менять нельзя: в промежуточных ширинах
 * заголовок героя ломался бы на лишние строки, потому что полотно уже,
 * а кегль уже десктопный.
 *
 * Каждый clamp собран по двум точкам макета: нижняя граница — значение
 * на 768, верхняя — на 1920, между ними прямая. Выше 1920 кегль замирает,
 * а полотно продолжает тянуться.
 */
@media (min-width: 768px) {
  :root {
    --frk-layout-gutter: 8px;
    --frk-space-3xl: 128px;

    --frk-size-display-2xl: clamp(88px, 58.67px + 3.819vw, 132px);
    --frk-size-hero-lead: clamp(20px, 17.33px + 0.347vw, 24px);
    --frk-size-display-xl: clamp(36px, 1.33px + 4.514vw, 88px);
    --frk-size-display-lg: clamp(36px, 28px + 1.042vw, 48px);
    --frk-size-display-md: clamp(24px, 16px + 1.042vw, 36px);
    --frk-size-caption: clamp(14px, 7.33px + 0.868vw, 24px);
    --frk-size-title-md: clamp(20px, 17.33px + 0.347vw, 24px);
    --frk-size-title-sm: clamp(14px, 10px + 0.521vw, 20px);
    --frk-size-ui-lg: clamp(16px, 13.33px + 0.347vw, 20px);
    --frk-size-ui-md: clamp(14px, 12.67px + 0.174vw, 16px);
    --frk-size-button: clamp(20px, 17.33px + 0.347vw, 24px);
  }
}

@media (min-width: 1440px) {
  :root {
    --frk-space-3xl: 160px;
  }
}

/*
 * Десктоп разводит секции сильнее: на 1920 стандартный разрыв 200 пикселей
 * против 80 на узких макетах. Наклон задан по двум точкам — 1024 и 1920, —
 * поэтому в момент смены раскладки величина не прыгает.
 *
 * Значения стыков сняты с макета «Главная_1920_статика»:
 * герой→о проекте 60, категории→детали 236, детали→новинки 164,
 * журнал→подвал 91, все остальные 200.
 */
@media (min-width: 1024px) {
  :root {
    --frk-rhythm: clamp(80px, 13.393vw - 57.14px, 200px);
    --frk-rhythm-hero: clamp(60px, 102.86px - 2.232vw, 80px);
    --frk-rhythm-details: clamp(80px, 17.411vw - 98.29px, 236px);
    /* Заказчик уточнил: 164px (совпадает с исходным замером по Figma) */
    --frk-rhythm-new: 164px;
    --frk-rhythm-footer: clamp(80px, 1.228vw + 67.43px, 91px);

    /* 24 на 1024 (как на планшете) и 32 на 1920 (2396:2060) */
    --frk-size-footer-lead: clamp(24px, 14.857px + 0.8929vw, 32px);

    --frk-plate-padding: var(--frk-space-sm);
  }
}