/* ============================================================ theme.css — СЛОЙ ТЕМЫ (design tokens). Уникален для проекта «Кристина Лорентц». Сгенерирована персоной «Художник» (скилл /design) под бренд-концепцию «Грань» (знак — огранённый минерал, site/assets/brand/mark*.svg) и ЦА: корпоративные ЛПР (основной сегмент), женщины в личной работе, покупатели ювелирных изделий. Настроение: «дорогой минерал, а не магический шар» — спокойная премиальность без придыхания. Тёплый глубокий графит (#1E1B18, цвет знака) + приглушённое золото (#B08A4E/#8E6C3B, металл/камень) вместо дефолтного индиго. Ноль эзотерики в форме: геометрия огранки → чуть более чёткие, менее «мыльные» радиусы и тёплые тени. Подключается ПЕРЕД styles.css. styles.css — только вёрстка, цвета/формы/шрифты берутся отсюда. Набор токенов ниже — контракт, имена не менять. ============================================================ */ :root { /* ── Поверхности (тёмная — по умолчанию: глубокий тёплый графит, не синий) ── */ --bg: #17130F; /* глубокий фон (запас) */ --bg-soft: #1E1B18; /* графит знака бренда */ --sidebar: #14110D; /* фон бокового меню — темнее панелей, даёт глубину */ --sidebar-hover: #241E18; /* ховер пункта меню */ --sidebar-line: #2C2620; /* разделители/рамки в сайдбаре */ --panel: #221E1A; /* фон карточек */ --panel-soft: #1B1815; /* фон страницы, мягкие плашки */ --border: #352D24; --surface-2: #2A241E; /* серые плашки (чипы, инлайн-код фон) */ --topbar-bg: rgba(27,24,21,.85); /* фон верхней панели (полупрозрачный) */ /* ── Текст (тёплая ивори, не холодный slate) ── */ --text: #F3EEE6; --text-soft: #BBAF9F; --text-mut: #96897A; --sidebar-text: #E3D8C8; /* текст пунктов бокового меню */ --sidebar-text-mut: #8F836F; /* приглушённый текст в сайдбаре */ --on-accent: #1E1B18; /* графитовый текст на золотом акценте (AA к --accent) */ /* ── Акцент (главный бренд-цвет — приглушённое золото «камень/металл») ── */ --accent: #B08A4E; /* база — цвет металла/камня от Логотипщика */ --accent-2: #C9A46B; /* светлее — для градиентов/аватаров (цвет mark-dark.svg) */ --accent-soft: #2E2416; /* тёплая тёмная подложка акцента (не блёклый пастельный) */ /* ── Семантика статусов (гармонизированы с тёплой палитрой, смысл сохранён) ── */ --green: #2F6B41; --green-2: #4E9463; --green-soft: #DCEADD; --amber: #8F4F16; --amber-soft: #F5E4CE; --red: #A8402F; --red-soft: #F5DDD7; --blue: #3D6690; --blue-soft: #DCE6EE; --violet: #7A4F82; --violet-soft: #EBDCEC; /* ── Формы (чуть чётче — «геометрия огранки», не мыльный дефолт) ── */ --radius: 10px; --radius-lg: 15px; --shadow: 0 1px 3px rgba(15,12,8,.35), 0 1px 2px rgba(15,12,8,.25); --shadow-lg: 0 14px 32px rgba(10,8,5,.45); /* ── Код ── */ --code-inline: #D08C6B; /* цвет инлайн-кода `код` */ --pre-bg: #14110D; /* фон блока кода */ --pre-text: #E8DFD3; /* текст блока кода */ /* ── Типографика ── */ --sans: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', system-ui, sans-serif; --mono: 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Consolas, monospace; --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; /* premium serif — как в wordmark знака */ /* ── Мета ── */ --theme-color: #14110D; /* цвет строки браузера (моб.), = */ } /* ============================================================ СВЕТЛАЯ ВЕРСИЯ: тёплые светлые поверхности (слоновая кость / тёплый белый), акцент — то же золото, но потемнее (#8E6C3B), чтобы контраст с белым был достаточным. Включается: . ============================================================ */ :root[data-theme="light"] { --bg: #FBF7F0; --bg-soft: #F5EFE4; --sidebar: #F2EBDD; --sidebar-hover: #E9DFCB; --sidebar-line: #E0D3BC; --panel: #FFFFFF; --panel-soft: #F6F1E7; --border: #E4DAC8; --surface-2: #EFE7D8; --topbar-bg: rgba(246,241,231,.85); --text: #1E1B18; /* графит знака — прямая связь с брендом */ --text-soft: #5B5347; --text-mut: #756B5C; --sidebar-text: #2A251E; --sidebar-text-mut: #6B6153; --on-accent: #FFFFFF; /* белый текст на потемневшем золоте (AA к --accent) */ --accent: #8E6C3B; /* золото потемнее — контраст к светлым поверхностям */ --accent-2: #B08A4E; /* база-металл как второй тон для градиентов */ --accent-soft: #F3EAD8; --green: #2F6B41; --green-2: #4E9463; --green-soft: #DCEADD; --amber: #8F4F16; --amber-soft: #F5E4CE; --red: #A8402F; --red-soft: #F5DDD7; --blue: #3D6690; --blue-soft: #DCE6EE; --violet: #7A4F82; --violet-soft: #EBDCEC; --shadow: 0 1px 3px rgba(30,27,24,.10), 0 1px 2px rgba(30,27,24,.06); --shadow-lg: 0 10px 25px rgba(30,27,24,.12); --code-inline: #9C4A2E; --pre-bg: #1E1B18; --pre-text: #EFE8DC; --theme-color: #F2EBDD; }