/* ============================================================ theme.css — СЛОЙ ТЕМЫ (design tokens). Проект «Ассистент-переводчик». Персона «Художник» (/design). Направление: диалог и языки, средиземноморская Анталья — бирюзово-тиловая палитра (море + коммуникация), тёплый деловой характер, мягкие скруглённые формы (речевые «пузыри»). Контраст WCAG AA в обеих темах. Меняются ТОЛЬКО значения токенов; набор имён = контракт (вёрстка неизменна). ============================================================ */ :root { /* ── Поверхности (тёмная — по умолчанию) ── */ --bg: #071f1c; /* глубокий тил-фон */ --bg-soft: #0b2723; --sidebar: #051512; /* фон бокового меню */ --sidebar-hover: #0e2b28; /* ховер пункта меню */ --sidebar-line: #163b36; /* разделители/рамки в сайдбаре */ --panel: #0e2b28; /* фон карточек */ --panel-soft: #0b2420; /* фон страницы, мягкие плашки */ --border: #1b3f3a; --surface-2: #123531; /* серые плашки (чипы, инлайн-код фон) */ --topbar-bg: rgba(7,31,28,.85); /* ── Текст ── */ --text: #e6f4f1; --text-soft: #a7c9c2; --text-mut: #6f938c; --sidebar-text: #b8d6d0; --sidebar-text-mut: #6f938c; --on-accent: #04231f; /* тёмный текст на ярком бирюзовом */ /* ── Акцент (бренд — бирюза диалога) ── */ --accent: #2dd4bf; --accent-2: #14b8a6; /* второй тон для градиентов/аватаров */ --accent-soft: #0f2e2a; /* мягкая подложка акцента (тёмная) */ /* ── Семантика статусов (смысл сохраняется во всех темах) ── */ --green: #16a34a; --green-2: #22c55e; --green-soft: #dcfce7; --amber: #d97706; --amber-soft: #fef3c7; --red: #dc2626; --red-soft: #fee2e2; --blue: #2563eb; --blue-soft: #dbeafe; --violet: #7c3aed; --violet-soft: #ede9fe; /* ── Формы (мягкие «пузыри») ── */ --radius: 14px; --radius-lg: 18px; --shadow: 0 1px 3px rgba(2,20,18,.30), 0 1px 2px rgba(2,20,18,.20); --shadow-lg: 0 12px 28px rgba(2,20,18,.35); /* ── Код ── */ --code-inline: #2dd4bf; /* цвет инлайн-кода `код` */ --pre-bg: #04231f; /* фон блока кода */ --pre-text: #cde9e4; /* текст блока кода */ /* ── Типографика ── */ --sans: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', system-ui, sans-serif; --mono: 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Consolas, monospace; --font-display: var(--sans); /* ── Мета ── */ --theme-color: #051512; } /* ============================================================ СВЕТЛАЯ ВЕРСИЯ. Включается: . ============================================================ */ :root[data-theme="light"] { --bg: #eef5f3; --bg-soft: #e3efec; --sidebar: #e3efec; --sidebar-hover: #d6e7e3; --sidebar-line: #cadfd9; --panel: #ffffff; --panel-soft: #eff6f4; --border: #d5e5e1; --surface-2: #e6f1ee; --topbar-bg: rgba(238,245,243,.85); --text: #0f2b28; --text-soft: #3f5f5a; --text-mut: #6f8b85; --sidebar-text: #23433e; --sidebar-text-mut: #5c7a74; --on-accent: #ffffff; --accent: #0f766e; --accent-2: #0d9488; --accent-soft: #d8efec; --green: #16a34a; --green-2: #16a34a; --green-soft: #dcfce7; --amber: #b45309; --amber-soft: #fef3c7; --red: #dc2626; --red-soft: #fee2e2; --blue: #2563eb; --blue-soft: #dbeafe; --violet: #7c3aed; --violet-soft: #ede9fe; --shadow: 0 1px 3px rgba(15,43,40,.08), 0 1px 2px rgba(15,43,40,.05); --shadow-lg: 0 10px 25px rgba(15,43,40,.10); --code-inline: #0f766e; --pre-bg: #04231f; --pre-text: #cde9e4; --theme-color: #eef5f3; }