/* Токены. Единственное место в проекте, где допустимы сырые значения.
   Имена = имена в docs/design-system.md → Токены. Направление C «Улица» (выбрано 2026-09-30).
   Новое значение – сначала сюда и в базу, потом в правило. */
:root {
  /* Цвет: холодная бумага и почти-чёрный с зелёным оттенком; один акцент – зелень фонтанов Уоллеса */
  --color-bg-page: #ebebe7;
  --color-bg-sheet: #e2e2dc;
  --color-bg-dark: #121512;
  --color-bg-elevated: #1c201c;
  --color-bg-accent: #1d4a3a;
  --color-fg: #121412;
  --color-fg-muted: #555a55;
  --color-fg-on-dark: #ebebe7;
  --color-fg-muted-on-dark: #b3b8b2;
  --color-accent: #1d4a3a;
  --color-accent-on-dark: #9fc2b0;
  --color-line: #c3c5bf;
  --color-line-on-dark: #3a403a;
  --color-scrim: rgb(18 21 18 / 0.55);

  /* Типографика: Archivo в расширенной ширине – гротеск; Fraunces italic – одно акцентное слово в заголовке */
  --font-display: "Archivo", sans-serif;
  --font-text: "Archivo", sans-serif;
  --font-italic: "Fraunces", serif;
  --font-logo: "Poppins", sans-serif;
  --fw-logo: 700;
  --font-stretch: 112%;
  --fw-display: 300;
  --fw-text: 400;
  --fw-strong: 500;

  /* Шкала кеглей: классы в base.css ссылаются только сюда. display-xl – один H1, clamp записан в базе */
  --fs-display-xl: clamp(3rem, 7.2vw, 6.75rem);
  --fs-display-l: clamp(2.5rem, 5.2vw, 4.75rem);
  --fs-display-s: clamp(1.875rem, 3.3vw, 3rem);
  --fs-title-m: 1.5rem;
  --fs-title-xxs: 1rem;
  --fs-body-l: 1.25rem;
  --fs-body-m: 1.0625rem;
  --fs-body-s: 0.875rem;
  --fs-number: clamp(3rem, 6vw, 5.5rem);
  --fs-giant: clamp(2.5rem, 10.5vw, 12rem);
  --fs-logo: 1.75rem;
  --fs-logo-sub: 0.7em;
  --ls-logo: -0.02em;

  --lh-display: 0.98;
  --lh-giant: 0.92;
  --lh-title: 1.15;
  --lh-body: 1.45;
  --ls-display: -0.03em;
  --ls-giant: -0.05em;
  --ls-italic: -0.01em;
  --em-scale: 1.2em;
  --em-opsz: 144;
  --lh-em: 0.8;
  --ls-body: 0;

  /* Сетка: на всю ширину листа, поля 40 → 20 */
  --container: 1600px;
  --columns: 12;
  --gutter: 24px;
  --gutter-mobile: 12px;
  --page-margin: 40px;
  --page-margin-mobile: 20px;

  /* Отступы */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;
  --space-180: 180px;
  --space-section: var(--space-180);
  --space-section-mobile: var(--space-96);
  --header-h: 72px;

  /* Размеры фото и ленты: фасады идут по высоте, ширина – от кадра */
  --strip-h: 38svh;
  --strip-h-mobile: 34svh;
  --strip-wide: 44vw;
  --strip-wide-mobile: 78vw;
  --track-h: 44svh;
  --track-h-mobile: 52svh;
  --track-narrow: 30vw;
  --track-mobile: 84vw;
  --reel-h: 38svh;
  --lab-frame-h: 72svh;
  --lab-frame-top: calc((100svh - var(--lab-frame-h)) / 2);
  --lab-steps-pad: 20svh 35svh;
  --lab-step-h: 50svh;
  --lab-step-dim: 0.28;
  --reel-gap: var(--space-32);
  --drawer-w: 64vw;
  --measure: 34em;
  --facts-label: 9em;
  --facts-label-mobile: 6.5em;
  --drift: -12%;
  --manifesto-shift: 36vw;
  --manifesto-indent: 22%;
  --manifesto-img-h: 0.74em;
  --manifesto-swap-start: 0.2;
  --manifesto-swap-late: 0.35;
  --thumb-w: 11em;

  /* Радиусы: у архитектуры углы прямые; pill – только у кнопок и ручки шторки */
  --radius-s: 0;
  --radius-m: 0;
  --radius-l: 0;
  --radius-pill: 999px;
  --handle: 56px;

  /* Движение: см. docs/motion.md */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-sharp: cubic-bezier(0.9, 0, 0.1, 1);
  --ease-overshoot: cubic-bezier(0.16, 0.03, 0.08, 1.55);
  --dur-150: 150ms;
  --dur-300: 300ms;
  --dur-600: 600ms;
  --dur-900: 900ms;
  --reveal-y: 24px;
  --mask-pad: 0.32em;
  --zoom-hover: 1.04;

  /* Слои */
  --z-scene: 0;
  --z-content: 1;
  --z-header: 10;
  --z-drawer: 20;
}

/* Низкие экраны (ноутбук 1366×768): закреплённый первый экран панели проекта должен влезать в окно */
@media (max-height: 820px) {
  :root {
    --reel-h: 30svh;
    --reel-gap: var(--space-24);
  }
}