/*
 * OpenSky Design — стартовые токены лендинга.
 * Копируй в проект как tokens.css и меняй значения под DESIGN.md, а не добавляй новые.
 * Каждое число объяснено в reference/spacing.md, typography.md, color.md, motion.md.
 * Проверочные точки clamp(): 375px и 1440px — значения в комментариях.
 */

:root {
  /* ── Отступы: шкала 4/8. Внутри компонента — шаг 4 (s-1…s-4), между компонентами и секциями — шаг 8 (s-4…s-48). */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;
  --s-32: 128px;
  --s-40: 160px;
  --s-48: 192px;

  /* Вертикальный отступ секции (padding-block). Один из трёх на проект — фиксируется в DESIGN.md. */
  --section: clamp(80px, 5.5vw + 52px, 128px);        /* 375 → 80, 1440 → 128: лендинг по умолчанию */
  --section-dense: clamp(64px, 3vw + 53px, 96px);     /* 375 → 64, 1440 → 96: плотный, продукт, 150k */
  --section-lux: clamp(96px, 9vw + 64px, 192px);      /* 375 → 98, 1440 → 192: премиум, editorial */

  /* Заголовок секции → её содержимое. */
  --head-gap: clamp(32px, 1.6vw + 25px, 48px);        /* 375 → 32, 1440 → 48 */

  /* ── Сетка */
  --container: 1200px;                                /* ширина контента; с полями ≈ 1312 */
  --container-wide: 1440px;                           /* full-bleed медиа, широкие сетки */
  --prose: 65ch;                                      /* колонка текста */
  --page-pad: clamp(20px, 4.13vw + 4.5px, 64px);      /* поле страницы: 375 → 20, 768 → 36, 1440 → 64 */
  --gutter: clamp(16px, 1.5vw + 10.5px, 32px);        /* между колонками: 375 → 16, 1440 → 32 */

  /* ── Типографика. Кегли текста фиксированы шагами, заголовки текут через clamp. */
  --font-display: "Geologica", system-ui, sans-serif;                   /* заменить: шрифт с кириллицей из typography.md */
  --font-text: "Golos Text", system-ui, sans-serif;         /* заменить */

  --fs-xs: 13px;                                      /* подписи; ниже 12px нельзя */
  --fs-sm: 15px;                                      /* вторичный текст */
  --fs-body: clamp(16px, 0.2vw + 15.25px, 18px);      /* 375 → 16, 1440 → 18 */
  --fs-lead: clamp(18px, 0.4vw + 16.5px, 22px);       /* 375 → 18, 1440 → 22 */
  --fs-h3: clamp(20px, 0.75vw + 17.2px, 28px);        /* 375 → 20, 1440 → 28 */
  --fs-h2: clamp(30px, 2.2vw + 22px, 56px);           /* 375 → 30, 1440 → 54 */
  --fs-h1: clamp(36px, 4.5vw + 23px, 96px);           /* 320 → 37, 375 → 40, 1440 → 88; H1/H2 = 1.63 */
  --fs-display: clamp(56px, 13vw, 240px);             /* слово-обложка на всю ширину: 375 → 56, 1440 → 187 */

  --lh-body: 1.55;
  --lh-lead: 1.45;
  --lh-h3: 1.25;
  --lh-h2: 1.1;
  --lh-h1: 1.02;
  --lh-display: 0.92;                                 /* только капс/одно слово; строчные — не ниже 1.0 */

  --ls-body: 0;
  --ls-h3: -0.01em;
  --ls-h2: -0.02em;
  --ls-h1: -0.025em;
  --ls-display: -0.03em;                              /* предел; антиква и узкие — вдвое меньше */
  --ls-caps: 0.06em;                                  /* только кнопки и шапки таблиц, не надзаголовки */

  --measure: 65ch;

  /* ── Цвет: роли. OKLCH, значения — из DESIGN.md проекта. Здесь нейтральный старт. */
  --bg: #F3F4EF;
  --surface: #FFFFFF;
  --surface-2: #E7EAE2;
  --ink: #13201D;                          /* текст, не #000 */
  --ink-muted: #4A5653;                    /* ≥ 4.5:1 на --bg */
  --line: #D3D8CF;                       /* разделители, декор */
  --line-strong: #7C8782;                  /* рамки полей и контролов: ≥ 3:1 к фону */
  --accent: #F5D53A;                      /* одно действие, ≤ 10% площади экрана */
  --accent-hover: #E9C51F;                /* L −6% */
  --on-accent: #13201D;                        /* ≥ 4.5:1 на --accent */
  --focus: #0E4D45;
  --success: oklch(55% 0.13 150);
  --danger: oklch(55% 0.19 27);
  --tone: #0E4D45;
  --tone-2: #0A3A34;                                  /* тень тона: клетки на заливке */
  --on-tone-muted: #C9D6D1;                           /* вторичный текст на tone, ≈ 7:1 */                       /* заливка секции тоном бренда (стратегия «Заливка»), ≤ 30% площади */
  --on-tone: #F3F4EF;                          /* текст на --tone: ≥ 4.5:1; не держит — текст --ink */
  --header-bg: color-mix(in oklch, var(--bg) 85%, transparent); /* стеклянная шапка: components.md §8; токен, чтобы color-off-token её знал */

  /* ── Форма. Выбрать одну систему в DESIGN.md: «острая» 0–4px или «мягкая» 20–32px. 8–16px на всём — признак шаблона. */
  --r-sm: 2px;
  --r-md: 2px;
  --r-lg: 2px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px oklch(20% 0.01 90 / 0.06), 0 2px 6px oklch(20% 0.01 90 / 0.04);
  --shadow-2: 0 2px 4px oklch(20% 0.01 90 / 0.06), 0 12px 32px -8px oklch(20% 0.01 90 / 0.12);

  /* ── Движение (Emil Kowalski, MIT). Значения не придумывать. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-press: 140ms;
  --t-fast: 180ms;
  --t-base: 240ms;
  --t-slow: 320ms;
  --t-reveal: 480ms;
  --reveal-shift: 16px;                               /* сдвиг появления; 0 при reduced-motion */

  /* ── Интерактив */
  --card-pad: clamp(20px, 0.56vw + 18px, 24px);      /* 375 → 20, 1440 → 24 */
  --nav-h: clamp(64px, 0.75vw + 61px, 72px);          /* 375 → 64, 1440 → 72; не выше 80 */
  --hit: 44px;                                        /* минимальная зона нажатия на телефоне */
  --control-h: 48px;                                  /* кнопка = поле ввода */
  --focus-ring: 2px solid var(--focus);
  --focus-offset: 2px;

  /* ── Слои */
  --z-sticky: 200;
  --z-nav: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* Базовые правила, которые нужны любому проекту. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--nav-h) + var(--s-4)); }
body { overflow-x: clip; background: var(--bg); color: var(--ink); font: var(--fs-body)/var(--lh-body) var(--font-text); }
h1, h2, h3 { text-wrap: balance; overflow-wrap: anywhere; min-width: 0; hyphens: manual; }
p, li { text-wrap: pretty; }
img, video { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.num { font-variant-numeric: tabular-nums; }        /* цифры в колонках — без моноширинных шрифтов */

@media (prefers-reduced-motion: reduce) {
  /* «Меньше, не ноль»: сдвиги и масштаб убираем, смену прозрачности и цвета оставляем короткой.
     Компоненты берут сдвиг из --reveal-shift, а декоративные петли помечают data-motion="decor". */
  :root { --reveal-shift: 0px; --t-reveal: 200ms; --t-slow: 200ms; }
  html { scroll-behavior: auto; }
  [data-motion="decor"] { animation: none !important; }
}