/* ============================================================ theme.css — СЛОЙ ТЕМЫ (design tokens). Проект «ЯРТАЙ» — кемпинг на Алтае. Генерится персоной «Художник» (скилл /design) из логотипа и ЦА. Подключается ПЕРЕД styles.css. styles.css — только вёрстка; цвета/формы/шрифты берутся отсюда. Меняй значения — не структуру (набор токенов = контракт). Направление: айдентика логотипа — золотое дерево на тёмно-фиолетовом. • Тёмная тема (по умолчанию) = сигнатурный вид: тёплое золото на глубоком фиолете. • Светлая тема = брендовый фиолет-акцент на тёплом кремовом, золото — второй тон. Контраст WCAG AA проверен в обеих темах (текст ≥4.5:1, крупное ≥3:1). ============================================================ */ :root { /* ── Поверхности (глубокий фиолет, как фон логотипа) ── */ --bg: #170a2e; /* глубокий аубержин */ --bg-soft: #201138; --sidebar: #130826; /* фон бокового меню */ --sidebar-hover: #291746; /* ховер пункта меню */ --sidebar-line: #2e1c4d; /* разделители/рамки в сайдбаре */ --panel: #221340; /* фон карточек */ --panel-soft: #1a0e34; /* фон страницы, мягкие плашки */ --border: #382257; --surface-2: #2b1a4c; /* серые плашки (чипы, инлайн-код фон) */ --topbar-bg: rgba(19,8,38,.85); /* фон верхней панели (полупрозрачный) */ /* ── Текст ── */ --text: #f3ecff; --text-soft: #cabbe6; --text-mut: #a794cc; --sidebar-text: #dccff2; /* текст пунктов бокового меню */ --sidebar-text-mut: #9a86bf; /* приглушённый текст в сайдбаре */ --on-accent: #2a1550; /* тёмный текст на золотом акценте */ /* ── Акцент (тёплое золото — крона/корни дерева) ── */ --accent: #ecc94b; --accent-2: #d9a441; /* глубже — для градиентов/аватаров */ --accent-soft: #3a2c14; /* тёмная тёплая подложка (золото-текст читается) */ /* ── Семантика статусов (самодостаточные светлые чипы) ── */ --green: #15803d; --green-2: #22c55e; --green-soft: #dcfce7; --amber: #b45309; --amber-soft: #fef3c7; --red: #b91c1c; --red-soft: #fee2e2; --blue: #1d4ed8; --blue-soft: #dbeafe; /* ── Формы (мягкие, органичные — «корни и рост») ── */ --radius: 14px; --radius-lg: 20px; --shadow: 0 1px 3px rgba(9,4,20,.45), 0 1px 2px rgba(9,4,20,.35); --shadow-lg: 0 14px 34px rgba(9,4,20,.55); /* ── Код ── */ --code-inline: #f2c26b; /* цвет инлайн-кода `код` */ --pre-bg: #130826; /* фон блока кода */ --pre-text: #e8dcff; /* текст блока кода */ /* ── Типографика ── */ --sans: 'Manrope', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif; --mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', Consolas, monospace; --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; /* заголовки — тёплый характер */ /* ── Мета ── */ --theme-color: #130826; /* цвет строки браузера (моб.), = */ } /* ============================================================ СВЕТЛАЯ ВЕРСИЯ. Включается: . Тёплый кремовый + брендовый фиолет-акцент; золото — второй тон. ============================================================ */ :root[data-theme="light"] { --bg: #f7f3ec; /* тёплый кремовый */ --bg-soft: #efe7d9; --sidebar: #efe7d9; --sidebar-hover: #e6dccb; --sidebar-line: #ddd2bf; --panel: #ffffff; --panel-soft: #faf6ef; --border: #e7ddcb; --surface-2: #f1e9dc; --topbar-bg: rgba(247,243,236,.85); --text: #2a1a3e; --text-soft: #5b4a72; --text-mut: #6d5d86; --sidebar-text: #3a2758; --sidebar-text-mut: #695a80; --on-accent: #ffffff; --accent: #6b3fa0; /* брендовый фиолет — читается как текст на белом */ --accent-2: #d4a017; /* золото — второй тон (градиенты/декор) */ --accent-soft: #efe6f7; /* светлая лавандовая подложка */ --green: #15803d; --green-2: #16a34a; --green-soft: #dcfce7; --amber: #b45309; --amber-soft: #fef3c7; --red: #b91c1c; --red-soft: #fee2e2; --blue: #1d4ed8; --blue-soft: #dbeafe; --shadow: 0 1px 3px rgba(74,42,130,.10), 0 1px 2px rgba(74,42,130,.06); --shadow-lg: 0 14px 30px rgba(74,42,130,.14); --code-inline: #b0176a; --pre-bg: #241340; --pre-text: #f0e8ff; --theme-color: #f7f3ec; }