/* ============================================================
   ALLVISIO · DESIGN TOKENS — единый источник правды (single source of truth)
   Общие цвета, шрифты и радиусы всего сайта. Подключать ПЕРВЫМ на каждой
   странице, до CSS конкретной страницы:  <link rel="stylesheet" href="./css/tokens.css">

   Источник всех токенов — основной сайт:
   · Цвета / типографика / движение : :root из assets/index-BMGp7XbG.css
   · Шрифты                          : те же self-hosted woff2, что preload'ятся в index.html
                                     (Manrope 200–800 variable + Instrument Serif italic)
   · Радиусы                         : в :root основного сайта их нет — значения вынесены из
                                     реального использования: .pcard 28px, .pframe 14/12px,
                                     .tmenu-panel .6rem, пилюли 999px, круги 50%

   Страница может переопределить любой токен локально в своём :root (свой файл
   подключается после tokens.css) — например devcalc использует нулевые радиусы.
   При смене палитры/шрифтов правится только этот файл.
   ============================================================ */

/* ---------- Шрифты (self-hosted woff2, подпаки: latin / cyrillic / ext) ---------- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/manrope-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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/instrument-serif-italic-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: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/manrope-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* ---------- Токены ---------- */
:root {
  /* Цвета — фон и линии */
  --bg: #0a0a0a;
  --stroke: #1f1f1f;

  /* Цвета — текст */
  --text: #f5f5f5;
  --text-soft: #c5c5c5;
  --text-faint: #8a8a8a;

  /* Акцент (красный) и производные */
  --em: #E6362D;
  --em-soft: #F5A29E;
  --em-deep: #801614;
  --bordeaux: #A63D57;

  /* Типографика — шкала размеров */
  --fs-0: .9rem;
  --fs-1: 1.12rem;
  --fs-2: 1.4rem;
  --fs-3: 1.75rem;
  --fs-4: 2.19rem;
  --fs-5: 2.73rem;
  --fs-6: 3.42rem;
  --fs-7: 4.27rem;

  /* Типографика — лейблы (надзаголовки) */
  --label-lg-size: .72rem;
  --label-lg-track: .32em;
  --label-sm-size: .66rem;
  --label-sm-track: .28em;

  /* Шрифтовые семейства */
  --font-sans: 'Manrope', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;

  /* Радиусы — из реального использования на основном сайте (в :root их нет) */
  --radius-sm: .6rem;    /* .tmenu-panel — мелкие панели */
  --radius-md: 12px;     /* .pframe @≤767px */
  --radius-lg: 14px;     /* .pframe — внутренние рамки карточек */
  --radius-xl: 28px;     /* .pcard — основная карточка сайта */
  --radius-pill: 999px;  /* .nav-menu-btn, .tmenu-story — пилюли */
  --radius-full: 50%;    /* курсор-доты и прочие круги */

  /* Движение */
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* Каркас — горизонтальный отступ контейнера меню (nav в css/chrome.css).
     ОДИН источник правды для всех статик-страниц: на эту величину инсатятся
     и навбар, и контентные части секций (заголовки, текст) — см. ARCHITECTURE.md §17.
     Значения совпадают с nav главной (index-BMGp7XbG.css): 2rem / 3rem с 768px. */
  --nav-pad-x: 2rem;
}

@media (min-width: 768px) {
  :root { --nav-pad-x: 3rem; }
}

/* ---------- Базовая типографика и сетка (общие для всех разделов) ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: var(--bg);
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}

button, input, select, textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--em);
  outline-offset: 3px;
}

/* ---------- Скроллбар — единый дизайн для всех страниц ----------
   ЭТАЛОН — страница /about (тёмный трек --bg, приглушённый ползунок --stroke).
   Определяется ОДИН раз здесь (tokens.css подключается первым на всех страницах);
   в CSS конкретных страниц НЕ дублировать и не переопределять.
   --sbw — ширина под ползунок; сетка /about резервирует её в --grid-width.
   См. ARCHITECTURE.md §19. */
:root { --sbw: 12px; }

::-webkit-scrollbar { width: var(--sbw); }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--stroke); }