/* Strateka'Pro — design tokens (generated from the guideline tokens.json). Dark theme only. */

:root {
  color-scheme: dark;
  /* color */
  --bg: #120F1C;  /* Фон всех страниц сайта и админки. Под портретом — он же в градиентах затемнения. */
  --bg-sidebar: #15121F;  /* Фон бокового меню админки. */
  --surface-sunken: #17131F;  /* Тихие панели на сайте: блок «Важно · 70%», «Место в классификации» на странице кейса. */
  --surface: #1B1727;  /* Карточки, формы, плитки показателей, таблицы, карточки кейсов и контекстов. */
  --surface-hover: #211C30;  /* Карточка-ссылка при наведении (вместе с границей accent 60%). */
  --surface-raised: #26203A;  /* Всплывающие меню, подсказки графиков, тултипы. */
  --surface-strong: #2A2438;  /* Кружки-аватары с инициалами. */
  --surface-icon: #1E1A2B;  /* Плашка под знаком в иконке приложения и фавиконе. */
  --line: rgba(255, 255, 255, 0.08);  /* Тонкие разделители, границы карточек, линия под шапкой. */
  --line-strong: rgba(255, 255, 255, 0.12);  /* Границы панелей и стеклянных форм, разделители цифр в рядах статистики. */
  --line-control: rgba(255, 255, 255, 0.36);  /* Граница полей ввода и вторичных кнопок — 3,3:1 на bg и surface. В текущих макетах поля нарисованы с 0.12–0.14, вторичные кнопки с 0.28: при вёрстке ставить это значение. */
  --ink: #F4F1EE;  /* Основной текст и заголовки на bg, surface, surface-raised (от 13,8:1). */
  --ink-strong: #FFFFFF;  /* Активный пункт меню, наведение на ссылку. */
  --ink-2: #C9C4D1;  /* Лиды, текст в карточках, неактивные пункты меню; на всех фонах от 9:1. */
  --ink-muted: #A9A4B3;  /* Подписи, метаданные, подписи к цифрам; на всех фонах от 6,4:1. */
  --ink-faint: #8C8797;  /* Плейсхолдеры, заголовки групп меню, подписи осей; от 4,5:1 (на surface-raised — ровно 4,5). */
  --ink-disabled: #6F6A7A;  /* Только неактивные шаги и выключенные элементы, 3,0–3,6:1. Не для читаемого текста. */
  --accent: #F0566A;  /* Фирменный красный: знак логотипа, номера шагов, цифры-акценты, выбранное значение, фокус-обводка, столбики графиков. Как текст — на bg и surface (5,2–5,6:1). */
  --accent-fill: #C21F37;  /* Заливка главной кнопки. Текст на ней — on-accent (5,9:1). */
  --accent-fill-hover: #A91A2F;  /* Главная кнопка при наведении (on-accent 7,3:1). */
  --accent-soft: rgba(240, 86, 106, 0.14);  /* Подложка выбранного пункта меню, бейджа «тестовый период», выбранного чипа. */
  --accent-text: #F7A3AE;  /* Текст на accent-soft (7,6:1): бейдж «Бесплатный тестовый период», подпись тарифа «1 год». */
  --on-accent: #FFFFFF;  /* Текст и иконки на accent-fill. */
  --inverse: var(--ink);  /* Светлая кнопка: активный «Вход», «Понятно» в окне cookie, выбранный сегмент. */
  --on-inverse: var(--bg);  /* Текст на inverse (16,8:1). */
  --success: #6FD8A8;  /* Статус «Оплачен», «Опубликован», рост показателя. Всегда с иконкой и словом. */
  --success-soft: rgba(60, 203, 143, 0.12);  /* Подложка чипа success (текст 8,2:1). */
  --warning: #F2C46D;  /* «Истекает сегодня», «Ожидает оплаты», «Битая ссылка», плашка «Демо-данные». С иконкой и словом. */
  --warning-soft: rgba(242, 181, 68, 0.14);  /* Подложка чипа warning (текст 8,1:1). */
  --danger: #FF8A99;  /* Ошибка, «Заблокирован», удаление. Оттенок близок к accent — поэтому только с иконкой и словом. */
  --danger-soft: var(--accent-soft);  /* Подложка чипа danger (текст 6,6:1). */
  --chart-bar: var(--accent);  /* Столбики и полосы графиков — одна серия, один цвет. */
  --chart-bar-hover: #FF8A99;  /* Столбик под курсором. */
  --chart-grid: rgba(255, 255, 255, 0.07);  /* Линии сетки графиков; базовая линия — line-strong. */
  --font-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --font-sans: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-22: 88px;
  --space-26: 104px;
  --page-gutter: 4.5%;
  /* radius */
  --radius-xs: 4px;
  --radius-s: 8px;
  --radius-m: 10px;
  --radius-l: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-pill: 999px;
  /* shadow */
  --shadow-popover: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-banner: 0 16px 40px rgba(0, 0, 0, 0.45);
  --shadow-tooltip: 0 8px 20px rgba(0, 0, 0, 0.4);
  /* size */
  --content-max: 1240px;
  --header-h: 88px;
  --sidebar-w: 248px;
  --control-h: 52px;
  --control-h-admin: 40px;
  --touch-min: 44px;
  /* blur */
  --blur-glass: 16px;
  --blur-header: 10px;
}

/* text styles */
.t-display-hero { font-family: var(--font-display); font-size: 58px; line-height: 1.08; font-weight: 500; letter-spacing: -0.01em; }
.t-display-page { font-family: var(--font-display); font-size: 52px; line-height: 1.1; font-weight: 500; letter-spacing: -0.01em; }
.t-heading-section { font-family: var(--font-display); font-size: 32px; line-height: 1.2; font-weight: 500; }
.t-heading-admin { font-family: var(--font-display); font-size: 28px; line-height: 1.2; font-weight: 500; }
.t-heading-card { font-family: var(--font-display); font-size: 20px; line-height: 1.25; font-weight: 500; }
.t-number-hero { font-family: var(--font-display); font-size: 96px; line-height: 1; font-weight: 500; }
.t-number-l { font-family: var(--font-display); font-size: 40px; line-height: 1; font-weight: 400; }
.t-number-m { font-family: var(--font-display); font-size: 28px; line-height: 1; font-weight: 400; }
.t-step-index { font-family: var(--font-display); font-size: 13px; line-height: 16px; font-weight: 400; }
.t-lead { font-family: var(--font-sans); font-size: 22px; line-height: 1.45; font-weight: 400; }
.t-lead-s { font-family: var(--font-sans); font-size: 20px; line-height: 1.55; font-weight: 400; }
.t-body-l { font-family: var(--font-sans); font-size: 17px; line-height: 1.65; font-weight: 400; }
.t-body { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; font-weight: 400; }
.t-body-s { font-family: var(--font-sans); font-size: 15px; line-height: 1.55; font-weight: 400; }
.t-ui { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 500; }
.t-button { font-family: var(--font-sans); font-size: 15px; line-height: 1; font-weight: 600; }
.t-caption { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; font-weight: 400; }
.t-label { font-family: var(--font-sans); font-size: 11px; line-height: 15px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.t-eyebrow { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }