/*
 * 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: "Playfair", Georgia, serif;                   /* заменить: шрифт с кириллицей из typography.md */
  --font-text: "Onest", 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 */
  --fs-display-xl: clamp(56px, 25vw, 360px);          /* только «студия», слово ≤ 5 знаков: 375 → 94, 1440 → 360. Длиннее — формула typography.md §4.1, потолок этот */

  --lh-body: 1.55;
  --lh-lead: 1.45;
  --lh-h3: 1.25;
  --lh-h2: 1.1;
  --lh-h1: 1.02;
  --lh-display: 0.92;                                 /* капс/одно слово; закон 4: капс ≥ 0.85, с Й/Ё ≥ 1.0; строчные — не ниже 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: #FBF2F4;
  --surface: #FFFFFF;
  --surface-2: #F5E6EC;
  --ink: #1C0B26;                          /* текст, не #000 */
  --ink-muted: #5E4A66;                    /* ≥ 4.5:1 на --bg */
  --line: #EBD3DC;                       /* разделители, декор */
  --line-strong: #8C7590;                  /* рамки полей и контролов: ≥ 3:1 к фону */
  --accent: #F300FA;                      /* одно действие, ≤ 10% площади экрана */
  --accent-hover: #DA00E1;                /* L −6% */
  --accent-2: #D10F3A;                     /* второй цвет бренда: акцент в заголовке (закон 5), иконки; ≥ 3:1 к --bg, к --tone не ставить без проверки */
  --on-accent: #1C0B26;                        /* ≥ 4.5:1 на --accent */
  --focus: #D10F3A;
  --success: oklch(55% 0.13 150);
  --danger: oklch(55% 0.19 27);
  --tone: #170B26;                       /* заливка секции тоном бренда (стратегия «Заливка»), ≤ 30% площади */
  --on-tone: oklch(99% 0 0);                          /* текст на --tone: ≥ 4.5:1; не держит — текст --ink */
  --on-tone-muted: #D9CCE6;               /* вторичный текст на --tone и тёмных секциях: ≥ 4.5:1 сплошным цветом, не прозрачностью */
  /* Стекло на тёмной секции или кадре (стеклянные факты, плашки поверх фото): фон, рамка, размытие. Текст на стекле — --on-tone, контраст мерить по самому светлому месту кадра под плашкой. */
  --on-dark-muted: #D7CCDB;
  --line-dark: #5A4462;
  --glass-blue: rgb(23 11 38 / .55);
  --silk: #0D43FE;
  --glass-bg: color-mix(in oklch, var(--ink) 55%, transparent);
  --glass-edge: color-mix(in oklch, var(--on-tone) 22%, transparent); /* имена как у styles/liquid-glass.md: там значения для светлого стекла */
  --glass-blur: 16px;                                 /* backdrop-filter: blur(var(--glass-blur)); на телефоне дорого — не больше 2 плашек на экран */
  --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: 20px;
  --r-md: 999px;
  --r-lg: 32px;
  --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;
  --t-reveal-long: 900ms; /* строки крупного заголовка и большие кадры, 500k и «студия»; потолок 1 с */
  --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-reveal-long: 200ms; --t-slow: 200ms; }
  html { scroll-behavior: auto; }
  [data-motion="decor"] { animation: none !important; }
}