/* Финалка — токены. Светлая тема по умолчанию, тёмная — [data-theme="dark"]. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&family=Onest:wght@600;700;800&family=Rubik:wght@800&display=swap");

:root, [data-theme="light"] {
  --bg: #F5F3EF;  /* Paper / Base — фон страницы продукта и основной фон маркетинга (схема «Бумага»). Никогда не #FFFFFF. */
  --surface: #FFFDFB;  /* Surface — карточки, панели, шапка, поля ввода. На сайте — карточки на `bg`. */
  --surface-2: #EFECE5;  /* Surface Sunk — вторичные кнопки, чипы, поля в покое, реакции, ховер ghost-кнопки. */
  --surface-3: #E7E4DD;  /* Surface 3 — активные подложки. Светлое значение в исходнике не задано: временно равно `border`, уточнить по коду. */
  --border: #E7E4DD;  /* Граница 1px карточек, полей, шапки, залипающих зон ленты (в светлой теме). */
  --border-strong: #D6D2C9;  /* Усиленная граница: разделители групп, контур текущей версии. */
  --text: #1C1917;  /* Ink — основной текст на `bg`, `surface`, `surface-2` (≥15:1 в обеих темах). Вордмарк в маркетинге. */
  --text-secondary: #57534E;  /* Вторичный текст, подзаголовки маркетинга на `bg` и `sand` (6.9:1 / 7.0:1). */
  --text-muted: #A8A29E;  /* Приглушённый: даты, бейджи ролей, метки над заголовком. Светлый 2.3:1 на `bg` — не для смыслового текста; тёмный 3.7:1 — только ≥ 24px или как вспомогательная подпись. */
  --accent: #1C1917;  /* Интерактив и актив — монохром: ссылки, фокус, активная вкладка, активный сегмент фильтра, своя реакция. НЕ зелёный. */
  --accent-solid: #17A862;  /* Цвет действия: главная кнопка, одна на экран. Отмеченный чекбокс. На светлом белый текст даёт 3.08:1 — ниже AA для 17px; исходное значение сохранено. */
  --accent-solid-hover: #149154;  /* Ховер главной кнопки в светлой теме. Для тёмной в исходнике нет отдельного значения. */
  --accent-on: #FFFFFF;  /* Текст и иконка на `accent-solid`. Единственное место, где допустим #FFFFFF. */
  --ring: rgba(28,25,23,.16);  /* Кольцо фокуса вокруг поля (вместе с границей `accent`). Тёмное значение — зеркало светлого, в исходнике не задано. */
  --danger: #E5484D;  /* Запрошенные правки, деструктивные действия, ошибки форм. Отдельного цвета ошибок нет. */
  --ok: #17A862;  /* Зелёный текст: строка закрытия правки, галочки «принято». Всегда вместе с галочкой — состояние несёт форма. */
  --warn: #7A4E00;  /* Текст статуса «Новая версия» / «На ревью» (7.1:1 и 9.1:1). */
  --warn-raw: #FFB020;  /* Сырой жёлтый для заливок статуса при низкой прозрачности. */
  --info: #2FA9FF;  /* Системные подсказки. Как текст на светлом — 2.5:1, использовать только иконкой или заливкой. */
  --thread-rail-nested: rgba(18,20,26,.10);  /* Нейтральная полоса вложенных уровней ветки (уровни 1–3). Цвет автора — только у корня. */
  --control-bg: #0B0B0B;  /* Тёмный остров: поле вокруг видео. Одинаков в обеих темах. */
  --control-track: #141416;  /* Тёмный остров: фон дорожки таймлайна. */
  --control-bg-2: #1C1C1F;  /* Тёмный остров: панель управления плеером. */
  --control-bg-3: #2A2A2E;  /* Тёмный остров: ховер и активные контролы. */
  --control-border: #2A2A2E;  /* Тёмный остров: разделители внутри панели. */
  --control-text: #F7F7F5;  /* Тёмный остров: текст и иконки. */
  --control-muted: #A1A1AA;  /* Тёмный остров: вторичные подписи, моно-шаги перемотки (7.7:1 на `control-bg`). */
  --control-line: rgba(255,255,255,.08);  /* Тёмный остров: линия дорожки. */
  --control-line-strong: rgba(255,255,255,.5);  /* Тёмный остров: плейхед 2px. */
  --control-dot-border: rgba(255,255,255,.6);  /* Тёмный остров: кольцо «правка на текущем таймкоде». */
  --control-played: rgba(247,247,245,.18);  /* Тёмный остров: проигранная часть дорожки. */
  --control-accent: #F7F7F5;  /* Кнопка play — единственный акцентный контрол острова: светлая плитка, тёмная иконка. */
  --participant-coral: #E5484D;  /* Цвет участника / акцент маркетинга. Аватар, полоса корня, точка таймлайна; в маркетинге — точки дорожки, рельсы цитат. */
  --participant-ochre: #C98A00;  /* Цвет участника / акцент маркетинга. */
  --participant-teal: #0D9488;  /* Цвет участника / акцент маркетинга. */
  --participant-violet: #7C3AED;  /* Цвет участника / акцент маркетинга. */
  --participant-blue: #0284C7;  /* Цвет участника / акцент маркетинга. Не больше двух цветов семейства в макете, кроме дорожки (до пяти). */
  --forest: #0A3A26;  /* Схема «Лес»: фон креативов и секций про приватность и серверы. Также Deep Green — текст на `green-bright`. */
  --moss: #12603F;  /* Вторая ступень внутри зелёных схем (плашки на `forest`). */
  --sand: #E8E2D6;  /* Схема «Песок»: чередование секций лендинга, ретаргет-креативы. */
  --clay: #DCD4C4;  /* Карточки и разделители на `sand`. */
  --night: #17161A;  /* Схема «Ночь»: всё, что показывает интерфейс. Текст на нём — `paper-bright`. */
  --paper-bright: #F7F7F5;  /* Текст и вордмарк на `night`; кнопочный текст недопустим — там `forest`. */
  --green: #17A862;  /* Кнопка действия на светлых схемах (Бумага, Песок). Не декоративный акцент: ≤10% площади. */
  --green-bright: #2BD17E;  /* Кнопка на тёмных схемах (Лес, Ночь) с текстом `forest` (6.4:1). Фирменный зелёный фон логотипа. */
  --logo-tile: #0F0F0F;  /* Плитка знака. Не подстраивается ни под тему, ни под палитру макета. */
  --logo-layer-1: #52525B;  /* Верхняя плашка знака (старая версия). */
  --logo-layer-2: #8E8E96;  /* Средняя плашка знака. */
  --shadow-sm: 0 1px 3px rgba(28,25,23,.04);
  --shadow-lg: 0 8px 36px rgba(28,25,23,.12);
}

[data-theme="dark"] {
  --bg: #17161A;
  --surface: #1F1E23;
  --surface-2: #26242A;
  --surface-3: #2F2D34;
  --border: #34323A;
  --border-strong: #45424C;
  --text: #F7F7F5;
  --text-secondary: #A1A1AA;
  --text-muted: #71717A;
  --accent: #F7F7F5;
  --accent-solid: #2BD17E;
  --accent-solid-hover: var(--accent-solid);
  --accent-on: #0A3A26;
  --ring: rgba(247,247,245,.16);
  --danger: #F0685E;
  --ok: #2BD17E;
  --warn: #FFB020;
  --thread-rail-nested: rgba(255,255,255,.13);
  --shadow-sm: none;
  --shadow-lg: none;
}

:root {
  --sp-1: 4px;  /* Плотная лента правок: зазоры внутри строки. */
  --sp-2: 8px;  /* Базовая единица. Зазор между иконкой и подписью. */
  --sp-3: 12px;  /* Горизонтальные отступы ленты на мобиле. */
  --sp-4: 16px;  /* Внутренний отступ панелей. */
  --sp-5: 20px;  /* Отступы модалок. */
  --sp-6: 24px;  /* Шаг вложенности ветки (десктоп), межколонник сайта, зазор карточек. */
  --sp-7: 32px;  /* Разделение групп. */
  --sp-8: 48px;  /* Крупные разрывы в продукте. */
  --thread-indent-mobile: 14px;  /* Шаг вложенности ветки на мобиле. */
  --card-padding: 28px;  /* Внутренний отступ маркетинговой карточки. */
  --section-y: 96px;  /* Вертикальный ритм секций лендинга (десктоп). */
  --section-y-mobile: 64px;  /* Ритм секций на мобиле. */
  --hero-gap: 128px;  /* Между hero и первой секцией. */
  --canvas-margin: 86px;  /* Поля холста 1080 и сторис (8% меньшей стороны). */
  --r-sm: 6px;  /* Статус-чипы, бейджи, мелкие поля. */
  --r-checkbox: 5px;  /* Чекбокс 18×18. */
  --r-tooltip: 8px;  /* Тултип. */
  --radius: 10px;  /* Поля ввода, карточки продукта, форма редактирования. */
  --r-md: 14px;  /* Модалки, выпадающие меню, композер. */
  --r-lg: 18px;  /* Крупные контейнеры, шторки; все карточки и блоки маркетинга. */
  --r-full: 9999px;  /* Кнопки, чипы-фильтры, аватары, точки, пилюля-сводка. Кнопки всегда пилюли. */
  --control-sm: 32px;  /* Кнопка .small (padding 6/14, 13px). */
  --control-md: 44px;  /* Стандартная кнопка, поле ввода, тач-цель. */
  --control-lg: 52px;  /* Крупная кнопка. */
  --topbar-h: 56px;  /* Высота шапки продукта. */
  --breakpoint-mobile: 640px;  /* Единый мобильный брейкпоинт. */
  --container: 1200px;  /* Контейнер сайта, 12 колонок. */
  --opacity-disabled: 0.4;  /* @kind other */ /* Отключённые контролы; бледный аватар свёрнутой правки. */
  --opacity-cascade-bg: 0.1;  /* Каскад как фоновая фигура в маркетинге (8–12%). */
  --font-display: Onest, Inter, system-ui, sans-serif;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-logo: Rubik, Onest, sans-serif;
}

/* Продукт */
.display { font-family: var(--font-display); font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }  /* Крупные пустые состояния, вход. */
.h1 { font-family: var(--font-display); font-size: 27px; line-height: 1.18; font-weight: 600; letter-spacing: -0.015em; }  /* Заголовок экрана (.h1s). */
.h2 { font-family: var(--font-display); font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }  /* Заголовок раздела (.h2s). */
.h3 { font-family: var(--font-sans); font-size: 16px; line-height: 1.35; font-weight: 500; }  /* H3 — Inter, Onest ниже 20px не используется. */
.h4 { font-family: var(--font-sans); font-size: 14px; line-height: 1.4; font-weight: 500; }  /* H4, лейблы полей, имя в комментарии. */
.body { font-family: var(--font-sans); font-size: 15px; line-height: 1.55; font-weight: 400; }  /* Основной текст интерфейса. */
.body-sm { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; font-weight: 400; }  /* Текст комментария, мета строк. */
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 1.4; font-weight: 500; }  /* Статус-чип, бейдж роли, подсказки. */
.data { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; }  /* Таймкоды, версии, ключи, ссылки. tabular-nums. Даты и количества — не моно. */
/* Сайт */
.site-display { font-family: var(--font-display); font-size: 64px; line-height: 1.08; font-weight: 700; letter-spacing: -0.025em; }  /* Hero лендинга. */
.site-h1 { font-family: var(--font-display); font-size: 44px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; }  /* H1 страниц сайта. */
.site-h2 { font-family: var(--font-display); font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; }  /* Заголовок секции (до 9 слов). */
.site-h3 { font-family: var(--font-sans); font-size: 22px; line-height: 1.35; font-weight: 500; }  /* Заголовок карточки. */
.site-body { font-family: var(--font-sans); font-size: 17px; line-height: 1.65; font-weight: 400; }  /* Текст сайта, до 60 знаков в строке для подзаголовка. */
.site-body-sm { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; font-weight: 400; }  /* Второстепенный текст. */
.site-caption { font-family: var(--font-sans); font-size: 14px; line-height: 1.4; font-weight: 500; }  /* Подписи, ссылки футера. */
.site-label { font-family: var(--font-mono); font-size: 13px; line-height: 1.3; font-weight: 500; letter-spacing: 0.02em; }  /* Метка над заголовком. Обычный регистр. */
/* Холст 1080 */
.canvas-display { font-family: var(--font-display); font-size: 120px; line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; }  /* Display 96–120px. */
.canvas-heading { font-family: var(--font-display); font-size: 72px; line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; }  /* Заголовок поста, до 7 слов. */
.canvas-subheading { font-family: var(--font-display); font-size: 48px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }  /* Подзаголовок, до 14 слов. */
.canvas-text { font-family: var(--font-sans); font-size: 34px; line-height: 1.45; font-weight: 400; }  /* Текст на холсте. */
.canvas-caption { font-family: var(--font-sans); font-size: 26px; line-height: 1.3; font-weight: 500; }  /* Подпись. */
.canvas-label { font-family: var(--font-mono); font-size: 24px; line-height: 1.3; font-weight: 500; letter-spacing: 0.02em; }  /* Метка над заголовком. */
/* Логотип */
.wordmark { font-family: var(--font-logo); font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: 0.025em; }  /* Только вордмарк в шапке продукта, цветом `text-muted`. В маркетинге — готовые SVG лок-апы. */