/* ══════════════════════════════════════════════════════════════
   Лига — токены дизайна
   Значения сняты 1:1 с кода сайта Лиги. Своих значений сюда не добавлять:
   нужного токена нет — это вопрос к владельцу бренда, а не повод завести новый.
   Правила применения — DESIGN.md рядом. Живые образцы — components.html.

   Гарнитура одна — Onest (400 / 600 / 700 / 800), лицензия SIL OFL 1.1 (assets/fonts/OFL.txt).
   Стек для font-family везде:
     font-family:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
   Альтернатива локальным файлам — Google Fonts (как на сайте):
     https://fonts.googleapis.com/css2?family=Onest:wght@400;600;700;800&display=swap
   ══════════════════════════════════════════════════════════════ */

/* ── Onest: три вариативных субсета (кириллица, латиница, знаки ₽ → ≈), пути — от этого файла ── */
@font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url("assets/fonts/onest-cyrillic.woff2") format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url("assets/fonts/onest-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url("assets/fonts/onest-symbols.woff2") format('woff2');unicode-range:U+20BD,U+2192,U+2248}

/* ── Базовая палитра: полотно «ночь» и текст на нём ── */
:root{
  --bg:#16141F;        /* полотно «ночь» — главный тёмный фон */
  --ink:#F1EFF8;       /* основной текст на ночи, 16,0 : 1 */
  --soft:#BEBBCC;      /* второстепенный текст (тело секций, подписи), 9,7 : 1 */
  --muted:#9C99AE;     /* служебный текст, 6,6 : 1 */
  --gold:#C79A3E;      /* золото: акцент-текст на ночи (7,0 : 1), заливка главной кнопки, золотое полотно */
  --gold-hi:#D4AB55;   /* hover главной кнопки (тёмный текст 8,5 : 1) */
  --line:rgba(241,239,248,.40);   /* контуры: кнопка .btn-2, поля, плитки; 3,5 : 1 — нетекстовый */
  --sep:rgba(241,239,248,.24);    /* разделитель в лок-апе «Лига | by Systematika Legal», второстепенные контуры */
  --hair:rgba(241,239,248,.08);   /* тонкие линии-разделители строк и групп */
  --hdr:64px;          /* высота фиксированной шапки (телефон 56, альбом 48 — см. медиа ниже) */
  --focus:var(--ink);  /* кольцо фокуса */
  --caret:var(--ink);  /* курсор «печати» на первом экране */

  --pad:28px;          /* боковые поля контейнера (телефон 16) */
  --fs-mark:clamp(84px,min(26vw,25vh),208px);   /* знак «Лига» на первом экране */
  --fs-type:clamp(19px,1.9vw,24px);             /* подпись первого экрана */
  --fs-only:clamp(18px,1.75vw,23px);            /* акцентная строка первого экрана, 700 */
  --ease-out:cubic-bezier(.16,.8,.24,1);        /* кривая проявлений */
  --ease-move:cubic-bezier(.65,.05,.25,1);      /* кривая перемещений */
}

/* ── Сетка и шкала экранов (всё, кроме первого экрана) ── */
:root{
  --wrap:1200px;                                  /* ширина контейнера */
  --gut:clamp(16px,2.5vw,32px);                   /* межколоночный зазор 12-колоночной сетки */
  --sec-y:clamp(96px,10vw,160px);                 /* воздух секции сверху и снизу */
  --g-out:clamp(64px,7vw,112px);                  /* зазор между группами внутри секции */
  --fs-h2:clamp(30px,calc(14px + 3.8vw),68px);    /* H2 экрана, 800, −.035em, 1.02 */
  --fs-xl:clamp(26px,calc(14px + 2.4vw),46px);    /* крупный набор (резерв), 700 */
  --fs-l:clamp(20px,calc(13px + 1.2vw),30px);     /* H3, строки-утверждения, плитка канала */
  --fs-h4:clamp(19px,calc(15px + .5vw),22px);     /* H4: форматы, шаги, названия в списках */
  --fs-lead:clamp(18px,calc(14px + .65vw),23px);  /* лид — первый абзац под заголовком */
  --fs-body:clamp(16px,calc(14px + .3vw),18px);   /* тело секций, 1.6, мера ≤ 62ch */
  --fs-sm:14px;                                   /* служебное (метки 12–13px — минимум) */
  --fs-num:clamp(96px,calc(40px + 9vw),176px);    /* цифра-герой */
  --fs-giant:clamp(132px,calc(60px + 16vw),300px);/* резерв: сверхкрупная цифра; на текущем сайте не применяется */
  --fs-idx:clamp(40px,calc(24px + 2.6vw),64px);   /* номера в строках «номер · заголовок · текст» */
  --err:#E3867A;                                  /* только ошибки формы */
  --tint:rgba(241,239,248,.06);                   /* заливка выбранной плитки / строки под курсором */
}

/* ── Полотна: второй тёмный, светлый и тёмный текст для светлого ── */
:root{
  --bg-2:#221F2F;      /* полотно «приподнятая ночь»: ink 14,1 · muted 5,8 · gold 6,2 */
  --paper:#F2EEE6;     /* светлое полотно «слоновая кость» — контраст-полотно, не фон всего сайта */
  --ink-d:#16141F;     /* текст на paper, 15,7 : 1 */
  --soft-d:#4A4658;    /* второстепенный на paper, 7,9 : 1 */
  --muted-d:#625E70;   /* служебный на paper, 5,4 : 1 */
  --gold-d:#805C1C;    /* тёмное золото: акцент-текст на paper, 5,2 : 1 */
  --canvas:var(--bg);  /* цвет текущего полотна — для «прорезей» и фона узлов схем */
  --acc:var(--gold);   /* акцент ТЕКСТА: на ночи золото, на paper тёмное золото */
  --t1:var(--soft); --t2:var(--muted); --t3:var(--ink);   /* три тона ролей (сегменты полосы, метки) */
  --t1-on:var(--bg); --t2-on:var(--bg); --t3-on:var(--bg); /* текст на этих тонах */
}
:root{--accf:var(--gold);--accf-on:#16141F}   /* акцент ЗАЛИВКИ: всегда #C79A3E с тёмным текстом #16141F (7,0) на любом полотне */

/* ── Полотна переопределяют токены в своей области: компонент пишется один раз и сам перекрашивается ── */
.c-night{--canvas:#16141F;background:var(--bg)}
.c-night2{--canvas:#221F2F;background:var(--bg-2)}
.c-paper{--canvas:#F2EEE6;background:var(--paper);color:var(--ink-d);
  --ink:#16141F;--soft:#4A4658;--muted:#625E70;--line:rgba(22,20,31,.55);--sep:rgba(22,20,31,.24);--hair:rgba(22,20,31,.14);--tint:rgba(22,20,31,.05);--focus:#16141F;
  --acc:#805C1C;
  --t1:#16141F;--t2:#858096;--t3:#C79A3E;--t1-on:#F2EEE6;--t2-on:#16141F;--t3-on:#16141F}   /* третий тон — золото: главная роль */
.c-gold{--canvas:#C79A3E;background:var(--gold);color:#16141F;
  --ink:#16141F;--soft:#2A2316;--muted:#3A2E18;--line:rgba(22,20,31,.7);--hair:rgba(22,20,31,.2);--tint:rgba(22,20,31,.06);--focus:#16141F;--acc:#16141F}   /* золотое полотно — один раз на сайт: только тёмный текст */

/* ── Акцентное слово / цифра: цвет берётся из полотна ── */
.acc{color:var(--acc)}

/* ── Адаптив токенов ── */
@media screen and (max-width:600px){
  :root{--pad:16px}
  :root{--hdr:56px}
}
/* телефон в альбоме */
@media screen and (max-height:480px) and (orientation:landscape){
  :root{--fs-mark:clamp(64px,22vh,208px)}
  :root{--hdr:48px}
}