/* ============================================================
   ЛАМИНА AI — design tokens
   Единственный источник правды: палитра, типографика, спейсинг,
   радиусы, тени, движение. Цвет и размер руками не хардкодить —
   только через переменные отсюда.

   Родословная: шкалы (типографика, мера строки, спейсинг, радиусы,
   easing) взяты без изменений из ASTROLABS
   (projects/work/ASTROLABS/site/assets/css/tokens.css) — общий
   стандарт студии. Изменён ТОЛЬКО цветовой слой: у ASTROLABS тема
   тёмная (--void как фон), у ЛАМИНЫ — светлая, воздушная; фирменные
   хексы те же, но роли переставлены.

   Акцент ЛАМИНЫ — синий --deep #2B6CFF. Красного САНТАНа (#ee3d48)
   на сайте нет ни в одном токене: это цвет клиентской платформы,
   а не продукта.
   ============================================================ */

:root{
  /* --- Поверхности (светлая тема) --- */
  --paper:    #FFFFFF; /* фон страницы, карточки первого уровня */
  --soft:     #F4F6FA; /* мягкая подложка: чередование секций, поля ввода */
  --sunken:   #EDF0F6; /* утопленные плашки, трек слайдера, code */
  --void:     #05070D; /* инверсная секция и подвал — «глубокое поле» ASTROLABS */
  --void-soft:#0A0F1A; /* карточки внутри тёмной секции */

  /* Границы. Волосяная --line — ДЕКОР (1.23:1, WCAG её не покрывает).
     Границы интерактивных элементов (поля, чекбоксы, кнопки-призраки)
     обязаны давать 3:1 к фону по WCAG 1.4.11 — для них --line-control. */
  --line:         #E3E8F0;
  /* Замерено, а не подобрано на глаз: #8E99AC давал 2.88:1 к --paper
     и 2.66:1 к --soft — ниже порога 3:1. #7F899D держит 3.52:1 к --paper,
     3.25:1 к --soft и 3.08:1 к --sunken, то есть проходит на всех трёх
     поверхностях, на которых стоят поля. */
  --line-control: #7F899D;
  --line-dark:    #1C2434; /* границы внутри тёмной секции */

  /* --- Текст --- */
  --ink:        #11151F; /* основной, 18.25:1 на --paper, 16.86:1 на --soft */
  --muted:      #5A6478; /* вторичный, 5.95:1 на --paper, 5.5:1 на --soft */
  --ink-invert: #E8ECF4; /* текст в тёмной секции, 17.01:1 на --void */
  --muted-invert:#8B97AD;/* вторичный в тёмной секции, 6.84:1 на --void */

  /* --- Фирменные цвета ---
     Каждый цвет живёт в двух ипостасях: «чистый» (плашки, графика,
     обводки, крупные цифры) и «-ink» (текст и заливка под белым
     текстом). Причина числом: белый на чистом --deep даёт 4.48:1 —
     на волос ниже порога 4.5, поэтому кнопки заливаются --deep-ink. */
  --deep:        #2B6CFF; /* электрический синий — главный акцент ЛАМИНЫ */
  --deep-rgb:    43, 108, 255;
  --deep-ink:    #1F55D6; /* текст-ссылка и заливка кнопки: 6.31:1 к белому */
  --deep-wash:   #EEF3FF; /* мягкая заливка: чипы, выделенные карточки */

  --accent:      #0E9BB5; /* бирюза — второй контур, графики, иконки */
  --accent-rgb:  14, 155, 181;
  --accent-ink:  #0A6C7E; /* текстовая ипостась: 5.53:1 на --accent-wash */
  --accent-wash: #E8F7FA;

  --violet:      #7C5CFF;
  --violet-rgb:  124, 92, 255;
  --violet-ink:  #6A46F5; /* 5.52:1 к белому */

  --ember:       #C2410C; /* тёплый контрапункт, <5% площади: 5.18:1 к белому */
  --ember-rgb:   194, 65, 12;
  --ember-ink:   #9A3412;
  --ember-wash:  #FDF0E8;

  /* --- Фирменные цвета на тёмном.
     Те же цвета, поднятые по светлоте до порога. Замер к --void #05070D
     и к --void-soft #0A0F1A (второй фон всегда темнее требует, поэтому
     проверены оба): чистый --deep даёт на void ровно 4.5 и уже 4.28 на
     карточке — то есть не проходит; --violet 4.63 / 4.41 — то же самое;
     --ember 3.89 / 3.70 не проходит нигде. Поэтому у каждого свой
     тёмный дублёр, а не «тот же токен, но на чёрном». --- */
  --deep-on-dark:   #6E9BFF; /* 7.48 / 7.11 */
  --accent-on-dark: #4FD1E8; /* 11.14 / 10.60 */
  --violet-on-dark: #A78BFF; /* 7.46 / 7.10 */
  --ember-on-dark:  #FFA96B; /* 10.68 / 10.16 */

  /* Семантика поверх палитры */
  --success:    #15803D;
  --danger:     #B91C1C;
  --focus-ring: var(--deep-ink);

  /* --- Статусы модулей. Честная лестница «в работе / спроектировано /
     идея» — не украшение, а обещание. Различаются не только цветом:
     у каждого чипа своя метка и своя форма маркера (см. components.css),
     чтобы смысл читался и в ч/б печати, и при дальтонизме. --- */
  --st-work-fg: var(--deep-ink);   --st-work-bg: var(--deep-wash);   /* 5.68:1 */
  --st-des-fg:  var(--accent-ink); --st-des-bg:  var(--accent-wash); /* 5.53:1 */
  --st-idea-fg: #3F4A60;           --st-idea-bg: var(--sunken);      /* 7.80:1 */

  /* --- Шрифты (все с кириллицей, самохост из assets/fonts) --- */
  /* Запасные семейства с подогнанными метриками (см. base.css) стоят
     сразу за основными: пока свой шрифт декодируется, строка набирается
     ими и имеет ту же ширину, поэтому при подмене ничего не съезжает. */
  --font-display: 'Unbounded', 'Unbounded F1', 'Unbounded F2', system-ui, sans-serif;
  --font-text:    'Onest', 'Onest F1', 'Onest F2', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* --- Типографическая шкала: fluid clamp(min, vw, max) --- */
  --fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-md:   clamp(1.125rem, 1.06rem + 0.32vw, 1.25rem);
  --fs-lg:   clamp(1.375rem, 1.26rem + 0.55vw, 1.625rem);
  --fs-xl:   clamp(1.75rem, 1.55rem + 1vw, 2.25rem);
  --fs-2xl:  clamp(1.875rem, 1.45rem + 2.35vw, 2.75rem);
  --fs-3xl:  clamp(2.375rem, 1.5rem + 3.6vw, 3.5rem);
  /* Герой ЛАМИНЫ ниже героя ASTROLABS (там до 144px): это продуктовый
     сайт, первый экран обязан вместить заголовок + лид + два канала
     связи + форму-крючок на 360px без прокрутки смысла. */
  /* Нижний конец опущен с 2.5rem: на 390px заголовок героя в 42px
     набирался пятью строками по два-три слова. 34px дают четыре
     строки и остаются крупнее любого заголовка на странице. */
  --fs-hero: clamp(2.125rem, 1.2rem + 4.6vw, 4.5rem);
  /* Ступень «броского» заголовка секции (волна 2). Выше --fs-3xl, но
     ниже героя: заголовок секции не должен спорить с первым экраном.
     Нижний конец 2rem — на 360px в Unbounded это уже 6–7 знаков в
     строке, ниже опускать некуда. */
  --fs-punch: clamp(2rem, 1.15rem + 3.7vw, 4rem);

  /* Межстрочие лестницей: чем мельче заголовок, тем больше воздуха. */
  --lh-tight: 1.0;
  --lh-head:  1.08;
  --lh-snug:  1.15;
  --lh-sub:   1.25;
  --lh-normal:1.5;
  --lh-loose: 1.6;

  /* Трекинг — та же лестница. */
  --ls-tight: -0.03em;
  --ls-snug:  -0.015em;
  --ls-micro: -0.005em;
  --ls-normal: 0em;
  /* На светлом фоне тёмный текст оптически ПЛОТНЕЕ, чем светлый на
     тёмном: разгонять его, как в ASTROLABS (--ls-wide 0.01em), не надо. */
  --ls-body:  0em;
  --ls-wider: 0.08em; /* лейблы капсом */

  /* --- Мера строки: 65–75 знаков для основной прозы.
     Задана в em, а НЕ в ch, хотя ch для меры строки выглядит
     естественнее. Причина замерена: ch — это ширина знака «0» текущей
     гарнитуры, и при подмене шрифта она меняется. 50ch давали 650px
     на Onest и 636px на системной запасной; в момент, когда шрифт
     приезжал, колонка прыгала на 14px и лид перевёрстывался — часть
     остаточного CLS на /cases/ была ровно отсюда (нашёл С6).
     em привязан к кеглю, а не к рисунку шрифта: масштабируется вместе
     с типографикой так же, как ch, но при свопе не двигается.
     Коэффициент перевода 0.65 — замеренная ширина «0» в Onest. --- */
  --measure-lead: 32.5em;
  --measure-text: 37.7em;
  --measure-card: 35.1em;

  /* --- Спейсинг (кратно 4px, fluid для крупных отступов) --- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  clamp(2.5rem, 2rem + 2vw, 3.5rem);
  --sp-8:  clamp(3.5rem, 2.5rem + 4vw, 5.5rem);
  --sp-9:  clamp(4rem, 2.6rem + 6vw, 7rem); /* межсекционные отступы */

  /* --- Ширины --- */
  --wrap:      1200px; /* основная колонка */
  --wrap-wide: 1440px; /* ленты, слайдер экранов */
  --wrap-text: 760px;  /* длинный текст: согласие, FAQ */

  /* --- Радиусы --- */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-full: 999px;

  /* --- Тени. Светлая тема: тень мягкая и холодная (замешана на синем
     --deep), иначе серая тень на белом читается как грязь. --- */
  --shadow-sm: 0 1px 2px rgba(17,21,31,.06), 0 2px 8px rgba(var(--deep-rgb),.05);
  --shadow-md: 0 2px 6px rgba(17,21,31,.05), 0 12px 28px rgba(var(--deep-rgb),.09);
  --shadow-lg: 0 4px 12px rgba(17,21,31,.06), 0 28px 60px rgba(var(--deep-rgb),.14);

  /* --- Движение: единый почерк --- */
  --ease-out:   cubic-bezier(.22, 1, .36, 1);
  --ease-move:  cubic-bezier(.65, 0, .35, 1);
  --ease-spring:cubic-bezier(.34, 1.42, .64, 1);
  --dur-press:  90ms;  /* отклик на pointer-down, не на отпускании */
  --dur-fast:   180ms;
  --dur-base:   280ms; /* верхняя граница «незаметного» перехода */
  --dur-slow:   600ms;

  /* --- Слои --- */
  --z-base:     1;
  --z-elevated: 10;
  --z-header:   100;
  --z-overlay:  500;
  --z-modal:    900;

  /* --- Брейкпоинты (справочно; в CSS — @media напрямую) --- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1440px;
}