/* ===========================================================================
   COURAGE FIGHT CLUB — токены
   Единственный файл, где вообще встречаются hex-значения.
   Палитра собрана из артефактов: логотип клуба (графит #666, плюмаж #FF0000)
   и 13 интерьерных фотографий зала (нейтрали: тон ~60°, насыщенность 1–6 %,
   плюс холодная подсветка от панорамных окон, тон ~210°, 7 %).
   Красный — «заслуженный акцент»: означает ровно одно, «сейчас / открыт набор».
   =========================================================================== */

:root {
  /* --- поверхности --------------------------------------------------------
     Нейтрали холодные: так зал выглядит при северном свете из панорамных окон
     (замер по интерьерным снимкам дал вторую вершину на 210°). Холодный
     нейтраль под тёплый акцент — намеренная пара, а не случайность.
     Тёплый кремовый (30–50°) не используем сознательно: это опознанный
     кластер шаблонной вёрстки 2026 года. */
  --bg:        #EBEDEF;   /* бетон при дневном свете */
  --bg-2:      #DEE2E6;   /* полоса, чередование секций */
  --bg-3:      #F8F9FA;   /* карточка */
  --bg-sunk:   #D3D8DD;   /* утопленное поле, таблица */

  /* --- тёмные поверхности (появляются только там, где заслужены) -------- */
  --dark:      #15181B;   /* холодный почти-чёрный, не #000 */
  --dark-2:    #1F2429;
  --dark-3:    #2C3238;
  --on-dark:   #ECEEF0;
  --on-dark-2: #9BA3AB;
  --line-dark: #333A41;

  /* --- текст ------------------------------------------------------------
     --ink и --ink-2 — те же два значения под именами, которые тёмные
     поверхности не переопределяют. Нужны там, где внутри тёмного контекста
     снова начинается светлый: шапка детской страницы. */
  --ink:       #15181B;
  --ink-2:     #454C53;
  --fg:        var(--ink);
  --fg-2:      var(--ink-2);
  --fg-3:      #5A6169;   /* 4.5:1 и на --bg, и на полосе --bg-2 */

  /* --- линии ------------------------------------------------------------ */
  --line:      #CCD1D7;
  --line-2:    #B1B8C0;

  /* --- бренд: действие ---------------------------------------------------
     Основное действие — графитовое, как знак. Красным залито ничего не бывает. */
  --brand:     #15181B;
  --brand-2:   #2C3238;
  --on-brand:  #F2F4F6;

  /* --- акцент: «сейчас» --------------------------------------------------
     Плюмаж со шлема. Только состояние: идёт сейчас, открыт набор, активный
     фильтр, ошибка. Меньше 6 % площади страницы. */
  --accent:      #E4001B;
  --accent-ink:  #AF0016;   /* тот же красный, поднятый до 4.5:1 на --bg */
  --accent-soft: #FAE3E5;

  /* Те же два цвета компонентами — для полупрозрачных состояний.
     color-mix() в целевых браузерах отрабатывает не везде и молча роняет
     объявление целиком, поэтому прозрачность считаем через rgb(). */
  --bg-rgb:     235 237 239;
  --accent-rgb: 228 0 27;
  --fg-rgb:     21 24 27;

  /* --- нейтрали для тёмных поверхностей ----------------------------------
     Отдельные значения, а не прозрачность поверх --fg: иначе контраст
     плавает вместе с фоном. Все проверены на --dark. */
  --on-dark-fg-2:   #B7BEC6;   /*  9.50:1 */
  --on-dark-fg-3:   #9BA3AB;   /*  6.98:1 */
  --on-dark-line-2: #4A5158;
  --on-dark-accent: #FF6B79;   /*  6.48:1 */

  /* --- детская страница: единственный сдвиг нейтралей в тепло ------------
     Тёмная агрессивная схема на детской аудитории отталкивает родителя.
     Тон вынесен из кремового кластера 30–50° сознательно. */
  --kids-bg:     #F6F2EF;
  --kids-bg-2:   #EEE6DF;
  --kids-bg-3:   #FFFCFA;
  --kids-line:   #DFD7CF;
  --kids-line-2: #C6BCB2;
  --kids-fg-3:   #6A6259;
  --kids-bg-rgb: 246 242 239;

  /* --- примитивы --------------------------------------------------------- */
  --white:     #FFFFFF;

  /* --- служебные состояния --------------------------------------------- */
  --ok:        #1C6B45;
  --focus:     #0B57D0;

  /* --- типографика ------------------------------------------------------ */
  --display: 'PT Sans Narrow', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif;
  --text:    'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono:    'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* Шкала 1.25 с двумя намеренными разрывами: --t-hero и --t-num вне шкалы. */
  --t-xs:   0.78rem;   /* 12.5 */
  --t-sm:   0.875rem;  /* 14   */
  --t-base: 1.0625rem; /* 17   — кириллице нужен кегль крупнее латинского */
  --t-md:   1.3125rem; /* 21   */
  --t-lg:   1.625rem;  /* 26   */
  --t-xl:   2.0625rem; /* 33   */
  --t-2xl:  2.5625rem; /* 41   */
  --t-3xl:  3.25rem;   /* 52   */
  --t-hero: clamp(2.75rem, 7.4vw, 6.5rem);
  --t-num:  clamp(2.5rem, 6vw, 5rem);

  /* --- ритм --------------------------------------------------------------
     Не одинаковый padding у всех секций: внутри раздела пауза меньше,
     между разделами больше. */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  --gap-tight: clamp(2.5rem, 5vw, 4rem);
  --gap-wide:  clamp(4rem, 9vw, 8rem);

  /* --- сетка ------------------------------------------------------------ */
  --page:    1272px;
  --page-narrow: 720px;
  --pad:     clamp(1rem, 4vw, 2.5rem);

  /* --- форма: четыре разных значения под четыре разные задачи -----------
     Карточки и полосы — прямые углы, как у печатной сетки.
     Органы управления — лёгкое скругление 3px.
     Ярлыки уровня — полная пилюля.
     Индикаторы состояния — круг. */
  --r-0: 0;
  --r-1: 3px;
  --r-pill: 100px;
  --r-circle: 50%;

  /* --- движение --------------------------------------------------------- */
  --d-1: 80ms;
  --d-2: 160ms;
  --d-3: 240ms;
  --d-4: 360ms;
  --d-5: 520ms;
  --d-6: 800ms;
  --e-in:   cubic-bezier(0.2, 0, 0, 1);
  --e-out:  cubic-bezier(0.4, 0, 1, 1);
  --e-move: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- теней в покое нет ------------------------------------------------
     Плоская система: глубину дают кромки, смена фона и наложения.
     Единственная тень на сайте — кольцо фокуса на поле ввода, и она
     объявлена там же, где живёт состояние. */

  --header-h: 68px;
  /* Липкий слой измерен целиком: шапка плюс полоса оглавления.
     Из этих двух считается scroll-padding-top, иначе якорь кладёт
     заголовок под оглавление. По умолчанию ноль: полосы на странице
     может не быть, а под 30em она скрыта.

     Значение ниже — запасное, на случай выключенного скрипта: точную
     высоту полосы ставит site.js по факту отрисовки, потому что пункты
     переносятся и полоса бывает двухрядной. */
  --toc-h: 0px;
}

/* Переменная объявляется на корне, а не на body: scroll-padding-top живёт
   на html, а переменные наследуются вниз, не вверх. С объявлением на body
   правило читало старое значение 0 и якорь недоводил на 31 px. */
@media (min-width: 30.0625em) {
  :root:has(.toc) { --toc-h: 61px; }
}

@media (min-width: 56.25em) {
  :root { --header-h: 84px; }
}