/*
  Токены — пресет B «Редакционный минимал».
  Источник: _design-system/tokens.md (ядро + пресет B).
  Менять значения только через дизайн-систему, не здесь.
*/

:root {
  /* ===== Ядро ===== */

  /* отступы */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* кегль */
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lg: 20px;
  --fs-xl: 26px;
  --fs-2xl: 38px;
  --fs-3xl: 48px;
  --fs-display: 120px;

  /* контейнеры */
  --container: 1280px;
  --container-narrow: 720px;

  /* тени / переходы */
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08);
  --transition: 150ms ease;

  /* ===== Пресет B — «Редакционный минимал» ===== */
  /* Inter: у шрифта cominvi (Helvetica Now Display) нет кириллицы — проверено 10.10 */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Lora", "PT Serif", Georgia, serif;

  --color-bg: #F8F7F4;
  --color-surface: #f2f2f2;
  --color-surface-2: #e9e9e9;
  --color-fg: #0b0b0b;
  --color-fg-muted: #5c574e;
  --color-border: #e2e0dc;
  --color-greige: #837b6c;

  /* красный из скрина Макса (10.10); раньше был терракот #e8623b */
  --color-accent: #891a20;
  --color-accent-hover: #a82129;

  /* тёмная тема первого экрана и меню (референсы: raviklaassens.com, cominvi.com.mx) */
  --color-dark-bg: #000000;
  --color-dark-surface: #151515; /* панель меню, как у cominvi */
  --color-dark-fg: #e0dedd;      /* светлый текст на тёмном, как у Рави */
  --color-primary: #0b0b0b;
  --color-primary-fg: #ffffff;
  --color-primary-hover: #2a2a2a;
  --color-focus: #0b0b0b;

  --color-invert-bg: #0b0b0b;
  --color-invert-fg: #ffffff;

  --radius-sm: 10px;
  --radius-md: 10px;
  --radius-lg: 10px;
  --radius-full: 999px;

  /* Отступ «заголовок блока → контент секции» — правило Макса (02.10),
     применять на всех секциях сайта, вне стандартной шкалы 4/8/12/16/24/32/48/64/96. */
  /* автоскейл: 20px на мобилке (до 640px), плавно до 40px на 1280px */
  --space-block-head: clamp(20px, calc(20px + 20px * ((100vw - 640px) / 640px)), 40px);

  /* ===== Автоскейл (fluid-scaling) =====
     Коэффициент плавного масштабирования между вьюпортами 360px и 1280px.
     Используется так: clamp(min-токен, calc(min + (max-min) * var(--fluid)), max-токен) —
     значение ползёт плавно между двумя токенами шкалы вместо скачка на media query.
     Границы 360/1280 — это диапазон из layout-grid.md (mobile-база / полная сетка). */
  --fluid: calc((100vw - 360px) / 920px);

  /* боковой отступ до контента: 16px на мобилке → 45px на десктопе (ТЗ Макса, 02.10) */
  --pad-x: clamp(16px, calc(16px + 29px * var(--fluid)), 45px);
}