/* Акценты и айдентика «Айсберри». Подключается ПОСЛЕ styles.css и перебивает базовые переменные ядра. Структура (карточки, тени, сетка, движение) — в styles.css, здесь только цвета и марка в шапке. Реальная палитра с iceberry.ru: малиновый primary, тёплый кремовый фон — бренд десертный и тёплый, не холодный синий-«лёд» дефолта кита. ── ПОЧЕМУ --blue ЗДЕСЬ НЕ МАЛИНОВЫЙ ───────────────────────────────────── Валидатор палитры скилла dataviz (scripts/validate_palette.js) валит малиновый #E31A4D рядом с danger-красным --bad (#D8412F): нормал-вижн ΔE 6.2 — ниже жёсткого порога 15, обе трети населения с дальтонизмом и люди с обычным зрением путают «нет визита» (было tone:'blue') со статусом «риск». Причина не в конкретном оттенке, а в том, что --blue в ядре — это ОДНОВРЕМЕННО тон данных (donut/линия/dotmap/канбан — «план», «без визита») и акцент бренда: на синем бренде это работает, на красно-малиновом — никогда не пройдёт CVD-проверку рядом с красным. Разводим роли: --blue остаётся тоном ДАННЫХ (валидированный, см. ниже), а малиновый переезжает в --brand — акцент чистой идентики (лого, активный пункт меню, кнопки-CTA, левая полоса меню), который ядро подставляет через var(--brand, var(--blue)) и который НИГДЕ не красит категорию данных. Числа палитры статусов (ok/warn/bad/blue) пере-подобраны и прогнаны через validate_palette.js --mode light/dark — PASS в обоих. */ :root { /* Малиновый — теперь только акцент бренда (лого, активный пункт меню, кнопки), не тон данных. #E31A4D даёт контраст с белым текстом 4,64:1 (AA для обычного текста, ≥4.5:1). */ --brand:#E31A4D; --brand-soft:#E31A4D1f; /* Коралл — второй акцент (плашка ДЕМО, градиентные штрихи). #D14A2E ~4,4:1 с белым текстом — на грани AA, специально не бледный пастельный коралл, чтобы плашка не терялась на кремовом фоне. Один цвет, не соседствует ни с одним другим тоном на одном графике — категориальная проверка его не касается (scope-примечание color-formula.md). */ --orange:#D14A2E; --orange-soft:#D14A2E1f; /* --blue — тон ДАННЫХ («план», «без визита» на dotmap/канбане/линии), ходовой цвет и части интерфейса (ссылки, датабары): холодный синий, validate_palette.js "#1F9D55,#C4A81C,#D8412F,#1479C4" --mode light → ALL CHECKS PASS. Это не брендовый выбор, а функциональный — держит дистанцию от danger-красного. */ --blue:#1479C4; --blue-soft:#1479C41f; /* Статусы ok/warn/bad — та же валидация: амбер #D08700 стоял впритык к зелёному (ΔE 4.8, FAIL) и давал контраст 2,69 против кремового фона. #C4A81C — золотисто-охристый, а не жёлто-зелёный: ΔE 9,3 до зелёного, проходит и CVD-таргет (8), и normal-vision floor (15). */ --ok:#1F9D55; --ok-soft:#1F9D551f; --warn:#C4A81C; --warn-soft:#C4A81C1f; --bad:#D8412F; --bad-soft:#D8412F1f; /* Тёплый кремовый холст вместо холодного серого. */ --bg:#FDF3EE; --surface:#FFF7F2; --surface-2:#FCEEE9; --line:#F0DCD3; --line-strong:#E3C0B2; --text:#2B1712; --text-2:#6B534C; --muted:#9C8880; --shadow:0 1px 2px rgba(43,23,18,.06), 0 8px 24px -12px rgba(43,23,18,.18); /* Слой отделки ядра (styles.css) считает тона свечения и блика отдельно от --bg/--surface — перекрашиваем и их, иначе фон тёплый, а подсветка за карточками осталась синей. Свечение остаётся на малиновом (--brand) — это декоративный слой карточек, не тон данных. */ --surface-hi:#FFFBF8; --glow-a:rgba(227,26,77,.08); --glow-b:rgba(209,74,46,.06); --ring:rgba(43,23,18,.05); /* Тёплый холст с малиновым свечением, как в согласованном макете. Плоский кремовый #FDF3EE читался почти белым и «дешевил» — возвращаем радиальную подсветку бренда в правый-верх и коралловую в левый-низ. */ --page-wash: radial-gradient(125% 85% at 90% -12%, rgba(227,26,77,.13), transparent 48%), radial-gradient(80% 70% at -6% 108%, rgba(209,74,46,.06), transparent 55%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Тёмная тема — не тёплая версия кремовой, а тёмная версия малиновой: поверхности берём стандартные тёмные ядра, перекрашиваем только акцент. #D01345 темнее дневного #E31A4D намеренно — с белым текстом это 5,4:1 (с запасом по AA), а дневной оттенок на тёмном фоне давал только ~3:1. */ --brand:#D01345; --brand-soft:#D0134526; --orange:#D14A2E; --orange-soft:#D14A2E26; /* Тёмный тон данных + статусы — validate_palette.js "#2FA562,#944400,#E3574A,#3A8FD4" --mode dark → ALL CHECKS PASS. Дефолт ядра (#4AA3E8/#3FBF74/#F0685A) сам не проходит проверку границ светлоты (L вне полосы 0.48–0.67 для тёмной темы) — здесь фиксируем для этого стенда уже валидированные значения. */ --blue:#3A8FD4; --blue-soft:#3A8FD426; --ok:#2FA562; --ok-soft:#2FA56226; --warn:#944400; --warn-soft:#94440026; --bad:#E3574A; --bad-soft:#E3574A26; --glow-a:rgba(208,19,69,.14); --glow-b:rgba(209,74,46,.08); --page-wash: radial-gradient(125% 85% at 90% -12%, rgba(255,77,116,.11), transparent 48%), radial-gradient(80% 70% at -6% 108%, rgba(209,74,46,.08), transparent 55%); } } :root[data-theme="dark"] { --brand:#D01345; --brand-soft:#D0134526; --orange:#D14A2E; --orange-soft:#D14A2E26; --blue:#3A8FD4; --blue-soft:#3A8FD426; --ok:#2FA562; --ok-soft:#2FA56226; --warn:#944400; --warn-soft:#94440026; --bad:#E3574A; --bad-soft:#E3574A26; --glow-a:rgba(208,19,69,.14); --glow-b:rgba(209,74,46,.08); --page-wash: radial-gradient(125% 85% at 90% -12%, rgba(255,77,116,.11), transparent 48%), radial-gradient(80% 70% at -6% 108%, rgba(209,74,46,.08), transparent 55%); } /* Свечение бренда на холсте страницы (перебивает плоский background:var(--bg) из ядра — brand.css грузится после, поэтому цвет фона остаётся, а поверх ложится радиальная подсветка). Фиксируем, чтобы не съезжало при скролле. */ body { background-image: var(--page-wash); background-attachment: fixed; } /* ── марка в шапке: значок + вордмарк, не дженерик-кружок с текстом ─────── Текст остаётся в DOM (доступность), визуально скрыт — вместо него значок фоном: буква «а» и брызги, инлайн-SVG, без внешних файлов и без эмодзи. */ .brand-mark { position:relative; color:transparent; font-size:0; } .brand-mark::after { content:''; position:absolute; inset:0; background-repeat:no-repeat; background-position:center; background-size:66%; background-image:url("data:image/svg+xml,a"); }