/* СПРИНТ · дизайн-система · токены Подключить один раз в корне приложения. Все значения — из концепции C. Тёмная тема: добавить data-theme="dark" на или контейнер. */ /* ПАЛИТРА 12 СЕНТЯБРЯ (возвращена 20.09.2026). Имена токенов оставлены прежними: на них завязано 442 правила в app.css, поэтому смена ЗНАЧЕНИЙ перекрашивает кабинет целиком, не трогая правила. Исходник — _versions/v6-12sent/css/tokens.css, значения перенесены точно. */ :root { /* --- Поверхности --- */ --sp-paper: #F7F7F7; /* фон приложения (было --bg) */ --sp-card: #FFFFFF; /* карточки, панели (было --bg-alt) */ --sp-sink: #F0F0F2; /* вложенные плашки, hover (было --surface-hover) */ /* --- Текст --- */ --sp-ink: #14264E; /* заголовки, значения (было --text-strong) */ --sp-mid: #5A647D; /* тело текста, сине-серый (было --text) */ --sp-dim: #6B6B6B; /* мета и подписи (было --text-muted). Палитра 12.09 давала здесь #828282 — это 3,84:1 на белом и 3,38:1 на серой плашке, то есть ниже нормы. Затемнено до 5,39:1 на белом и 4,51:1 на --sp-sink. Ниже не осветлять. */ /* --- Линии --- */ --sp-line: #D8D8D8; /* разделители (было --line) */ --sp-line-2: #B9BFCC; /* рамки полей и кнопок (было --line-strong) */ /* --- Акцент: золото. ТОЛЬКО заливки и одно слово в заголовке. Под текст не ставить — на белом даёт 1,9:1. Для ссылок и текстовых действий есть --sp-navy ниже, он даёт 10,4:1. --- */ --sp-accent: #CBA656; /* (было --brand-gold) */ --sp-accent-mid: #99793C; /* нажатие и наведение золота */ --sp-accent-soft: rgba(203, 166, 86, .14); /* фон активного состояния */ --sp-accent-ink: #14264E; /* текст поверх золота */ /* Золото для ТЕКСТА — отдельный, более глубокий тон. Светлое #CBA656 на белом даёт 1,9:1 и читаться не может; этот даёт 4,91:1 и остаётся золотом. Правило: --sp-accent красит заливки, полосы и метки, --sp-gold-text красит буквы. */ --sp-gold-text: #856827; /* 5,24:1 на белом, 4,72:1 на золотой подложке --sp-accent-soft. Прежний #8A6C2E давал на ней 4,43:1 — недобор до нормы 4,5. */ /* --- Синий: несущий цвет текста и заливок --- */ --sp-navy: #293E73; /* заливка главной кнопки, ссылки */ --sp-navy-deep: #0F1B41; /* нажатие, глубокие панели */ --sp-gold-soft: #E0D2B0; /* золотой хайрлайн */ --sp-cream: #FBF9F2; /* подложка под крупные числа */ --sp-dark: #0B090E; /* верхняя панель */ /* --- Статусы --- */ --sp-ok: #2F5D33; --sp-ok-soft: #D8EAD2; --sp-warn: #7A5B13; --sp-warn-soft: #F3E3C2; --sp-bad: #8B2F2F; --sp-bad-soft: #E9D3D3; /* --- Тень (одна на всю систему) --- */ --sp-shadow: 0 1px 2px rgba(21, 23, 26, .04), 0 10px 26px -14px rgba(21, 23, 26, .14); /* --- Типографика --- */ /* Основной шрифт кабинета. Раньше здесь стоял системный: на Маке это San Francisco, на Windows Segoe — кабинет выглядел по-разному и незаконченно. Inter лежит локально в ui/fonts (внешние запрещены). */ --sp-sans: "Inter", ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif; --sp-mono: "JetBrains Mono", ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Заголовки — Unbounded: широкая характерная гротеска (Артём, 21.09.2026). Playfair снят: антиква в кабинете читалась чужеродно. */ --sp-display: "Unbounded", "Inter", ui-sans-serif, system-ui, sans-serif; --sp-text-display: 78px; /* процент долгого процесса, единственное место */ --sp-text-h1: 27px; /* заголовок раздела */ --sp-text-h2: 21px; /* заголовок карточки-шага */ --sp-text-num-xl: 30px; /* сумма сделки в карточке лида */ --sp-text-num-l: 20px; /* метрики воронки */ --sp-text-num-m: 16px; /* балл кандидата */ /* Шкала поднята 21.09.2026: Артём — «текст увеличить». Кабинет читался мелко, особенно подписи и шапки таблиц. Шаг в полтора пункта по всей шкале, чтобы не разъехались уже выверенные сетки. */ --sp-text-body: 15.5px; /* тело письма, длинные тексты */ --sp-text-ui: 14.5px; /* базовый размер интерфейса */ --sp-text-label: 13.5px; /* подписи полей */ --sp-text-meta: 13px; /* мета, подсказки */ --sp-text-micro: 11.5px; /* моно-метки над цифрами */ --sp-tracking-tight: -.03em; /* крупные цифры и h1 */ --sp-tracking-h2: -.025em; --sp-tracking-mono: .09em; /* моно-метки капсом */ --sp-leading-text: 1.65; /* абзацы */ --sp-leading-letter: 1.72; /* тело письма */ --sp-weight-regular: 500; --sp-weight-medium: 600; --sp-weight-bold: 640; /* заголовки и цифры; 700 не используем */ /* --- Радиусы --- */ /* Артём 21.09.2026: «где-то закруглённые края есть, это сильно выбивается». Оформление 12 сентября — прямоугольное. Имена оставлены: на них завязаны локальные стили девяти экранов, меняются только значения. */ --sp-radius-pill: 0; /* чипы, фильтры, переключатели */ --sp-radius-sm: 0; /* цветные теги внутри карточек */ --sp-radius-md: 0; /* поля ввода, кнопки, вложенные плашки */ --sp-radius-lg: 0; /* карточка лида, крупная кнопка */ --sp-radius-xl: 0; /* колонка доски, панель списка */ --sp-radius-2xl: 0; /* карточка-шаг, таблица выдачи */ --sp-radius-phone: 0; /* мобильный макет */ /* --- Отступы --- */ --sp-space-1: 4px; --sp-space-2: 8px; --sp-space-3: 12px; --sp-space-4: 16px; --sp-space-5: 20px; --sp-space-6: 26px; --sp-space-7: 34px; --sp-space-8: 44px; /* горизонтальные поля контента */ /* --- Размеры --- */ --sp-sidebar: 258px; --sp-lead-panel: 372px; --sp-board-column: 266px; --sp-row-height: 72px; /* строка выдачи */ --sp-touch-min: 44px; /* минимальная зона нажатия на мобильном */ --sp-content-max: 1080px; } [data-theme="dark"] { --sp-paper: #0E1013; --sp-card: #16191D; --sp-sink: #1D2126; --sp-ink: #ECEEF0; --sp-mid: #A3AAB3; --sp-dim: #98A0A9; --sp-line: rgba(236, 238, 240, .08); --sp-line-2: rgba(236, 238, 240, .17); --sp-accent: #6E9FD8; --sp-accent-mid: #4F80BD; --sp-accent-soft: rgba(110, 159, 216, .13); --sp-accent-ink: #0E1013; --sp-ok: #63B294; --sp-ok-soft: rgba(99, 178, 148, .13); --sp-warn: #D2A054; --sp-warn-soft: rgba(210, 160, 84, .13); --sp-bad: #DC8272; --sp-bad-soft: rgba(220, 130, 114, .13); --sp-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 30px -14px rgba(0, 0, 0, .7); } /* --- Палитра разделов и данных (добавлено 17.09.2026) --- Артём: «зачем-то везде абсолютно синий — очень скучно». Один акцент хорош для действий, но данные, разделы и статусы обязаны различаться цветом, иначе аналитика выглядит как одна синяя полоса. Ниже — набор, у каждого цвета своя работа. Все значения проверены на контраст ≥4.5 на бумаге и на карточке. */ :root { --sp-violet: #5B4AC4; /* поиск экспертов */ --sp-violet-soft: rgba(91, 74, 196, .09); --sp-teal: #0F7A73; /* сообщения, живой контакт */ --sp-teal-soft: rgba(15, 122, 115, .09); --sp-plum: #94407A; /* коммерческие предложения */ --sp-plum-soft: rgba(148, 64, 122, .09); --sp-amber-2: #9A5E06; /* ожидание, деньги в работе */ --sp-clay: #A6512C; /* риск, отказ */ --sp-forest: #1F6B45; /* партнёрство, выигрыш */ --sp-sky-2: #1C6FA8; /* информация, площадки */ /* Ступени одной шкалы для диаграмм воронки: от холодного к тёплому, чтобы этапы читались по порядку, а не по подписи */ --sp-step-1: #1D4E89; --sp-step-2: #2F6AB0; --sp-step-3: #256E92; --sp-step-4: #0F7A73; --sp-step-5: #1F6B45; --sp-step-6: #6B6B17; --sp-step-7: #9A5E06; --sp-step-8: #A6512C; } [data-theme="dark"] { --sp-violet: #A99BF0; --sp-violet-soft: rgba(169, 155, 240, .14); --sp-teal: #5FB8B0; --sp-teal-soft: rgba(95, 184, 176, .14); --sp-plum: #D28ABC; --sp-plum-soft: rgba(210, 138, 188, .14); --sp-step-1: #6E9FD8; --sp-step-2: #5FA8C4; --sp-step-3: #5FB8B0; --sp-step-4: #6FBF92; --sp-step-5: #A9C46A; --sp-step-6: #D2A054; --sp-step-7: #DC9A72; --sp-step-8: #DC8272; }