/* ============================================================ theme.css — СЛОЙ ТЕМЫ (design tokens) · Пульс — ТЕМА 2.0 «СВЕЧА» (Витрина 2.0, spec-vitrina-redesign §3; утверждено владельцем 08.08.2026.) Витрина переведена на язык УТВЕРЖДЁННОГО прототипа приложения Puls.salon (app-prototype/): палитра «свеча · шёлк · терракота · шалфей · золото», Cormorant для крупных цифр/заголовков + Golos Text для текста. Витрина и продукт говорят одним голосом: владелец видит один бренд и в кабинете салона, и в витрине разработки. Почему для ЦА (владелицы СПА-салонов и владелец проекта): тёплый свет свечи вместо «экрана монитора» — тишина и забота, а не приборная панель; терракота — цвет действия и тепла (кнопка «Посмотреть, как прошёл день»), шалфей — «всё хорошо», золото — праздник. Никаких красных экранов: проблемы подаются заботливо («стоит взглянуть»), поэтому семантический red — приглушённая глина, не пожарный алый. Светлая тема — ОСНОВНАЯ по смыслу бренда (прототип светлый), но контракт витрины сохраняем: :root = тёмная (по умолчанию), = светлая. Тёмная тема — «вечер при свече»: тёплый уголь с медовым светом. Подключается ПЕРЕД styles.css. styles.css — только вёрстка, цвета/формы/ шрифты берутся отсюда. Набор/имена токенов — контракт, не тронуты (те же 41 + --bg/--bg-soft/--theme-color, сверено с прежней версией темы): --accent --accent-2 --accent-ink --accent-soft --amber --amber-soft --blue --blue-soft --border --code-inline --font-display --g --green --green-2 --green-soft --mono --muted --on-accent --panel --panel-soft --pre-bg --pre-text --radius --radius-lg --red --red-soft --sans --shadow --shadow-lg --sidebar --sidebar-hover --sidebar-line --sidebar-text --sidebar-text-mut --surface-2 --text --text-mut --text-soft --topbar-bg --topbar-h --violet --violet-soft. Контраст WCAG AA пересчитан по ключевым парам (sRGB relative luminance), значения — в комментариях у блоков: обычный текст ≥4.5:1, крупный/UI ≥3:1. Веб-шрифты подключаются в index.html (слот #theme-fonts → Google Fonts): Cormorant (500/600, --font-display — «большие тёплые числа» прототипа) + Golos Text (400/500/600, --sans). Здесь @import НЕТ (правило слота). ============================================================ */ :root { /* ── Поверхности: «вечер при свече» — тёплый глубокий уголь с медовым подсветом (НЕ нейтрально-серый экран и НЕ холодный графит) ── */ --bg: #1c1610; /* тёплый уголь — комната при погашенном свете */ --bg-soft: #211a13; --sidebar: #171209; /* боковое меню — самый тёмный слой */ --sidebar-hover: #2a2216; --sidebar-line: #352b1d; --panel: #262017; /* карточки — приподняты тёплым светом */ --panel-soft: #201a12; --border: #3a3022; --surface-2: #2e2618; /* чипы, плашки, инлайн-код фон */ --topbar-bg: rgba(28,22,16,.85); /* ── Текст — тёплая свеча на угле ── */ --text: #f0e7d8; /* AA: 13.9:1 к --panel */ --text-soft: #cfc2ab; /* AA: 9.5:1 к --panel */ --text-mut: #a4977f; /* AA: 5.6:1 к --panel */ --sidebar-text: #ece2d0; /* AA: 14.6:1 к --sidebar */ --sidebar-text-mut: #9b8d76; /* AA: 5.9:1 к --sidebar */ --on-accent: #221108; /* тёмный уголь на терракоте — AA 7.4:1 к --accent */ /* ── Акцент — терракота свечного света (кнопка действия прототипа), второй — золото праздника ── */ --accent: #e0956d; /* терракота, высветлена под тёмный фон: AA 7.2:1 к --panel */ --accent-2: #d9b36a; /* золото — второй акцент (праздник, пик): AA 8.3:1 к --panel */ --accent-soft: #3c2a1c; /* тёплая терракотовая подложка; accent/accent-soft 5.3:1 */ /* ── Совместимость (алиасы контракта) ── */ --topbar-h: 60px; --muted: var(--text-mut); --accent-ink: var(--on-accent); --g: var(--accent); /* ── Семантика статусов — «никаких красных экранов»: шалфей (всё хорошо), мёд (стоит взглянуть), глина (нужно внимание — приглушённая, не алая), пыльная лазурь (инфо), сирень (спец). -soft всегда светлые — чип читается одинаково в обеих темах. ── */ --green: #4c6741; --green-2: #7d9270; --green-soft: #e9efe2; /* шалфей: green/soft 5.6:1 */ --amber: #8a611c; --amber-soft: #f7edd6; /* мёд: amber/soft 4.9:1 */ --red: #9d4732; --red-soft: #f8e6de; /* глина: red/soft 5.2:1 */ --blue: #47617e; --blue-soft: #e7edf3; /* пыльная лазурь: blue/soft 5.4:1 */ --violet: #6d5578; --violet-soft: #efe8f2; /* сирень: violet/soft 5.1:1 */ /* ── Формы — мягче прежнего «сигнала»: шёлк и свеча, стеклянные карточки прототипа (крупные скругления, глубокая мягкая тень) ── */ --radius: 14px; --radius-lg: 22px; --shadow: 0 1px 3px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.22); --shadow-lg: 0 18px 40px rgba(0,0,0,.45); /* ── Код ── */ --code-inline: #e0aa7c; /* тёплый код-акцент, AA 6.4:1 к --surface-2 */ --pre-bg: #171209; /* код-блок — самый тёмный слой */ --pre-text: #f0e7d8; /* AA ~14.6:1 к --pre-bg */ /* ── Типографика — язык прототипа ── */ --sans: 'Golos Text', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', system-ui, sans-serif; --mono: 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Consolas, monospace; --font-display: 'Cormorant', 'Times New Roman', Georgia, serif; /* большие тёплые числа и заголовки */ /* ── Мета ── */ --theme-color: #1c1610; } /* ============================================================ СВЕТЛАЯ ВЕРСИЯ — основная по смыслу бренда: «дневная свеча» прототипа. Фон #ece4d7 и чернила #4a3f33 — прямо из утверждённого макета; терракота затемнена до AA на светлом. Включается: . ============================================================ */ :root[data-theme="light"] { --bg: #ece4d7; /* свеча — фон утверждённого макета */ --bg-soft: #e5dbc9; --sidebar: #e6ddcb; /* шёлк — чуть плотнее фона */ --sidebar-hover: #dbcfb8; --sidebar-line: #d3c6ac; --panel: #f7f2e8; /* карточки — тёплый светлый шёлк */ --panel-soft: #efe8da; --border: #d8ccb3; --surface-2: #e7deca; --topbar-bg: rgba(236,228,215,.85); /* AA: text/bg 8.0:1, text/panel 9.0:1, text-soft/panel 6.6:1, text-mut/panel 4.6:1 */ --text: #4a3f33; /* чернила макета — тёплый глубокий орех */ --text-soft: #5d5142; --text-mut: #6f6250; --sidebar-text: #453b2f; /* AA 8.3:1 к --sidebar */ --sidebar-text-mut: #6c5f4d; /* AA 4.6:1 к --sidebar */ --on-accent: #fdf8ef; /* свеча на терракоте — AA 4.7:1 к --accent */ /* AA: accent/panel 4.7:1, accent/bg 4.3:1 (крупный/UI), accent/accent-soft 4.6:1 */ --accent: #a04f2e; /* терракота макета (#bf6b4a), затемнена до AA на светлом */ --accent-2: #8a6420; /* золото, затемнено — AA 5.0:1 к --panel */ --accent-soft: #f3e4d2; --green: #4c6741; --green-2: #7d9270; --green-soft: #e9efe2; --amber: #8a611c; --amber-soft: #f7edd6; --red: #9d4732; --red-soft: #f8e6de; --blue: #47617e; --blue-soft: #e7edf3; --violet: #6d5578; --violet-soft: #efe8f2; --shadow: 0 1px 3px rgba(74,63,51,.10), 0 2px 6px rgba(74,63,51,.06); --shadow-lg: 0 18px 40px rgba(74,63,51,.16); --code-inline: #8f451f; /* AA 4.9:1 к --surface-2 */ --pre-bg: #241d14; /* код-блок всегда тёмный (терминал) */ --pre-text: #f0e7d8; --theme-color: #ece4d7; }