/* Dark theme — по умолчанию */ :root { --bg: #08080c; --bg-card: #16162a; --bg-card-elevated: #1f1d3a; --border: #2a2a3d; --border-strong: #3a3a55; --text: #e5e7eb; --text-strong: #ffffff; --text-muted: #b8bcc7; --text-faint: #8a8e99; /* Семантические переменные, флипающиеся между темами */ --label-color: var(--accent-violet-light); /* .block-label */ --logo-filter: invert(1); /* лопаты-логотип чёрный → белый */ --pillar-num-opacity: 0.4; color-scheme: dark; } /* Light theme — переключается JS-тогглером через data-theme="light" на */ html[data-theme="light"] { --bg: #fafafa; --bg-card: #ffffff; --bg-card-elevated: #f4f4f5; --border: #e4e4e7; --border-strong: #d4d4d8; --text: #18181b; --text-strong: #09090b; --text-muted: #52525b; --text-faint: #71717a; --label-color: var(--accent-violet); /* на белом светло-фиолетовый теряется */ --logo-filter: none; /* на белом фоне лопаты остаются чёрными */ --pillar-num-opacity: 0.55; /* в светлой 0.4 слишком бледно */ color-scheme: light; } html, body { background-color: var(--bg); color: var(--text); }