/* Финтабло, веб-система v0.1 от 2026-10-09. СОБРАНО build_tokens.py из design-tokens.json. */
/* Руками не править: правка затрётся при следующей сборке. */
:root {

  /* Цвета брендбука. Не менять */
  --ft-blue: #2951CA; /* Neutral Blue, основной цвет. Должен встречаться во всех коммуникациях. Брендбук стр. 10 */
  --ft-blue-light: #1E8BF2; /* Light Blue, дополнительный. Для мелкого текста не годится (3,5:1 на белом) */
  --ft-black: #141418; /* Black, тёмно-серый с синим оттенком: заливки и плашки. Стр. 12 */
  --ft-white: #FFFFFF; /* White, чистый белый для контраста. Стр. 12 */
  --ft-logo: #142969; /* Цвет знака и надписи логотипа. Только внутри SVG логотипа, интерфейс им не красим */

  /* Акценты брендбука: для отдельных элементов */
  --ft-green: #01B554; /* Акцент: плюс, рост, успех. Только заливкой и в графиках, для текста green-700. Стр. 13 */
  --ft-red: #FF3A1D; /* Акцент: минус, разрыв, ошибка. Заливкой и в графиках, для текста red-700 */
  --ft-violet: #B71DFF; /* Акцент: промо, новинка, ИИ-функции. Не больше одного элемента на экран */
  --ft-amber: #FFAF36; /* Акцент: внимание, предупреждение. Никогда не текстом (1,8:1) */

  /* Оттенки (брендбук стр. 13 разрешает оттенки меньшей насыщенности) */
  --ft-blue-50: #F4F7FF; /* Фон секций и страницы-подложки. Уже на сайте и в микросервисах */
  --ft-blue-100: #EDF2FE; /* Утопленная поверхность: поле ввода, строка таблицы при наведении */
  --ft-blue-150: #E4EAFB; /* Мягкая заливка: вторичная кнопка, выбранный пункт, плашка */
  --ft-blue-200: #DDE6FF; /* Линии и рамки карточек. Уже в /shared/ и на сайте */
  --ft-blue-300: #C7CFE4; /* Рамка поля ввода, сильный разделитель */
  --ft-blue-700: #1C3C9B; /* Наведение и нажатие на синие элементы. Уже --color-primary-dark в /shared/ */
  --ft-navy-900: #091A4E; /* Тёмно-синий: текст, заголовки, тёмные блоки и подвал. Так сайт выглядит сейчас; оттенок синего из палитры (стр. 13 разрешает оттенки) */
  --ft-navy-600: #404C72; /* Вторичный текст: лиды, описания карточек (8,4:1) */
  --ft-gray-500: #5F667F; /* Подписи, даты, сноски. Самый светлый цвет, которым можно писать (5,7:1) */
  --ft-gray-400: #7E86A3; /* Только иконки и декор. Текстом нельзя (3,6:1) */
  --ft-green-700: #017C39; /* Зелёный для текста: «+12%», «хватает денег» (5,3:1) */
  --ft-green-50: #E6F7ED; /* Фон плашки успеха */
  --ft-red-700: #CA2D17; /* Красный для текста: минус, ошибка поля (5,4:1) */
  --ft-red-50: #FFECE8; /* Фон плашки ошибки и разрыва */
  --ft-amber-800: #8C601E; /* Тёмный янтарный для текста предупреждения (5,5:1) */
  --ft-amber-50: #FFF4E1; /* Фон плашки предупреждения */
  --ft-violet-700: #8F10CF; /* Фиолетовый для текста промо-плашки (6,7:1) */
  --ft-violet-50: #F5E8FF; /* Фон промо-плашки */
  --ft-n-50: #F5F6F7; /* Фон чередующейся секции, нейтральный светло-серый (версия 2) */
  --ft-n-100: #EEF0F2; /* Поле ввода, ячейка, строка при наведении (версия 2) */
  --ft-n-200: #E4E6EB; /* Рамки карточек и разделители, 1 px (версия 2) */
  --ft-n-300: #CDD0D7; /* Рамка поля ввода, сильный разделитель (версия 2) */
  --ft-n-400: #8A8D97; /* Только иконки и декор, текстом нельзя (3,4:1) (версия 2) */
  --ft-n-500: #6B6E78; /* Подписи, даты, сноски: 5,1:1 на белом, 4,7:1 на сером (версия 2) */
  --ft-n-600: #4A4D57; /* Подводка и описания: 7,8:1 на сером (версия 2) */
  --ft-ai-700: #6B3FD0; /* ИИ текстом: фиолетовый ближе к синему и спокойнее, 6,5:1 на белом (версия 2) */
  --ft-ai-500: #7C5BE0; /* ИИ заливкой: точка, значок (версия 2) */
  --ft-ai-50: #F0ECFC; /* Фон плашки ИИ (версия 2) */

  /* Роли цвета. В вёрстке используем ТОЛЬКО их, а не HEX */
  --color-bg: var(--ft-white); /* Фон страницы */
  --color-bg-alt: var(--ft-n-50); /* Фон чередующейся секции: нейтральный светло-серый */
  --color-surface: var(--ft-white); /* Карточка, панель, окно */
  --color-surface-sunken: var(--ft-n-100); /* Поле ввода, ячейка, утопленная зона */
  --color-surface-brand: var(--ft-blue); /* Синяя секция или карточка (CTA, промо) */
  --color-surface-inverse: var(--ft-navy-900); /* Тёмные блоки и подвал: тёмно-синий, как на сайте сейчас. Решено с Михаилом 09.10: сайт светлый, без чёрных блоков */
  --color-heading: var(--ft-black); /* Заголовки: чёрный #141418 из палитры DAO (ответ на вопрос 2, версия 2) */
  --color-text: var(--ft-black); /* Основной текст: чёрный #141418 из палитры DAO (версия 2) */
  --color-text-secondary: var(--ft-n-600); /* Подводка, описания */
  --color-muted: var(--ft-n-500); /* Подписи, мета, сноски */
  --color-on-brand: var(--ft-white); /* Текст на синем и чёрном */
  --color-on-brand-muted: #DCE4FA; /* Вторичный текст на синем (5,3:1, было 4,6) */
  --color-link: var(--ft-blue); /* Ссылка в тексте. #0260E8 из палитры выводим */
  --color-link-hover: var(--ft-blue-700); /* Ссылка при наведении */
  --color-border: var(--ft-n-200); /* Рамки карточек, разделители 1 px */
  --color-border-strong: var(--ft-n-300); /* Рамка поля ввода */
  --color-primary: var(--ft-blue); /* Главная кнопка, активный элемент */
  --color-primary-dark: var(--ft-blue-700); /* Главная кнопка при наведении и нажатии */
  --color-primary-soft: var(--ft-blue-150); /* Вторичная кнопка, выбранный пункт */
  --color-focus: var(--ft-blue-light); /* Рамка фокуса с клавиатуры */
  --color-positive: var(--ft-green-700); /* Плюс и успех текстом */
  --color-positive-fill: var(--ft-green); /* Плюс и успех заливкой, в графике */
  --color-positive-bg: var(--ft-green-50); /* Фон плашки успеха */
  --color-negative: var(--ft-red-700); /* Минус и ошибка текстом. Заменяет #E53935 из /shared/ */
  --color-negative-fill: var(--ft-red); /* Минус заливкой, в графике */
  --color-negative-bg: var(--ft-red-50); /* Фон плашки ошибки */
  --color-warning: var(--ft-amber-800); /* Предупреждение текстом */
  --color-warning-fill: var(--ft-amber); /* Предупреждение заливкой */
  --color-warning-bg: var(--ft-amber-50); /* Фон плашки предупреждения */
  --color-promo: var(--ft-ai-700); /* ИИ и промо текстом */
  --color-promo-fill: var(--ft-ai-500); /* ИИ и промо заливкой (оттенок фиолетового палитры ближе к синему, меньше насыщенности) */
  --color-promo-bg: var(--ft-ai-50); /* Фон плашки ИИ */

  /* Графики */
  --chart-1: var(--ft-blue); /* Основной ряд: факт, текущий период */
  --chart-2: var(--ft-blue-light); /* Второй ряд: план, сравнение */
  --chart-3: var(--ft-green-700); /* Поступления, плюс: глубокий зелёный, заливка спокойнее */
  --chart-4: var(--ft-red-700); /* Выплаты, минус: глубокий красный */
  --chart-5: var(--ft-amber); /* Пятый ряд */
  --chart-6: var(--ft-violet); /* Шестой ряд, больше рядов в одном графике не делаем */
  --chart-neutral: var(--ft-n-300); /* Прошлый период, фон столбца */
  --chart-grid: var(--ft-n-200); /* Сетка графика */
  --chart-axis: var(--ft-gray-500); /* Подписи осей */

  /* Градиенты */
  --gradient-brand: linear-gradient(135deg, var(--ft-blue) 0%, var(--ft-blue-light) 100%); /* Синий → голубой. Брендбук стр. 13 разрешает градиенты из палитры, пару и угол предлагаем мы */
  --gradient-promo: linear-gradient(135deg, var(--ft-blue) 0%, var(--ft-violet) 100%); /* Синий → фиолетовый. Обложки вебинаров и акций, ИИ-функции. Пару и угол предлагаем мы */
  --gradient-promo-soft: linear-gradient(135deg, var(--ft-blue-150) 0%, var(--ft-violet-50) 100%); /* Светлая подложка промо-блока, текст на ней тёмный */

  /* Шрифт */
  --font-base: 'LabGrotesque', -apple-system, 'Segoe UI', 'Roboto', 'Arial', sans-serif; /* Lab Grotesque во всех коммуникациях. Стр. 15. Лицензия на веб куплена (подтверждено 25.08.2026) */
  --font-mono: 'LabGrotesqueMono', ui-monospace, 'SF Mono', 'Menlo', monospace; /* Lab Grotesque Mono: только код и технические метки. Для чисел НЕ нужен: в основном шрифте есть моноширинные цифры (tnum). В Mono нет неразрывного пробела */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  /* Шкала текста: --fs размер, --lh межстрочный, --ls трекинг, --fw вес, --ff семейство */
  --fs-display: clamp(44px, 6vw, 96px); /* Только промо и первый экран акции */
  --lh-display: 1;
  --ls-display: -0.04em;
  --fw-display: 500;
  --ff-display: var(--font-base);
  --fs-h1: clamp(34px, 4vw, 58px); /* Один на страницу. Значения как у микросервисов /ai-services/ */
  --lh-h1: 1.05;
  --ls-h1: -0.035em;
  --fw-h1: 500;
  --ff-h1: var(--font-base);
  --fs-h2: clamp(28px, 3vw, 44px); /* Заголовок секции */
  --lh-h2: 1.1;
  --ls-h2: -0.03em;
  --fw-h2: 500;
  --ff-h2: var(--font-base);
  --fs-h3: clamp(22px, 1.9vw, 30px); /* Подзаголовок внутри секции */
  --lh-h3: 1.2;
  --ls-h3: -0.02em;
  --fw-h3: 500;
  --ff-h3: var(--font-base);
  --fs-h4: clamp(18px, 1.3vw, 21px); /* Заголовок карточки */
  --lh-h4: 1.3;
  --ls-h4: -0.01em;
  --fw-h4: 700;
  --ff-h4: var(--font-base);
  --fs-lead: clamp(18px, 1.6vw, 24px); /* Подзаголовок под H1 и H2. Regular, как велит стр. 16 */
  --lh-lead: 1.4;
  --ls-lead: -0.01em;
  --fw-lead: 400;
  --ff-lead: var(--font-base);
  --fs-body: clamp(16px, calc(15px + 0.15vw), 17px); /* Основной текст. Не Light */
  --lh-body: 1.6;
  --ls-body: 0;
  --fw-body: 400;
  --ff-body: var(--font-base);
  --fs-small: 14px; /* Описания в карточках, подписи к полям */
  --lh-small: 1.5;
  --ls-small: 0;
  --fw-small: 400;
  --ff-small: var(--font-base);
  --fs-caption: 13px; /* Сноски, даты, юридический текст (здесь можно Light 300) */
  --lh-caption: 1.45;
  --ls-caption: 0;
  --fw-caption: 400;
  --ff-caption: var(--font-base);
  --fs-overline: 14px; /* Подпись над заголовком, плашка. Обычный регистр, Medium. Капс с разрядкой на сайте не используется */
  --lh-overline: 1.3;
  --ls-overline: 0;
  --fw-overline: 500;
  --ff-overline: var(--font-base);
  --fs-num-xl: clamp(36px, 4.2vw, 64px); /* Крупное число. Lab Grotesque Medium с моноширинными цифрами, как HEX на стр. 10-12 брендбука */
  --lh-num-xl: 1;
  --ls-num-xl: -0.03em;
  --fw-num-xl: 500;
  --ff-num-xl: var(--font-base);
  --fs-button: 16px; /* Текст кнопки */
  --lh-button: 1.2;
  --ls-button: 0;
  --fw-button: 500;
  --ff-button: var(--font-base);

  /* Отступы */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;
  --space-section: clamp(72px, 10vw, 176px); /* Отступ секции сверху и снизу. Много воздуха: секция дышит, как разворот брендбука */
  --space-grid: clamp(16px, 1.6vw, 24px); /* Промежуток между карточками */
  --space-title-lead: clamp(20px, 2vw, 28px); /* Воздух: заголовок страницы → подводка. На телефоне 20 */
  --space-lead-cta: clamp(28px, 3vw, 40px); /* Воздух: подводка → кнопки. На телефоне 28 */
  --space-head-text: clamp(16px, 1.6vw, 24px); /* Воздух: заголовок блока → его текст. На телефоне 16 */
  --space-sub-text: 12px; /* Воздух: подзаголовок → текст. Внутри карточки 8 */
  --space-head-content: clamp(40px, 5vw, 72px); /* Воздух: заголовок блока → карточки, макапы, таблицы. На телефоне 40 */
  --space-list: 12px; /* Воздух: между пунктами списка, без разделительных линий */

  /* Раскладка */
  --container: 1760px; /* Ширина оболочки: шапка, контент и подвал одной ширины. Как у /ai-services/ */
  --gutter: clamp(16px, 4vw, 56px); /* Поля по краям */
  --text-max: min(100%, 1400px); /* Предел строки на 2560+. Текст занимает свою колонку целиком */
  --read-col: 900px; /* Колонка чтения ТОЛЬКО в статьях, рядом рубрикатор и оглавление */
  --header-h: 80px; /* Высота шапки. На телефоне 56px */

  /* Скругления */
  --radius-sm: 6px; /* Метки, мелкие кнопки, ячейки */
  --radius-md: 8px; /* Кнопки, поля ввода, контурные плашки. Как на fintablo.ru */
  --radius-lg: 12px; /* Карточки. Как на fintablo.ru */
  --radius-xl: 16px; /* Большие панели, рамка скриншота продукта и видео */
  --radius-pill: 999px; /* Только круглое: аватар, точка списка, кнопка-стрелка */

  /* Тени */
  --shadow-sm: 0 1px 2px rgba(20,20,24,.06), 0 4px 14px rgba(20,20,24,.05); /* Одна система теней, нейтрально-серая: карточка в покое */
  --shadow-md: 0 6px 20px rgba(20,20,24,.08); /* Карточка при наведении, выпадающее меню */
  --shadow-lg: 0 12px 32px -10px rgba(20,20,24,.16); /* Крупный макет продукта: чуть глубже, но короткая */

  /* Высота кнопок и полей */
  --control-sm: 40px; /* Кнопка в шапке, в таблице */
  --control-md: 48px; /* Обычная кнопка и поле */
  --control-lg: 56px; /* Главное действие экрана */

  /* Движение */
  --dur-fast: 150ms; /* Наведение, нажатие */
  --dur-base: 250ms; /* Раскрытие, смена состояния */
  --dur-slow: 400ms; /* Появление блока, рост графика */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* Основная кривая */

  /* Совместимость со старыми именами /shared/css/main.css */
  --color-muted-light: var(--ft-gray-500);
  --color-error: var(--ft-red-700);
  --color-footer: var(--color-surface-inverse);
  --color-footer-link: #B7C3EC;
  --radius: var(--radius-md);
  --space-xs: var(--space-8);
  --space-s: var(--space-16);
  --space-m: var(--space-24);
  --space-l: var(--space-48);
  --space-xl: var(--space-80);
}

@media (max-width: 767.98px) {
  :root {
    --header-h: 56px;
  }
}