/* ============================================================
   SupaLab Design System v3 — токены для сайта
   СГЕНЕРИРОВАНО из D:\supalab-shared\design-system	okens   Руками не править: правки вносятся в дизайн-систему
   (проект Claude Design 9bb442aa-89e5-43a1-a829-5dbfdba63d66),
   затем этот файл пересобирается.
   Пути к шрифтам оставлены как в оригинале: ../assets/fonts/
   (url() в CSS считается от файла стилей, css/ -> корень -> assets/).
   ============================================================ */

/* ============================================================
   SupaLab — Manrope (self-hosted woff2, variable 200–800)
   ONE typeface in the system. There is no second family.
   ============================================================ */

@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('../assets/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}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('../assets/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('../assets/fonts/manrope-greek.woff2') format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('../assets/fonts/manrope-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('../assets/fonts/manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('../assets/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}

/* ============================================================
   SupaLab — Цвет
   Светлая тема — единственная. Тёмное поле не поверхность
   системы, а фон под кадром видео или слайдом 16:9.

   Чернила синие: #00172E. Вся нейтральная шкала выведена из них —
   и текст, и поверхности, и линейки, и заливки графиков. Держать
   их в одном семействе обязательно: рядом с синим нейтральный
   серый выглядит грязным.

   Прежняя нейтральная шкала лежит в backup-neutral-ink/colors.css.
   ============================================================ */

:root{
  /* ---- Акценты ---- */
  --pink:            #E8175D; /* палочка, каретка, деталь в знаке, тень кнопки */
  --highlight-pink:  #FFD3E2; /* фон под фразой в тексте — внимание */
  --mint:            #CDEBD6; /* фон под фразой-результатом */
  --link:            #3557A0; /* ссылка внутри абзаца */
  --status-green:    #4E8F5C; /* подтверждено, доступно */
  --status-amber:    #9C6B12; /* скоро */

  /* ---- Текст ---- */
  --ink:        #00172E; /* основной текст, кнопки, рамки первого уровня */
  --ink-2:      #33465C; /* подводка, вводные абзацы */
  --ink-3:      #43566B; /* списки, пояснения */
  --ink-body:   #1B2E44; /* длинный основной текст */
  --ink-muted:  #7E8A99; /* метки, подписи, объёмы */
  --ink-figure: #DDE3EA; /* крупные номера перечисления 01, 02, 03 */
  --ink-invert: #FFFFFF;

  /* ---- Поверхности ---- */
  --surface-page:  #FFFFFF; /* основной фон */
  --surface-band:  #F5F8FA; /* полоса ритма — каждая вторая-третья секция */
  --surface-docs:  #EDF2F6; /* полоса документов, подложка под лист */
  --surface-paper: #E9EEF3; /* холодная бумага — плашки и вторичная кнопка */
  --surface-paper-hover: #DDE5EC;

  /* ---- Линии ---- */
  --line-section: #E4E9EF; /* граница секции */
  --line:         #E6EAEF; /* внутренние линейки списков */
  --line-2:       #DCE3EA; /* линейки на тонированном фоне */
  --line-box:     #DCE2E9; /* рамка блока */
  --line-control: #D5DDE6; /* рамка неактивного переключателя */
  --line-paper:   #D2DAE3; /* рамка вторичной кнопки */
  --line-sheet:   #BFC7D1; /* рамка листа документа */
  --line-page:    #CBD5DF; /* рамка страницы в карте источников */
  --line-axis:    #C0CBD7; /* базовая линия в масштабе */
  --fill-page:    #F0F4F8; /* заливка страницы в карте источников */
  --fill-mass:    #D6DFE8; /* «было» в масштабе */
  --line-mass:    #C4CFDB;
  --line-rule:    #E1E6EC; /* абстрактные строки на странице */

  /* ---- Тёмное поле (НЕ поверхность системы) ----
     Только фон под кадром видео или слайдом 16:9. */
  --frame-dark: #0B0F1E;
}

::selection{ background:var(--highlight-pink); }

/* ============================================================
   SupaLab — Типографика
   Manrope и только Manrope. Второй гарнитуры в системе нет.
   ============================================================ */

:root{
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Веса ---- */
  --w-regular:  400; /* @kind other */
  --w-medium:   500; /* @kind other */
  --w-bold:     700; /* @kind other */
  --w-black:    800; /* @kind other */

  /* ---- Роли (экран) ---- */
  /* Заголовок страницы — 60 / 800 / −0.045em / 0.99 */
  --t-page-size: 60px;  --t-page-weight: 800; --t-page-tracking: -0.045em; --t-page-leading: 0.99;
  /* Заголовок секции — 42 / 700 / −0.042em / 1.0 */
  --t-section-size: 42px; --t-section-weight: 700; --t-section-tracking: -0.042em; --t-section-leading: 1.0;
  /* Подзаголовок — 30 / 800 / −0.035em / 1.05 */
  --t-sub-size: 30px; --t-sub-weight: 800; --t-sub-tracking: -0.035em; --t-sub-leading: 1.05;
  /* Крупная цитата — 34 / 800 / −0.04em / 1.15 */
  --t-quote-size: 34px; --t-quote-weight: 800; --t-quote-tracking: -0.04em; --t-quote-leading: 1.15;
  /* Подводка — 19 / 500 / 1.55 */
  --t-lead-size: 19px; --t-lead-weight: 500; --t-lead-leading: 1.55;
  /* Основной текст — 17–18 / 400 / 1.6–1.7 */
  --t-body-size: 18px; --t-body-weight: 400; --t-body-leading: 1.65;
  --t-body-sm-size: 17px;
  /* Метка — 12 / 700 / 0.12em / caps */
  --t-label-size: 12px; --t-label-weight: 700; --t-label-tracking: 0.12em;
  /* Серая цифра перечисления — 38–42 / 800 / −0.045em */
  --t-figure-size: 40px; --t-figure-weight: 800; --t-figure-tracking: -0.045em;
  /* Метрика — 22–30 / 800 / −0.04em, число и знак одним куском */
  --t-metric-size: 30px; --t-metric-weight: 800; --t-metric-tracking: -0.04em;

  /* ---- Слайды 1920 × 1080 ---- */
  --slide-title:    92px;  /* 88–96 */
  --slide-subtitle: 40px;
  --slide-body:     28px;  /* минимум; ниже 24px не опускаться никогда */
  --slide-min:      24px;

  /* ---- Меры набора ---- */
  --measure-lead: 46ch;  /* строка подзаголовка не длиннее 46 знаков */
  --measure-body: 62ch;  /* длина строки основного текста 52–66 знаков */
}

/* ============================================================
   SupaLab — Раскладка
   Контейнер 1280px, боковые поля 40px, ритм секции 72px.
   ============================================================ */

:root{
  --container: 1280px;
  --container-text: 1180px; /* текстовые секции дизайн-гайда */
  --gutter: 40px;
  --section-rhythm: 72px;
  --section-pad: 64px;

  /* Шаг вертикали */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 18px;
  --s-5: 20px;
  --s-6: 26px;
  --s-7: 30px;
  --s-8: 34px;
  --s-9: 40px;
  --s-10: 44px;
  --s-12: 56px;
  --s-14: 64px;
  --s-16: 72px;
  --s-20: 80px;

  /* Отступ от заголовка до подзаголовка */
  --gap-title-lead: 28px;

  /* Пропорции */
  --aspect-a4: 1 / 1.414;  /* @kind other */
  --aspect-slide: 16 / 9;  /* @kind other */
  /* 1069 × 231 */
  --logo-ratio: 4.63; /* @kind other */
}

/* ============================================================
   SupaLab — Форма, глубина, движение
   Радиус 2px. Тень одна на всю систему.
   ============================================================ */

:root{
  /* ---- Форма ---- */
  --radius: 2px;       /* всё */
  --radius-frame: 3px; /* крупные кадры */
  /* Круглые — только кнопка воспроизведения и аватары */
  --radius-round: 50%;

  --border: 1px;
  --border-strong: 1.5px; /* кнопка первого уровня */

  /* ---- Глубина ----
     Тень одна на всю систему. Только под страницей документа
     и под белой карточкой на тёмном поле. Всё остальное
     отделяется линейкой или фоновым тоном. */
  --shadow-sheet: 0 26px 50px -22px rgba(29, 45, 64, 0.45);
  /* Смещённая тень кнопки первого уровня — не глубина, а приём */
  --shadow-button: 6px 6px 0 var(--pink);
  --shadow-button-hover: 2px 2px 0 var(--pink);

  /* ---- Движение ----
     Почти всё время на торможение. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);          /* @kind other */
  --dur-hover: 160ms;                              /* @kind other */
  --dur-enter: 1100ms;                             /* @kind other */
  --dur-caret: 1.1s;                               /* @kind other */
  --stagger-min: 90ms;                             /* @kind other */
  --stagger-max: 300ms;                            /* @kind other */
  --enter-blur: 8px;
  --enter-shift: 10px; /* смещение не больше 10px */

  /* Поле кадра — двойная рамка */
  --frame-inset: 12px;

  /* ---- Фотография ----
     Люди в системе появляются только через эти правила. */
  --photo-radius: 2px;
  /* портрет */
  --photo-ratio: 3 / 4; /* @kind other */
  /* сцена, баннер */
  --photo-ratio-wide: 3 / 2; /* @kind other */
  --photo-tone: var(--surface-paper);   /* подложка пустого слота */
  /* Затемнение снизу под белую подпись. Единственный разрешённый
     градиент в системе — работает только поверх фотографии. */
  --photo-scrim: linear-gradient(to top, rgba(11,15,30,0.82) 0%, rgba(11,15,30,0.45) 38%, rgba(11,15,30,0) 72%); /* @kind other */
}

@keyframes sl-blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes sl-enter{ from{opacity:0;filter:blur(8px);transform:translateY(10px)} to{opacity:1;filter:blur(0);transform:none} }

/* ============================================================
   SupaLab — базовые правила набора
   ============================================================ */

body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
}

p{ text-wrap:pretty; }

/* Кнопки, меню и логотип чернильные, розовеют при наведении.
   Ссылка внутри абзаца — синяя, это отдельное правило (.sl-link). */
a{ color:var(--ink); text-decoration:none; transition:color var(--dur-hover) var(--ease); }
a:hover{ color:var(--pink); }

/* Ссылка в тексте — синяя, подчёркивание постоянное */
.sl-link,
p a:not([class]){
  color:var(--link);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.sl-link:hover,
p a:not([class]):hover{ color:var(--link); }


/* Слова вида «ИИ-коллеге» браузер по умолчанию переносит по дефису,
   и в крупном заголовке две буквы уезжают на предыдущую строку.
   Класс держит такое слово целиком. */
.nb{white-space:nowrap}