/* ============================================================ ДИЗАЙН-ТОКЕНЫ — ЕДИНСТВЕННЫЙ источник цветов/шрифтов/размеров. Бренд «Голос рисунка» (см. projectSpec/brand-book.md). Палитра выведена из hero-фото (тёплый золотой час): тёплая бумага + медовый янтарь + эспрессо-текст + джинсовый синий из детских рисунков. ЗАКОН: ничего не хардкодить в страницах/компонентах — только эти переменные. Меняешь тут → меняется ВЕСЬ сайт. Переключение темы: класс на (settings.PALETTE): "" = брендовая «Золотой час» (дефолт), "cl" светлая, "dk" тёмная. ============================================================ */ :root { /* ---------- Поверхности ---------- */ --bg: #FCEFDF; /* тёплая бумага — фон страницы (= фон лого, чтобы шапка сливалась с логотипом) */ --bg-soft: #FFF8EA; /* чуть светлее — мягкая секция-«передышка» */ --alt: #F4EBD8; /* фон чередующихся секций (section--alt) */ --paper: #FFFCF4; /* карточки, формы, полароиды */ --line: #EADDC4; /* границы, разделители, рамки карточек */ --polbg: #ffffff; /* фон фото внутри полароида */ /* ---------- Текст ---------- */ --ink: #3A2A1C; /* основной — тёплый эспрессо (НЕ холодный синий) */ --muted: #6E5942; /* вторичный */ --soft: #A38B6E; /* третичный / подписи */ --cap: #6E5942; /* подписи под полароидами */ /* ---------- Акценты ---------- */ --accent: #3E4E78; /* ДЖИНСОВЫЙ СИНИЙ — главное действие: CTA, ссылки, фокус, активные состояния, заливка данных */ --accent-2:#5E78B4; /* светлее джинсового — ховеры, мягкие тинты */ --accent2: #B9722A; /* МЕДОВЫЙ ЯНТАРЬ — бренд-голос: «голос», лого-акцент, тёплые метки (НЕ для крупных действий) */ --amber-soft:#E7A93C; /* светлый янтарь — иконки, мелкий декор */ --sage: #7E9B63; /* шалфей — позитивные «галочки» (из крайонов рисунков) */ --badge: #5E78B4; /* генератор лёгких тинтов (chips/inputs) = accent-2 */ --danger: #C0392B; /* ошибки форм (используется сдержанно) */ --ok: #2E7D32; /* статус «готово»/успех */ /* ---------- Типографика (spec §3.3) ---------- */ --font-head: "Rubik", system-ui, sans-serif; /* доступно: 800, 900 */ --font-body: "Inter", system-ui, sans-serif; /* доступно: 400, 500, 600 */ --font-hand: "Caveat", cursive; /* доступно: 600, 700 — ТОЛЬКО «голос» + лого */ /* Шкала шрифта — 7 ступеней, использовать ТОЛЬКО их */ --fs-display: clamp(34px, 5vw, 56px); /* H1 героя */ --fs-h2: clamp(27px, 3.3vw, 40px); /* заголовки секций */ --fs-h3: 21px; /* подзаголовки карточек/шагов */ --fs-lead: 20px; /* лид, .sub */ --fs-body: 17px; /* основной текст */ --fs-small: 15px; /* подписи, второстепенное */ --fs-micro: 13px; /* чипы, бейджи, метки */ /* ---------- Геометрия ---------- */ --wrap-max: 1160px; --radius-card:20px; --radius-sm: 10px; --radius-pill:99px; /* ---------- Тени (тёплые, мягкие — без жёстких чёрных) ---------- */ --shadow: rgba(58, 42, 28, .14); --shadow-card: 0 14px 34px rgba(58, 42, 28, .12); --shadow-pol: 0 14px 30px rgba(58, 42, 28, .18); --shadow-hard: 0 12px 28px rgba(62, 78, 120, .30); /* «приподнятая» кнопка (мягкая) */ --shadow-hard-sm:0 6px 16px rgba(58, 42, 28, .16); } /* ---------- Тема «Светлая» (воздушная, для A/B) ---------- */ html.cl { --bg:#EFF4F0; --bg-soft:#F7FAF8; --alt:#E7EFEA; --paper:#FFFFFF; --line:#DCE6DF; --ink:#243027; --muted:#52605A; --soft:#8A988F; --cap:#52605A; --accent:#3E4E78; --accent-2:#5E78B4; --accent2:#B9722A; --amber-soft:#E7A93C; --sage:#7E9B63; --badge:#5E78B4; --shadow:rgba(30,50,40,.12); } /* ---------- Тема «Тёмная» (тёплая ночь) ---------- */ html.dk { --bg:#241A12; --bg-soft:#2C2116; --alt:#2E2318; --paper:#33271B; --line:#473726; --polbg:#FFFCF4; --ink:#F3E7D2; --muted:#C7B393; --soft:#9B8769; --cap:#9B8769; --accent:#7E96D6; --accent-2:#9FB2E6; --accent2:#E7A93C; --amber-soft:#F0C06A; --sage:#9DBA7E; --badge:#7E96D6; --shadow:rgba(0,0,0,.5); --shadow-card:0 14px 34px rgba(0,0,0,.4); }