/* preschool/academy-canonical-r2.css — VISUAL-ONLY additive layer for https://academy.vyshka.cloud/preschool/ (Детская Академия, r62 app). unify-max / color-fix, 2026-09-14. Owner: ecosystem canon EVERYWHERE — no yellow/purple islands («как и везде»). Canon (COLOR_VIOLATIONS.md P0-1 + ecosystem light v2 / dark v2): light: bg #f6f8fc · surface #fff · soft #eef2f9 · text #0f172a · muted #475569 · line #e6ebf3 · accent #1a56db (hover #1649c0) · accent-soft/hero #e7eefb/#eaf0fd · info #143a8f · mint #0e7a4f dark: bg #0b1220 · surface #111c2e · soft #17243a · text #edf3ff · muted #9fb0cd · line #223049 · accent #6b96ff (hover #91baff) · dark-on-accent #0b1220 (ecosystem dark button pattern) Scope rules (binding): - PALETTE ONLY: иллюстрации, скругления (в т.ч. --radius 24px), формы, DOM/JS/контент — НЕ тронуты. Only color tokens + hard-coded color hexes. - Загружается ПОСЛЕДНИМ в (после styles-r62 и engine-r62); одинаковая специфичность побеждается порядком подключения. - Тёмная тема preschool сохранена (html[data-theme=dark]) — переведена на канон-тёмные значения, весь контраст ≥ 4.5:1 (см. отчёт color-fix). - Игровые движки (engine-r62 --ae-*) тянут токены через var(--accent…) и наследуют канон; --ae-warm дополнительно закреплён значением info. - Семантика сохранена: зелёное = готово/успех, красное = опасность. */ /* --- 1) Светлая тема: пурпур/лаванда/золото -> канон light v2 ---------- */ :root { --bg: #f6f8fc; /* was lavender #f8f7fc */ --surface: #ffffff; --surface-soft: #eef2f9; /* was #f6f3fc */ --text: #0f172a; /* was purple-ink #302b42 */ --muted: #475569; /* was #746e83 */ --line: #e6ebf3; /* was #eae6f1 */ --accent: #1a56db; /* was purple #7554cf */ --accent-hover: #1649c0; /* was #6040b7 */ --accent-soft: #e7eefb; /* was #eee8fa */ --focus: #1a56db; /* was #9a72e7 */ /* yellow/gold badges & tips -> canon blue info family */ --yellow: #e7eefb; /* was #fff1d0 */ --yellow-text: #143a8f; /* was #866223 */ /* peach accents -> canon mint info family */ --peach: #e7f8f0; /* was #fce8dc */ --peach-text: #0e7a4f; /* was #975c3d */ /* mint: normalize to ecosystem green family */ --mint: #e7f8f0; --mint-text: #0e7a4f; /* blue tone: normalize to info family */ --blue: #e7eefb; --blue-text: #143a8f; /* was #536ea2 */ --shadow: 0 8px 35px rgba(23, 43, 99, 0.07); /* was purple #49346d07 */ --hero: #eaf0fd; /* was #eee8f9 */ /* --radius 24px СОХРАНЁН (child-friendly rounded shapes — миссия) */ } /* --- 2) Тёмная тема: пурпурная тёмная -> канон dark v2 ----------------- */ html[data-theme=dark] { --bg: #0b1220; /* was #17151e */ --surface: #111c2e; /* was #211e2a */ --surface-soft: #17243a; /* was #292433 */ --text: #edf3ff; /* was #eee9f7 */ --muted: #9fb0cd; /* was #b0a8bf */ --line: #223049; /* was #37313f */ --accent: #6b96ff; /* was #b097ee */ --accent-hover: #91baff; /* was #c2adf4 */ --accent-soft: #1a2b47; /* was #362b4f */ --focus: #91baff; /* was #c5a8ff */ --yellow: #1a2b47; /* was #403625 */ --yellow-text: #91baff; /* was gold #ecd195 */ --peach: #16281c; /* was #432e28 */ --peach-text: #9cdfc2; /* was #e7b69b */ --blue: #17243a; /* was #273247 */ --blue-text: #91baff; /* was #b2c7ea */ /* mint-семья тёмной темы сохранена (зелёный = семантика «готово») */ --shadow: 0 8px 35px #00000010; --hero: #14213c; /* was #312744 */ } /* --- 3) Канон-паттерн активной кнопки в тёмной теме --------------------- (как в экосистеме: тёмный текст на светлом акценте). Was #221632. ---- */ html[data-theme=dark] .age-button[aria-pressed=true], html[data-theme=dark] .button:not(.button-secondary):not(.button-ghost):not(.button-danger) { color: #0b1220; } html[data-theme=dark] .activity-engine .ae-primary, html[data-theme=dark] .activity-engine .ae-primary:not(:disabled):hover { color: #0b1220; } /* --- 4) Жёстко-прописанные пурпурные hex -> канон (обе темы) ----------- */ .hero { border-color: rgba(26, 86, 219, 0.16); /* was #b6a1df22 */ } .lesson-card:hover { border-color: #a9c3f0; /* was #bba4e2 */ } .play-disc { color: #1a56db; /* was #6040b7 */ box-shadow: 0 4px 18px rgba(16, 19, 29, 0.15); /* was #30204218 */ } .video-cover::after { background: linear-gradient(transparent, rgba(16, 19, 29, 0.16)); /* was #27153b22 */ } .toast { box-shadow: 0 6px 24px rgba(16, 19, 29, 0.18); /* was #24113820 */ } .menu-scrim.is-open { background: rgba(11, 18, 32, 0.4); /* was #21193266 */ } .lesson-backdrop { background: rgba(11, 18, 32, 0.6); /* was #2018338c / #201833a3 */ } .lesson-dialog { box-shadow: 0 30px 100px rgba(11, 18, 32, 0.25); /* was #17101f40 / #17101f30 */ } /* danger hover: нейтральный светло-красный вместо персикового вар-поля (#b5484a на #faeef0 = 4.65:1, лучше исходных персиковых 4.44:1) */ .button-danger:hover { background: #faeef0; /* light: was var(--peach) #fce8dc */ } html[data-theme=dark] .button-danger:hover { background: #3a2226; /* dark: was var(--peach) #432e28 */ } /* --- 5) Игровой движок: закрепление info-семьи для --ae-warm ----------- */ .activity-engine { --ae-warm: var(--yellow, #e7eefb); /* was fallback gold #f7d887 */ } /* Слой не добавляет анимаций; явный guard для перекрашенного (как в r1). */ @media (prefers-reduced-motion: reduce) { .play-disc, .toast, .lesson-backdrop, .lesson-dialog { animation: none !important; transition: none !important; } }