/* YastomCRM — Design tokens overrides (additions to tokens.css)
Палитра не меняется. Добавляются: Onest, токены под чаты,
попап-снуз, active-state TOC, custom-плеер звонков, density-блок. */
/* === Шрифт ===
В подгружать так:
В Tailwind config заменить `fontFamily.sans` на ['Onest', 'Inter', ...defaultTheme.fontFamily.sans] */
html { font-feature-settings: "ss01", "cv11"; scrollbar-gutter: stable; } /* Onest stylistic alts + резерв ширины под скроллбар, чтобы mx-auto не прыгало между страницами */
body { font-weight: 500; letter-spacing: -0.005em; } /* base = Medium, лёгкий tighten */
:root {
--font-sans: "Onest", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* Шкала весов — закрепляем как токены, чтобы не плодить magic numbers */
--w-body: 500; /* основной текст, list items, dt/dd */
--w-meta: 500; /* мета-инфо, hint'ы */
--w-label: 600; /* uppercase labels, KPI label, captions */
--w-action: 600; /* кнопки, ссылки в навигации, active TOC */
--w-h3: 700; /* заголовки секций (SectionCard.title) */
--w-h2: 700; /* page heading */
--w-display: 800; /* большие KPI цифры, имя пациента, page title /dashboard */
/* Tracking — Onest любит чуть плотнее на больших размерах */
--t-tight: -0.02em; /* H2/H3, имена, обычный display */
--t-tighter: -0.025em; /* большие KPI 24+ px */
--t-display: -0.03em; /* hero (28+ px на /dashboard) */
/* === Chat — bubble tones === */
/* === Chat — bubble tones === */
--chat-out-bg: #2DBE9F; /* mint-500 — наше сообщение, фон */
--chat-out-fg: #FFFFFF;
--chat-in-bg: #F2F4F6; /* tonal gray — входящее */
--chat-in-fg: #1A1D21;
--chat-meta: rgba(255,255,255,0.78); /* время+галочки на mint-фоне */
--chat-meta-in: #8B9097; /* gray-500 — на сером фоне */
/* Источники сообщений (бренд-цвета) */
--src-tg: #229ED9; /* Telegram blue */
--src-tg-soft: #E8F4FB;
--src-max: #6E45E2; /* MAX (VK) violet — заявленный фирменный */
--src-max-soft: #EFEBFD;
/* === Mini-dashboard === */
--kpi-good: var(--mint-700);
--kpi-warn: #B45309; /* amber-700 */
--kpi-bad: #B91C1C; /* rose-700 */
--kpi-mute: var(--gray-500);
/* График (bar mint полупрозрачный + line ink) */
--chart-bar-fill: rgba(45, 190, 159, 0.35);
--chart-bar-stroke: #25A688;
--chart-line: #1A1D21;
--chart-grid: rgba(0,0,0,0.04);
/* === TOC active === */
--toc-active-bg: #ECFAF5; /* mint-50 */
--toc-active-fg: var(--mint-700);
--toc-active-bar: var(--mint-500); /* тонкая полоса слева */
/* Семантические «soft» фоны под бейджи (используем уже фактически в патернах,
закрепляем как токены) */
--bg-amber-soft: #FEF3C7;
--fg-amber: #B45309;
--bg-rose-soft: #FFE4E6;
--fg-rose: #B91C1C;
--bg-blue-soft: #DBEAFE;
--fg-blue: #1D4ED8;
/* === Lightbox === */
--lightbox-bg: rgba(10, 12, 14, 0.86);
}
/* ===== Зафиксированный стиль E (HubSpot/Yandex-плотность) — был выбран после A/B/C/D эксперимента ===== */
body { background: #E5E8EB !important; }
.border-ink-100 { border-color: #B8BCC2 !important; }
.shadow-soft {
box-shadow: 0 2px 4px rgba(16,24,40,0.12), 0 8px 16px rgba(16,24,40,0.10) !important;
}
/* ink-500 был слишком светлым на сером фоне — везде делаем темнее */
.text-ink-500 { color: #4B5159 !important; }
/* ============================================================
▼ Density / type-scale overrides
============================================================ */
:root {
/* === Размер шрифта =============================== */
--fs-2xs: 13px; /* было 11 → 13 — UPPERCASE labels, eyebrow, KPI label */
--fs-xs: 13px; /* было 12 → 13 — мета, легенда, hint */
--fs-sm: 14px; /* было 13 → 14 — TOC, breadcrumb, dt/dd, list secondary */
--fs-base: 15px; /* было 14 → 15 — input/button/body */
--fs-md: 16px; /* было 15 → 16 — list primary (название плана) */
--fs-lg: 19px; /* было 16 → 19 — section heading */
--fs-xl: 24px; /* было 20 → 24 — H2 */
--fs-2xl: 30px; /* было 24 → 30 — KPI цифра */
--fs-3xl: 34px; /* было 28 → 34 — patient name / hero */
/* === Веса ========================================= */
--w-body: 500;
--w-meta: 600; /* было 500 */
--w-label: 800; /* было 600 — uppercase лейблы хочется ОЧЕНЬ жирно */
--w-action: 700; /* было 600 */
--w-h3: 800; /* было 700 */
--w-h2: 800;
--w-display: 800;
/* === Tracking ===================================== */
--t-tight: -0.014em;
--t-tighter: -0.022em;
--t-display: -0.032em;
--t-label: 0.08em; /* uppercase labels — было 0.04, теперь 0.08 */
/* === Высоты ===================================== */
--h-input-sm: 36px;
--h-input-md: 40px;
--h-input-lg: 44px;
--pad-input-x: 12px;
--pad-btn-x: 16px;
--radius-input: 10px;
--radius-card: 14px;
/* === Иконки ====================================== */
--icon-xs: 14px;
--icon-sm: 16px;
--icon-md: 18px;
--icon-lg: 20px;
--icon-xl: 24px;
--tap-min: 36px; /* hit-зона для inline-actions в task row */
/* === Контраст текста на E-фоне =================== */
--ink-900: #0F1216;
--ink-800: #1A1D21;
--ink-700: #2C3138;
--ink-600: #3A4047;
--ink-500: #4B5159; /* лок из v2 — мета и second-body */
--ink-400: #6B7178;
--ink-300: #9098A0;
--ink-meta: var(--ink-500); /* единая «мета» — больше не gray-500 */
/* === Divider hierarchy =========================== */
--rule-card: 1px solid #E2E5E8; /* внутри карточки */
--rule-soft: 1px dashed #C9CDD2; /* визуальный «рассечь блок» */
--rule-card-strong: 1px solid var(--border, #B8BCC2);
/* === Numeric / mono ============================== */
--font-num: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
/* === Focus ring под mint ========================= */
--ring-mint: 0 0 0 3px rgba(45, 190, 159, 0.28);
}
/* Базовый body — поднять с 14 до 15 */
body { font-size: var(--fs-base); }