/*
   performa — design tokens (единственный источник значений)
   Направление: светлый сайт + тёмные блоки + БЛАГОРОДНЫЙ СИНИЙ
   Все значения сайта берутся ОТСЮДА. Правки стиля — только здесь.

 3, 4 и «сквозной» №6)
   Прежняя рамка «палитру-ультрамарин не трогать» ОТМЕНЕНА клиентом:
     · «Конкретно этот синий не нравится — дефолтный, упрощает сайт.
        Нужен благородный синий.»
     · «Цветовая гамма не ок — передоз фиолетового и дефолтного синего,
        ОСОБЕННО НА ТЁМНОМ ФОНЕ.»
   Что было не так технически: ультрамарин #2E3AE6 сидит на 240° — ровно
   там, где браузерный `blue`, отсюда «дефолтность»; а осветлённые роли
   (#5A63FF, #6F78FF, #B9BEF5) уходили за 245° в сине-фиолетовое, и на
   тёмном фоне читались уже как сирень. Фиолетовым было именно то, что
   на тёмном занимало больше всего площади.
   Что стало: весь синий сдвинут к 212–215° и приглушён — глубокий
   сапфир вместо электрика. Осветлённые роли теперь тоже синие, а не
   лиловые: фиолетового в палитре не осталось ни одного тона.
*/

:root{
  /*
 ---------- ЦВЕТ · роли (сапфировый мир, без фиолетового) ----------
     Принцип: ни одного «дефолтного» hex. Тёмные — морские чернила
     в родстве с акцентом; светлые — холодный фарфор с синим подтоном;
     нейтрали тонированы прохладой. Всё вокруг одного сапфира.
*/
  --c-bg:            #F2F4F8;   /* фарфор с холодным синим подтоном */
  --c-surface:       #FFFFFF;   /* чистый лист для контента/карточек */
  --c-surface-2:     #E8ECF4;   /* панель/инпут с синим подтоном (не нейтр. серый) */
  --c-ink:           #101B2E;   /* морские чернила: глубокий navy без лилового */
  --c-muted:         #55627A;   /* холодный графит с синей ноткой */
  --c-line:          #E1E6EF;   /* тонкая холодная линия с подтоном */

  --c-dark:          #0B1524;   /* глубокая синяя ночь — семья сапфира */
  --c-dark-2:        #14243A;   /* карта на тёмном */
  --c-on-dark:       #E9EEF6;   /* текст на тёмном (15.7:1) */
  --c-on-dark-mut:   #9AA9BF;   /* приглушённый на тёмном (7.7:1) */
  --c-dark-line:     rgba(255,255,255,.09); /* границы на тёмном */

  --c-accent:        #164C87;   /* САПФИР — акцент, CTA, ссылки. 8.69:1 на белом */
  --c-accent-ink:    #FFFFFF;   /* текст на акценте (8.69:1) */
  --c-accent-press:  #0F3866;   /* глубже — состояние active/press */
  --c-accent-2:      #2E6BB8;   /* светлее — hover / ЗАЛИВКИ и бордеры на тёмном (не текст) */
  /*
 🔴 ОТДЕЛЬНАЯ роль: акцентный ТЕКСТ на тёмном.
     --c-accent на --c-dark даёт 1.9:1, --c-accent-2 — 3.4:1: оба
     проваливают WCAG AA для текста. Этот тон даёт 8.2:1 на --c-dark
     и 7.0:1 на --c-dark-2. Для заливок и бордеров он НЕ нужен —
     там остаётся accent-2.
*/
  --c-accent-text:   #7FB2E8;
  --c-accent-soft:   #E3EBF6;   /* синий тинт — чипы/бейджи на светлом */
  /*
     Отдельная роль, а не accent-soft: на полотне --c-bg (#F2F4F8)
     тинт #E3EBF6 отличается всего на 4% светлоты и как выделение
     не читается. Этот тон отличается от обоих полотен и держит
     13.1:1 под чернилами --c-ink.
*/
  --c-mark:          #CBDDF4;
  --c-accent-disabled:#A9C2DE;  /* disabled-состояние (блеклый тинт акцента) */

  /*
 в исходном
 Дозировано: подарок, гарантия,
     метки «после разбора». На белом даёт 2.41:1 — ТЕКСТОМ на светлом
     не использовать, только заливкой под чернильный текст (7.16:1)
     или текстом на тёмном (7.61:1).
*/
  --c-warm:          #C8A24A;
  --c-warm-soft:     #F6EEDC;

  --grad-hero-light: radial-gradient(120% 90% at 92% 0%, #E6ECF6 0%, #FFFFFF 62%); /* деликатный, без holo */
  --grad-dark: linear-gradient(160deg,#132437 0%,#0B1524 100%);

  /* семантика состояний (тонированы под палитру) */
  --c-success:#1FA97A; --c-warning:#D99000; --c-danger:#E14658;

  /* ---------- ТИПОГРАФИКА ---------- */
  /*
 'Unbounded Fallback' / 'Golos Fallback' — метрически подогнанные фолбэки
     (size-adjust в styles.css). Стоят ДО системного sans-serif, чтобы swap
     не двигал вёрстку. Не удалять: без них CLS ~0.14 на Slow-4G.
*/
  --font-display:'Unbounded','Unbounded Fallback','Onest',sans-serif;  /* ЗАГОЛОВКИ И КНОПКИ */
  --font-text:'Golos Text','Golos Fallback','Inter',sans-serif;        /* ОСНОВНОЙ ТЕКСТ / UI */
  --font-btn:var(--font-display);                   /* кнопки — Unbounded */
  /* все: OFL, кириллица, самохостинг из /fonts/*.woff2. Unbounded — короткие заголовки/кнопки, вес 700–800 */

  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extra:800;
  /*
 🔴 Рабочий вес Unbounded в дисплейных ролях. 700–800 у этого шрифта
     дают «блочность»: широкие штампованные строки, которые читаются
     тяжело и дёшево. 600 сохраняет характер и снимает давление.
     Правится ОДНИМ местом — не хардкодить вес в компонентах.
*/
  --fw-display:600;

  /* модульная шкала (clamp: mobile → desktop) */
  /*
 hero H1 28→56. Нижняя граница подобрана по САМОМУ ДЛИННОМУ русскому
     слову в заголовках («дополнительных», ««Монетизация»»): на 375px
     контент-бокс 331px, при 36px слово требовало 400px и обрезалось.
*/
  /*
 46px + более широкая колонка дают 4 строки.
*/
  --fs-display: clamp(1.5rem, .95rem + 2.25vw, 2.625rem);
  /*
 Герой ПОДСТРАНИЦЫ (Монетизация / Практикум): заголовки там длиннее
     главной («…которая приносит больше чистой прибыли с того же потока
     клиентов»), и на общем дисплейном кегле давали 5 строк — первый экран
     не влезал в 1440×900. Отдельная, поджатая ступень: 24→34.
*/
  --fs-display-sub: clamp(1.375rem, .95rem + 1.55vw, 2.125rem);
  --fs-h1:      clamp(1.5rem, 1.05rem + 1.8vw, 2.375rem);  /* 24→38 (нижняя граница — под «Telegram-ботов» на 360px) */
  --fs-h2:      clamp(1.5rem, 1.1rem + 1.6vw, 2rem);      
  --fs-h3:      clamp(1.2rem, 1rem + .7vw, 1.4rem);       
  --fs-lg:      1.125rem;   
  --fs-body:    1rem;       
  --fs-sm:      .875rem;    
  --fs-xs:      .75rem;     
  --fs-cap:     .6875rem;   /* 11 — caps-метки */

  --lh-tight:1.02; --lh-head:1.1; --lh-body:1.55;
  /*
 трекинг раздельно по кеглю: крупный Unbounded нужно поджимать
     сильнее мелкого, иначе строка рассыпается на буквы
*/
  --ls-display:-0.038em; --ls-tight:-0.03em; --ls-caps:0.14em;

  /* ---------- ОТСТУПЫ · сетка (шаг 4px) ---------- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem;  --sp-7:3rem;  --sp-8:4rem;   --sp-9:6rem;  --sp-10:8rem;
  --sp-11:10rem; --sp-12:14rem;

  /*
 Вертикальный ритм. Плотно-
     премиальный шаг: 48px на мобиле → 88px на десктопе. Ритм ЕДИНЫЙ на весь
     сайт: любая секция берёт --section-y, узкие полосы — --section-y-sm.
*/
  --section-y:    clamp(3.5rem, 2rem + 2.6vw, 5rem);
  --section-y-sm: clamp(2.25rem, 1.5rem + 2.2vw, 3.75rem);
  /* воздух ВНУТРИ секции: шапка → контент, блок → блок */
  --stack-lg: clamp(1.75rem, 1.15rem + 1.9vw, 3rem);
  --stack-md: clamp(1.25rem, .95rem + 1vw, 1.875rem);

  --container: 1240px;         /* макс. ширина контента (было 1080 — рамка душила макет) */
  --container-narrow: 900px;   /* для длинных текстовых блоков */
  --gutter: clamp(1.25rem, 1rem + 2vw, 3.5rem);  /* боковые поля растут вместе с экраном */
  --grid-cols:12; --grid-gap:clamp(1rem, .5rem + 1.5vw, 2rem);

  /* ---------- ФОРМА · радиусы / тени ---------- */
  /*
     Тени остались только под тем, что реально «висит»: шапка, модалка,
     плавающая карточка регалий, свечение под акцентным CTA.
*/
  --r-xs:4px; --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --rule: 1px solid var(--c-line);
  --rule-dark: 1px solid var(--c-dark-line);
  --sh-sm:0 1px 2px rgba(11,27,58,.05);
  --sh-md:0 10px 30px -14px rgba(11,27,58,.18);
  --sh-lg:0 24px 60px -28px rgba(11,27,58,.28);
  --sh-accent:0 22px 55px -18px rgba(22,76,135,.42); /* свечение под сапфировым CTA */

  /* ---------- МОУШЕН (дозированно, см. дайлы) ---------- */
  --dur-fast:180ms; --dur:280ms; --dur-slow:520ms; --dur-slower:900ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);
  --ease-spring:cubic-bezier(.34,1.42,.64,1);   /* лёгкий «дожим» для магнитных кнопок */
  --reveal-y:28px;   /* сдвиг для reveal-on-scroll */
  --hover-lift:-4px; /* подъём карточек на hover */
  --feed-speed:52s;  /* полный цикл авто-ленты TG */

  /* ---------- БРЕЙКПОИНТЫ (справочно, для media) ---------- */
  --bp-sm:480px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px;

  /*
 Высота шапки-таблетки. Переопределяется в adaptive.css под телефон
     и планшет; десктопное значение живёт здесь, чтобы отступ первого
     экрана не зависел от фолбэка в calc().
*/
  --hdr-h:72px;
}

/* доступность: гасим моушен по системному запросу */
@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast:0ms; --dur:0ms; --dur-slow:0ms; --dur-slower:0ms; --reveal-y:0px; --hover-lift:0px; }
}