/* ═══════════════════════════════════════════════════════════ Дизайн-система Брэд Крумбс — токены по трём уровням. 1) ПРИМИТИВЫ 2) РОЛИ (палитра меняет этот слой) 3) компоненты — только роли. Правила: тени и обводки НЕ использовать. Разделение — контрастом фона и воздухом. Весь тёмный — единый #1B1130. v2 · 07.10.2026 — объединены три близких светлых (#eceaf2, #e4e1ec, #EDE9E3) в единую подложку #F1F0EE (значение из Figma «типографика и цвета»). v3 · 07.10.2026 — роли --on-dark и --danger. v9 · 12.10.2026 — без кислотного лайма: главный цвет стиля — светлый лайм #F0FBCF; лаванда тише #CAB8EA, светлая лаванда #F7F4FD. Тёмные пары (-ink) — только текст на своей светлой плашке. Градиенты --g-*. v8 · 08.10.2026 — слой плашек --sf-*. v7 · 08.10.2026 — роли «Комментарий» --hint-* и «Код» --code-*. v6 · 07.10.2026 — роль --soft (фоновые подложки), цвета текстовых ролей --<роль>-c, токены кнопок/чипов. v5 · 07.10.2026 — межбуквенные интервалы --ls-* и роль-ls. v4 · 07.10.2026 — типографика как система: ступени размеров/начертаний/межстрочных (в %) + роли-сущности. ═══════════════════════════════════════════════════════════ */ /* ——— 1. ПРИМИТИВЫ ——— */ :root{ --p-ink:#1B1130; --p-white:#ffffff; --p-bg:#FCFCFB; /* v292: почти белый (было #F9F9F7 — читался кремовым) */ --p-sub:#F1F0EE; /* подложка: группы, разделители, фоновые плашки (бывш. gray-100/200 и cream) */ --p-gray-400:#b4afc0; /* приглушённый текст */ --p-gray-600:#7a7488; /* вторичный текст */ /* бренд-цвета (насыщенные); лайм — только светлый, кислотного нет (v9) */ --p-violet:#CAB8EA; --p-mandarina:#FF5E2C; --p-rose:#CFB3B2; /* сухая роза (v9) */ /* светлые подложки (пара — светлый тон гаммы) */ --p-violet-soft:#F7F4FD; --p-neon-soft:#F0FBCF; --p-mandarina-soft:#FFE7DE; --p-rose-soft:#F5EAE9; /* тёмные компаньоны — ТОЛЬКО текст на своей светлой плашке; не для полос, точек, прокрутки */ --p-violet-ink:#6B4FA8; --p-neon-ink:#59642C; /* только текст на светлой плашке; исключение — тонкая линия 1px вместе с ореолом neon-soft (.cd.fresh) */ --p-mandarina-ink:#C73C12; --p-rose-ink:#843753; /* в запас (из Figma, роль пока не назначена) */ } /* ——— 2b. ПЛАШКИ — комплекты (v8 · 08.10.2026) ——— Плашка = фон + цвета всего, что на ней лежит: текст, вторичный, линии, ховер, кнопка, акцент. Каждый пункт — ссылка на палитру. Компонент внутри плашки пишет только var(--sf-…) и не знает, на какой он плашке. Позже: правило светлоты (ΔL текст/фон) для автоподбора при смене фона — место под него здесь же. */ :root{ /* Тёмная — шапка */ --sf-dark-bg:var(--p-ink); --sf-dark-fg:var(--p-white); --sf-dark-muted:var(--p-gray-400); --sf-dark-line:rgba(255,255,255,.12); --sf-dark-hover:rgba(255,255,255,.08); --sf-dark-btn-bg:var(--p-white); --sf-dark-btn-fg:var(--p-ink); --sf-dark-btn-line:var(--p-white); --sf-dark-accent:var(--p-neon-soft); /* Цветная 1 — админская полоса */ --sf-1-bg:var(--p-violet-soft); --sf-1-fg:var(--p-violet-ink); --sf-1-muted:var(--p-gray-600); --sf-1-line:rgba(107,79,168,.18); --sf-1-hover:rgba(107,79,168,.10); --sf-1-btn-bg:var(--p-violet-ink);--sf-1-btn-fg:var(--p-white); --sf-1-btn-line:var(--p-violet-ink); --sf-1-accent:var(--p-violet); /* Светлая — обычный фон страницы */ --sf-light-bg:var(--p-bg); --sf-light-fg:var(--p-ink); --sf-light-muted:var(--p-gray-600); --sf-light-line:var(--p-sub); --sf-light-hover:var(--p-sub); --sf-light-btn-bg:var(--p-white); --sf-light-btn-fg:var(--p-ink); --sf-light-btn-line:var(--p-sub); --sf-light-accent:var(--p-ink); } .sf{background:var(--sf-bg);color:var(--sf-fg)} .sf-dark {--sf-bg:var(--sf-dark-bg);--sf-fg:var(--sf-dark-fg);--sf-muted:var(--sf-dark-muted);--sf-line:var(--sf-dark-line);--sf-hover:var(--sf-dark-hover);--sf-btn-bg:var(--sf-dark-btn-bg);--sf-btn-fg:var(--sf-dark-btn-fg);--sf-btn-line:var(--sf-dark-btn-line);--sf-accent:var(--sf-dark-accent)} .sf-1 {--sf-bg:var(--sf-1-bg);--sf-fg:var(--sf-1-fg);--sf-muted:var(--sf-1-muted);--sf-line:var(--sf-1-line);--sf-hover:var(--sf-1-hover);--sf-btn-bg:var(--sf-1-btn-bg);--sf-btn-fg:var(--sf-1-btn-fg);--sf-btn-line:var(--sf-1-btn-line);--sf-accent:var(--sf-1-accent)} .sf-light{--sf-bg:var(--sf-light-bg);--sf-fg:var(--sf-light-fg);--sf-muted:var(--sf-light-muted);--sf-line:var(--sf-light-line);--sf-hover:var(--sf-light-hover);--sf-btn-bg:var(--sf-light-btn-bg);--sf-btn-fg:var(--sf-light-btn-fg);--sf-btn-line:var(--sf-light-btn-line);--sf-accent:var(--sf-light-accent)} /* ——— 2. РОЛИ (слой смены палитры) ——— */ :root{ --bg:var(--p-bg); --card:var(--p-white); --ink:var(--p-ink); --muted:var(--p-gray-600); --faint:var(--p-gray-400); --soft:var(--p-sub); /* фоновые подложки: ховеры меню, слоты иконок, шкалы (НЕ текст) */ --line:var(--p-sub); --line-soft:var(--p-sub); --line-strong:var(--p-sub); --accent:var(--p-ink); --on-dark:var(--p-white); /* текст и иконки на тёмном (шапка #1B1130) */ --danger:var(--p-mandarina-ink); /* ошибки, тревога (ошибка входа, дедлайн) */ /* бренд */ --violet:var(--p-violet); --neon:var(--p-neon-soft); /* кислотного лайма нет — роль ведёт на светлый */ --cream:var(--p-sub); /* крем слит с подложкой (совместимость со старыми именами) */ --mandarina:var(--p-mandarina); --rose:var(--p-rose); /* подложки */ --violet-soft:var(--p-violet-soft); --neon-soft:var(--p-neon-soft); --mandarina-soft:var(--p-mandarina-soft); --rose-soft:var(--p-rose-soft); /* компаньоны-тексты */ --violet-ink:var(--p-violet-ink); --neon-ink:var(--p-neon-ink); --halo-line:var(--p-neon-ink); /* «ореол»: линия 1px + светлый лаймовый ореол 3px — новое, свежее, в фокусе */ --halo:0 0 0 3px var(--p-neon-soft); --mandarina-ink:var(--p-mandarina-ink); --rose-ink:var(--p-rose-ink); /* статусы задач (пара: подложка + тёмный текст) */ --status-work:var(--p-violet); --status-work-bg:var(--p-violet-soft); --status-work-ink:var(--p-violet-ink); --status-wait:var(--p-mandarina); --status-wait-bg:var(--p-mandarina-soft); --status-wait-ink:var(--p-mandarina-ink); --status-done:var(--p-gray-400); /* сделано — уходит в серый */ --status-done-bg:var(--p-neon-soft); --status-done-ink:var(--p-neon-ink); /* документы */ --doc-contract:var(--p-violet); --doc-invoice:var(--p-mandarina); --doc-act:var(--p-gray-400); /* градиенты — только из цветов палитры; свои добавляются в Админке → Дизайн → Градиенты */ --g-shimmer:linear-gradient(160deg,var(--p-neon-soft),var(--p-violet-soft) 45%,var(--p-mandarina-soft) 80%,var(--p-neon-soft)); /* ждёт генерация — переливается */ --g-lime-rose:linear-gradient(160deg,var(--p-neon-soft),var(--p-rose-soft)); --g-gray-rose:linear-gradient(160deg,var(--p-sub),var(--p-rose-soft)); --g-select:linear-gradient(90deg,var(--p-neon-soft),var(--p-sub)); /* выбранный пункт меню */ --g-lav-lime:linear-gradient(160deg,var(--p-violet-soft),var(--p-neon-soft)); --g-lav-rose:linear-gradient(160deg,var(--p-violet-soft),var(--p-rose-soft)); /* совместимость со старыми именами */ --coral:var(--p-mandarina); --blue:var(--p-violet); --sand:var(--p-mandarina); /* размеры */ --r:7px; --r-lg:12px; --ctrl-h:2.25rem; --ctrl-h-sm:1.85rem; --gap:0.6rem; --pad-x:0.9rem; --maxw:none; /* v197: все страницы во всю ширину, как Мастерская (было 100rem) */ --maxw-wide:none; --measure:60ch; /* ═══ ТИПОГРАФИКА (утверждена 07.10.2026) ═══ */ /* ступени размера (px при html 16px) — весь текст только из них */ --fs-12:.75rem; --fs-14:.875rem; --fs-16:1rem; --fs-18:1.125rem; --fs-20:1.25rem; --fs-24:1.5rem; --fs-40:2.5rem; --fs-48:3rem; /* начертания — всего 4 */ --fw-300:300; --fw-400:400; --fw-500:500; --fw-600:600; /* межстрочное — % от размера буквы */ --lh-100:100%; --lh-110:110%; --lh-120:120%; --lh-130:130%; --lh-135:135%; --lh-140:140%; --lh-150:150%; /* межбуквенное — сотые em: m2 = −0.02em (плотные заголовки), 0 — обычный, 6…16 — разрядка для caps */ --ls-m2:-.02em; --ls-m1:-.01em; --ls-0:0; --ls-2:.02em; --ls-4:.04em; --ls-6:.06em; --ls-8:.08em; --ls-10:.1em; --ls-12:.12em; --ls-16:.16em; /* цвета текстовых ролей — только из палитры/ролей выше */ --h1-c:var(--ink); --h2-c:var(--ink); --h3-c:var(--ink); --subtitle-c:var(--muted); --body-c:var(--ink); --caption-c:var(--muted); --eyebrow-c:var(--muted); --quote-c:var(--ink); --card-title-c:var(--ink); --card-desc-c:var(--muted); --card-meta-c:var(--muted); --card-tag-c:var(--muted); --button-c:var(--ink); --nav-c:var(--ink); --action-c:var(--ink); --chip-c:var(--muted); --label-c:var(--ink); --number-c:var(--ink); --num-c:var(--ink); --hint-c:var(--faint); --code-c:var(--muted); --logo-c:var(--ink); /* кнопки и чипы */ --btn-bg:var(--card); --btn-fg:var(--ink); --btn-line:var(--line); --btn-dark-bg:var(--accent); --btn-dark-fg:var(--on-dark); /* чип — один на весь сайт (v88): выбор/действие — подложка; выбранный — светлый лайм + тёмный лайм; «своё» — chip-alt (лаванда); метка — меньше, без наведения */ --chip-bg:var(--p-sub); --chip-fg:var(--ink); --chip-line:transparent; --chip-on-bg:var(--p-neon-soft); --chip-on-fg:var(--p-neon-ink); --chip-pad:7px 12px; --chip-pad-sm:4px 9px; --chip-fs-sm:var(--fs-12); --chip-ok-bg:var(--neon-soft); --chip-ok-fg:var(--neon-ink); /* чип выбранного примера/задачи */ --chip-alt-bg:var(--violet-soft); --chip-alt-fg:var(--violet-ink); /* чип «своё», особое действие */ /* РОЛИ-СУЩНОСТИ = размер · начертание · межстрочное · интервал · цвет. Меняешь роль здесь — меняется везде. */ /* заголовки */ --h1-fs:var(--fs-40); --h1-fw:var(--fw-600); --h1-lh:var(--lh-120); --h1-ls:var(--ls-m2); /* hero */ --h2-fs:var(--fs-24); --h2-fw:var(--fw-600); --h2-lh:var(--lh-140); --h2-ls:var(--ls-m1); /* раздел */ --h3-fs:var(--fs-20); --h3-fw:var(--fw-500); --h3-lh:var(--lh-140); --h3-ls:var(--ls-0); /* блок */ /* текст */ --subtitle-fs:var(--fs-18); --subtitle-fw:var(--fw-400); --subtitle-lh:var(--lh-140); --subtitle-ls:var(--ls-0); --body-fs:var(--fs-14); --body-fw:var(--fw-400); --body-lh:var(--lh-150); --body-ls:var(--ls-0); /* абзац */ --body-line-lh:var(--lh-135); /* строка — тот же размер/вес */ --caption-fs:var(--fs-12); --caption-fw:var(--fw-400); --caption-lh:var(--lh-135); --caption-ls:var(--ls-0); --eyebrow-fs:var(--fs-12); --eyebrow-fw:var(--fw-300); --eyebrow-lh:var(--lh-100); --eyebrow-ls:var(--ls-10); /* caps */ --quote-fs:var(--fs-16); --quote-fw:var(--fw-500); --quote-lh:var(--lh-130); --quote-ls:var(--ls-0); /* карточка (компонент) */ --card-title-fs:var(--fs-18); --card-title-fw:var(--fw-500); --card-title-lh:var(--lh-120); --card-title-ls:var(--ls-0); --card-desc-fs:var(--fs-14); --card-desc-fw:var(--fw-400); --card-desc-lh:var(--lh-135); --card-desc-ls:var(--ls-0); --card-meta-fs:var(--fs-12); --card-meta-fw:var(--fw-400); --card-meta-lh:var(--lh-135); --card-meta-ls:var(--ls-0); --card-tag-fs:var(--fs-12); --card-tag-fw:var(--fw-500); --card-tag-lh:var(--lh-100); --card-tag-ls:var(--ls-8); /* управление */ --button-fs:var(--fs-14); --button-fw:var(--fw-500); --button-lh:var(--lh-100); --button-ls:var(--ls-6); --nav-fs:var(--fs-14); --nav-fw:var(--fw-400); --nav-lh:var(--lh-100); --nav-ls:var(--ls-0); --action-fs:var(--fs-14); --action-fw:var(--fw-500); --action-lh:var(--lh-100); --action-ls:var(--ls-0); --chip-fs:var(--fs-14); --chip-fw:var(--fw-500); --chip-lh:var(--lh-100); --chip-ls:var(--ls-0); --label-fs:var(--fs-14); --label-fw:var(--fw-500); --label-lh:var(--lh-135); --label-ls:var(--ls-0); --logo-fs:var(--fs-16); --logo-fw:var(--fw-500); --logo-lh:var(--lh-100); --logo-ls:var(--ls-m1); /* логотип в шапке */ --hint-fs:var(--fs-12); --hint-fw:var(--fw-400); --hint-lh:var(--lh-135); --hint-ls:var(--ls-2); /* комментарий: пояснения под полями, мелкие подписи */ --code-fs:var(--fs-12); --code-fw:var(--fw-400); --code-lh:var(--lh-135); --code-ls:var(--ls-0); /* код: id, пути, моноширинный */ /* числа */ --number-fs:var(--fs-48); --number-fw:var(--fw-600); --number-lh:var(--lh-110); --number-ls:var(--ls-m2); /* крупная сумма */ --num-fs:var(--fs-24); --num-fw:var(--fw-600); --num-lh:var(--lh-110); --num-ls:var(--ls-m2); /* инфографика 30% */ } /* ——— 3. базовые элементы ——— */ *{box-sizing:border-box;margin:0;padding:0} html{font-size:16px} body{ font-family:var(--ff-primary,"Inter",system-ui,Arial,sans-serif); background:var(--bg);color:var(--ink); -webkit-font-smoothing:antialiased;line-height:1.4; } .wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(0.75rem,2.5vw,2rem)} .halo{border-color:var(--halo-line)!important;box-shadow:var(--halo)}