/* ============================================================================
   MXTM · Surface S (Site) — foundation tokens
   ----------------------------------------------------------------------------
   ИСТОЧНИК ЗНАЧЕНИЙ, а не «похожая палитра»:

   1. Дизайн-система Client Cabinet (Surface C) — docs/backlog/pbi-007_design-system/
      pbi-007_prototype_desktop.html, блок :root, токены --xf-*. Отсюда взяты
      --xf-lime / --xf-lime-hi / --xf-lime-deep / --xf-graphite / --xf-white /
      --xf-fog / --xf-lavender / --xf-coral / --xf-ok и обе гарнитуры.
      Значения СКОПИРОВАНЫ дословно: расхождение сайта с кабинетом по фирменному
      цвету — дефект, а не вариация.

   2. Брендбук MXTM (docs/design/brand/README.md, docs/design/brand-rebrand-2026-09-21.md):
      Black 0A0B0D · White FFFFFF · Neon Lime BBFF00 · line-height 130 % ·
      гарнитуры Unbounded (display) + Manrope (text).
      Чёрный БРЕНДБУЧНЫЙ (0A0B0D), а не #000000 из скачанного favicon —
      README знака прямо предписывает брать 0A0B0D на новых поверхностях.

   3. Собственные токены поверхности (--s-*) — тёмная витрина, которой у кабинета
      нет: у кабинета светлая тема, у сайта тёмная. Это НЕ вторая дизайн-система:
      цвет акцента, гарнитуры и радиусы приходят сверху, --s-* только раскладывает
      тёмные подложки поверх --xf-graphite.

   Проверяется машинно: node tools/site-gate.mjs (проверка «токены сайта равны
   токенам ДС кабинета»). Правка значения --xf-* здесь без правки в ДС красит гейт.
   ============================================================================ */

:root {
  /* ---- 1. Унаследовано от ДС кабинета (Surface C) · pbi-007 ---------------- */
  --xf-lime:        #BBFF00;   /* фирменный акцент — Neon Lime брендбука */
  --xf-lime-hi:     #CDFF4B;   /* светлее: hover */
  --xf-lime-deep:   #A6E600;   /* темнее: active/pressed */
  --xf-lime-ink:    #5C6B00;   /* текст акцентом по светлому */
  --xf-graphite:    #202020;
  --xf-graphite2:   #2A2A2A;
  --xf-white:       #FFFFFF;
  --xf-fog:         #F4F4F6;
  --xf-lavender:    #C0C7FD;
  --xf-coral:       #FF5E5B;
  --xf-ok:          #1F8F4D;
  --xf-online:      #3DDC7E;
  --xf-muted:       #6E6E73;
  --xf-font:    "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --xf-display: "Unbounded", system-ui, -apple-system, sans-serif;
  --xf-mono:    ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* ---- 2. Брендбук MXTM ---------------------------------------------------- */
  --mxtm-black:     #0A0B0D;
  --mxtm-white:     #FFFFFF;
  --mxtm-lime:      var(--xf-lime);
  --mxtm-leading:   1.3;       /* line-height 130 % */

  /* ---- 3. Поверхность S: тёмная витрина ------------------------------------ */
  /* ЛЕСТНИЦА ПОДЛОЖЕК — ИСХОДНОЙ ВИТРИНЫ ЦЕЛИКОМ, а не один перекрашенный фон.
     Он объявляет её сам: cold-grey-100 #1a1919 страница, -90 #202020 карточка,
     -80 #272727 строка, -70 #363636 линия. Поменять только фон было нельзя:
     #1A1919 у нас занимала карточка, и страница слилась бы с ней в один тон.
     `--mxtm-black` при этом НЕ трогается — это брендбучный чёрный из ДС
     кабинета, он остаётся собой и используется там, где нужен именно он. */
  --s-bg:           #1A1919;   /* страница — как у исходника */
  --s-bg-alt:       var(--xf-graphite);         /* #202020 */
  --s-surface-1:    var(--xf-graphite);         /* #202020 — карточка на фоне страницы */
  --s-surface-2:    #272727;   /* карточка на карточке */
  --s-surface-3:    #2F2F2F;   /* строка таблицы, инпут */
  --s-surface-4:    #363636;   /* hover по строке */
  --s-line:         #363636;
  --s-line-soft:    rgba(255, 255, 255, .08);

  --s-text:         var(--mxtm-white);
  --s-text-2:       rgba(255, 255, 255, .72);
  /* .55, а не прежние .48 — лестница подложек стала светлее вслед за фоном
     исходника, и на самой светлой из них (#363636) третий текст давал 4,09
     против порога 4,5. Значение посчитано, а не подобрано: .52 даёт 4,57,
     .55 — 4,91, то есть запас на случай, если подложка сдвинется ещё раз. */
  --s-text-3:       rgba(255, 255, 255, .55);
  --s-text-on-accent: var(--mxtm-black);

  --s-accent:       var(--xf-lime);
  --s-accent-hi:    var(--xf-lime-hi);
  --s-accent-deep:  var(--xf-lime-deep);
  --s-accent-dim:   rgba(187, 255, 0, .12);
  --s-accent-glow:  rgba(187, 255, 0, .28);

  --s-danger:       var(--xf-coral);
  --s-success:      var(--xf-online);

  /* Радиусы — лестница кабинета, продолженная вверх: витрине нужны крупные
     скругления карточек-секций, которых у форм кабинета не бывает. */
  --s-r-xs:  8px;
  --s-r-sm:  12px;
  --s-r-md:  16px;
  --s-r-lg:  24px;
  --s-r-xl:  32px;
  --s-r-pill: 999px;

  /* Шаг ритма — 4px, как в кабинете */
  --s-sp-1:  4px;
  --s-sp-2:  8px;
  --s-sp-3:  12px;
  --s-sp-4:  16px;
  --s-sp-5:  24px;
  --s-sp-6:  32px;
  --s-sp-7:  48px;
  --s-sp-8:  64px;
  --s-sp-9:  96px;
  --s-sp-10: 128px;

  /* Контейнер: 1280px — та же предельная ширина контента, что у оболочки
     кабинета (.sh-body.capped), плюс боковой зазор 16px из правил прототипов. */
  /* Ширина и поля — исходной витрины: контейнер 1240 при поле 20, то есть
     полезная ширина 1200. У нас было 1280 при поле 16 (полезные 1280): строка
     длиннее на 80 px, и при той же типографике текст читался разреженнее, а
     блоки — крупнее. Токен назван по ПОЛЕЗНОЙ ширине, поэтому 1200. */
  --s-container: 1200px;
  --s-gutter: 20px;

  /* Типографика витрины. Крупные кегли — clamp: витрина живёт от 320 до 1920,
     фиксированный кегль на этом диапазоне либо ломает мобильный, либо теряется
     на широком. */
  /* ШКАЛА — ИСХОДНОЙ ВИТРИНЫ, снятая браузером, а не подобранная.
     Она НЕ плавная: у исходника один брейкпоинт на всю типографику — 991 px, —
     и по обе стороны от него значения фиксированы. Прежняя редакция строила
     шкалу на clamp() и промахивалась в обе стороны сразу: на 1440 заголовки
     выходили МЕЛЬЧЕ исходных (66 против 90 у h1, 52 против 64 у h2), а текст
     и отступы — КРУПНЕЕ, и вместе это давало ту самую «крупноватость»: слабый
     контраст между заголовком и набором.

     Значение до / после 991 px:
       h1   90 / 42     h4   34 / 20     body  16 / 14
       h2   64 / 32     h5   24 / 18     small 14 / 14
       h3   64 / 24     sub  24 / 20     tiny  12 / 12  */
  --s-h1: 90px;
  --s-h2: 64px;
  --s-h3: 64px;
  --s-h4: 34px;
  --s-h5: 24px;
  --s-sub: 24px;
  --s-body: 16px;
  --s-small: 14px;
  --s-tiny: 12px;

  --s-shadow-card: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 24px 60px rgba(0, 0, 0, .45);
  --s-shadow-accent: 0 0 0 1px var(--s-accent-glow), 0 12px 40px rgba(187, 255, 0, .18);

  --s-ease: cubic-bezier(.22, .61, .36, 1);
  --s-dur: .28s;
}

/* Уважение к системной настройке «меньше движения»: AOS и бегущие строки
   выключаются целиком. Правило стоит в токенах, а не в site.css, потому что оно
   касается всех носителей движения, включая вендорные. */
@media (prefers-reduced-motion: reduce) {
  :root { --s-dur: .001s; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================================
   Вторая половина шкалы. У исходной витрины типографика переключается ОДНИМ
   брейкпоинтом 991 px и не тянется между ними — это осознанный выбор, а не
   упрощение: плавный clamp() даёт на каждой промежуточной ширине значение,
   которого никто не видел, и подогнать под него компоновку нельзя.
   ============================================================================ */
@media (max-width: 991px) {
  :root {
    --s-h1: 42px;
    --s-h2: 32px;
    --s-h3: 24px;
    --s-h4: 20px;
    --s-h5: 18px;
    --s-sub: 20px;
    --s-body: 14px;
  }
}