/* ============================================================ ФУНКЦИЯ ДИЗАЙНА · ДИЗАЙН-ТОКЕНЫ Единый источник правды: цвета тем, шрифты, типошкала, отступы, радиусы, тени, переходы, цвета уровней. Основано на дизайн-системе makers-community.ru. Правьте здесь, чтобы поменять палитру/шрифты/ритм целиком. ============================================================ */ :root{ /* — Шрифты — */ --font-display:"Unbounded",system-ui,sans-serif; /* заголовки */ --font-sans:"IBM Plex Sans",system-ui,sans-serif; /* основной текст */ --font-mono:"JetBrains Mono",ui-monospace,monospace;/* цифры, код, метки */ /* — Семантические цвета (HSL-компоненты, применять через hsl(var(--x))) — */ --background:0 0% 100%; --foreground:0 0% 0%; --card:0 0% 100%; --muted-bg:0 0% 96%; --muted-fg:0 0% 45%; --primary:0 0% 0%; --primary-fg:0 0% 100%; --accent:224 60% 48%; /* синий акцент makers */ --accent-fg:0 0% 100%; --border:0 0% 90%; /* — Цвета уровней Спиральной динамики (светлая тема, контраст на белом) — */ --beige:#a8895c; --purple:#7c3aed; --red:#dc2626; --blue:#2563eb; --orange:#ea580c; --green:#16a34a; --yellow:#ca8a04; --turquoise:#0d9488; --coral:#e0654a; /* гипотетический 9-й уровень (коралловый) — пока вне основной шкалы */ /* — Фирменное «золото»: акцент разделов без собственного уровня (Адизес, Дилтс). Применять через .level-gold — */ --gold:#b8902f; /* — Цвета «четырёх фигур психики» (раздел «Эмоциональный интеллект»). Каждая фигура — свой акцент страницы, применять через .level-fear/.level-guilt/ .level-shame/.level-triumph или инлайн --c в .emotion-cover. — */ --fear:#4a7a96; /* Страх — холодная сталь */ --guilt:#7a6a9c; /* Вина — приглушённый серо-фиолетовый */ --shame:#b15268; /* Стыд — пыльная роза (румянец) */ --triumph:#c98a1e; /* Триумф — янтарное золото победы */ /* — Цвета ролей Адизеса (PAEI) — */ --paei-p:#dc2626; /* Producer · Производитель */ --paei-a:#2563eb; /* Administrator · Администратор */ --paei-e:#ea580c; /* Entrepreneur · Предприниматель */ --paei-i:#16a34a; /* Integrator · Интегратор */ /* — Акцент уровня страницы. Переопределяется на странице: или классом .level-red — */ --level:hsl(var(--accent)); /* производная шкала уровня (тинты к карточке, тёмный «драматический» тон, контраст) */ --level-fog:color-mix(in srgb,var(--level) 8%,hsl(var(--card))); --level-mist:color-mix(in srgb,var(--level) 16%,hsl(var(--card))); --level-pale:color-mix(in srgb,var(--level) 32%,hsl(var(--card))); --level-soft:color-mix(in srgb,var(--level) 55%,hsl(var(--card))); --level-mid:var(--level); --level-deep:color-mix(in srgb,var(--level) 78%,#000); /* тёмный фон драм-блоков */ --level-bright:color-mix(in srgb,var(--level) 55%,#fff); /* светлый акцент на тёмном */ --level-contrast:#fff; /* текст на --level/--level-deep */ /* «чернильный» акцент уровня — для МЕЛКОГО текста-меток (mono-капс eyebrow, .callout__label, .card-label, заголовки-метки) на светлой/карточной поверхности. Подмешивает основной текст --foreground: в светлой теме темнеет, в тёмной светлеет → контраст ≥4.5:1 (WCAG 1.4.3) в ОБЕИХ темах, оттенок сохраняется. Один токен, адаптируется к теме сам (через --foreground), отдельной .dark-версии не нужно. НЕ путать с --level-deep (тёмный ФОН драм-блоков). */ --level-ink:color-mix(in srgb,var(--level) 72%,hsl(var(--foreground))); /* — Семантические/дополнительные цвета (статусы блоков, чипы) — */ --warn:#d97706; /* предупреждение (янтарь) */ --success:#16a34a; /* успех/положительное */ --danger:#dc2626; /* ошибка/негатив */ --info:#2563eb; /* инфо/нейтральный акцент */ /* «чернильные» варианты семантик — для мелких меток-капс на тинте статуса (.callout.warn/success/example __label, .top-caveat-title). Тот же приём контраста, что и --level-ink. */ --warn-ink:color-mix(in srgb,var(--warn) 72%,hsl(var(--foreground))); --success-ink:color-mix(in srgb,var(--success) 72%,hsl(var(--foreground))); --info-ink:color-mix(in srgb,var(--info) 72%,hsl(var(--foreground))); /* — Категориальная палитра графиков: упорядоченные различимые цвета для серий и сегментов (мульти-линия, донат/пирог, стек-колонки, легенда). На базе цветов уровней — у каждого уже есть тёмный вариант (см. .dark), поэтому палитра автоматически адаптируется под тему. Порядок — по максимальной различимости рядом стоящих. Применять как var(--cat-1..8), не хардкодить hex; нужен 9-й — это исключение, заведи токен. — */ --cat-1:var(--blue); --cat-2:var(--orange); --cat-3:var(--green); --cat-4:var(--purple); --cat-5:var(--red); --cat-6:var(--turquoise); --cat-7:var(--yellow); --cat-8:var(--beige); /* — Типошкала (fluid, clamp) — */ --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem; --text-xl:clamp(1.125rem,1rem + .5vw,1.25rem); --text-2xl:clamp(1.25rem,1.1rem + .75vw,1.5rem); --text-3xl:clamp(1.5rem,1.25rem + 1vw,1.875rem); --text-4xl:clamp(1.875rem,1.5rem + 1.5vw,2.25rem); --text-5xl:clamp(2.25rem,1.75rem + 2vw,3rem); --text-6xl:clamp(2.75rem,2rem + 3vw,3.75rem); /* — Ритм / отступы — */ --space-xs:.5rem; --space-sm:.75rem; --space-md:1rem; --space-lg:1.5rem; --space-xl:2.5rem; --space-2xl:4rem; --space-3xl:6rem; /* — Геометрия — острые углы (стиль makers). Скругление только у кругов. — */ --radius-sm:0; --radius:0; --radius-lg:0; --radius-full:9999px; /* круги: точки уровней, аватар, островок, пилюли-кнопки */ /* — Ширины раскладки — */ --reading-width:720px; /* комфортная мера строки лонгрида */ --case-width:900px; /* широкая колонка кейса без сайдбара (.reading--case) */ --content-width:1180px; /* широкий контейнер (хаб, сетки) */ --sidebar-w:280px; /* боковое оглавление лонгрида */ /* — Тени — */ --shadow-sm:0 1px 2px 0 rgb(0 0 0 / .05); --shadow-card:0 4px 20px rgb(0 0 0 / .08); --shadow-lg:0 10px 30px -5px rgb(0 0 0 / .12); /* — Движение — */ --ease:cubic-bezier(.4,0,.2,1); --dur-fast:.15s; --dur:.3s; /* — Слои (z-index): единая лестница для прилипающих/плавающих/оверлейных UI. Применять токеном, не магическими числами. — */ --z-base:1; /* шум, фоновые слои */ --z-sticky:20; /* sticky-сайдбар, прогресс чтения */ --z-header:50; /* шапка сайта, переключатель темы */ --z-fab:60; /* плавающие кнопки (наверх, островок уровней) */ --z-dropdown:70; /* выпадающие меню, поповеры, тултипы */ --z-overlay:90; /* подложка модалок/шторок */ --z-modal:91; /* модалка/диалог поверх подложки */ --z-toast:100; /* тосты — поверх всего */ /* — Фокус-кольцо: единый акцентный ореол на фокусе контролов (повторяющийся паттерн forms.css сведён в токен). — */ --ring:0 0 0 3px color-mix(in srgb,var(--level) 22%,transparent); /* — Нейтральные интерактивные состояния (FD-289): ховер / выбор / актив БЕЗ акцента — серый фон + «чёрный» (ink) бордер. Применять к hover/ selected/active аффордансам интерфейса (пункты списков, варианты, кнопки-иконки). НЕ применять к статичным акцентным подложкам — теги, бейджи, callout, карточки оставляют --level-fog. Адаптивны к теме: --muted-bg темнеет/светлеет, ink = --foreground (чёрный→белый). — */ --hover-bg:hsl(var(--muted-bg)); --selected-border:hsl(var(--foreground)); /* — Подложка оверлеев (модалки, шторки): тёмный скрим в обеих темах — */ --overlay-bg:hsl(0 0% 0% / .45); } .dark{ --background:0 0% 0%; --foreground:0 0% 100%; --card:0 0% 7%; --muted-bg:0 0% 15%; --muted-fg:0 0% 60%; --primary:0 0% 100%; --primary-fg:0 0% 0%; --accent:224 70% 62%; --border:0 0% 20%; --shadow-card:0 10px 30px rgb(0 0 0 / .5); --shadow-lg:0 16px 40px -8px rgb(0 0 0 / .6); /* цвета уровней — ярче для чёрного фона */ --beige:#d4bd8a; --purple:#a78bfa; --red:#f87171; --blue:#60a5fa; --orange:#fb923c; --green:#4ade80; --yellow:#facc15; --turquoise:#2dd4bf; --coral:#f0876a; --gold:#d4a93a; /* фигуры — ярче для чёрного фона */ --fear:#7fb6d2; --guilt:#b3a3d6; --shame:#e08a9e; --triumph:#e6b23e; --warn:#f59e0b; --paei-p:#f87171; --paei-a:#60a5fa; --paei-e:#fb923c; --paei-i:#4ade80; --success:#4ade80; --danger:#f87171; --info:#60a5fa; /* в тёмной теме «драматические» блоки — приподнятая тонированная панель, а не near-black */ --level-deep:color-mix(in srgb,var(--level) 22%,hsl(var(--card))); --level-bright:color-mix(in srgb,var(--level) 70%,#fff); /* плотнее скрим на чёрном фоне, чтобы модалка читалась */ --overlay-bg:hsl(0 0% 0% / .65); } /* — Готовые классы акцента уровня: ставить на или контейнер — */ .level-beige {--level:var(--beige)} .level-purple {--level:var(--purple)} .level-violet {--level:var(--purple)} .level-red {--level:var(--red)} .level-blue {--level:var(--blue)} .level-orange {--level:var(--orange)} .level-green {--level:var(--green)} .level-yellow {--level:var(--yellow)} .level-turquoise{--level:var(--turquoise)} .level-gold {--level:var(--gold)} /* — Акцент «четырёх фигур психики» (раздел «Эмоциональный интеллект») — */ .level-fear {--level:var(--fear)} .level-guilt {--level:var(--guilt)} .level-shame {--level:var(--shame)} .level-triumph {--level:var(--triumph)}