/* Дизайн-токены v2. Цвета — только отсюда, в коде не хардкодим. Тема переключается атрибутом data-theme на , акцент — data-accent. */ [data-theme="light"] { --bg: #EFEFF4; --surface: #FFFFFF; --surface-2: #EFEFF4; --border: #E3E3E8; --divider: #F0F0F3; --text-primary: #1C1C1E; --text-secondary: #8A8A8E; --text-tertiary: #B0B0B5; --accent-default: #3390EC; --success: #34C759; --success-bg: #E4F7E9; --warning: #FF9500; --warning-bg: #FFF1DF; --danger: #FF3B30; --danger-bg: #FFE9E7; --shadow: 0 1px 5px rgba(0,0,0,.05); } [data-theme="dark"] { --bg: #0E0F12; --surface: #1B1D22; --surface-2: #26282F; --border: #2E3138; --divider: #25272D; --text-primary: #F2F3F5; --text-secondary: #9A9DA6; --text-tertiary: #6E727B; --accent-default: #4AA3F5; --success: #3DD15F; --success-bg: #15301E; --warning: #FF9F0A; --warning-bg: #3A2A12; --danger: #FF453A; --danger-bg: #3A1B1A; --shadow: 0 1px 6px rgba(0,0,0,.35); } /* Акцент: по умолчанию — брендовый синий (темо-зависимый), остальные — фикс. Селектор html[...] специфичнее :root, иначе :root ниже перебивал бы выбор. */ html[data-accent="blue"] { --accent: var(--accent-default); } html[data-accent="green"] { --accent: #34C759; } html[data-accent="orange"] { --accent: #FF9500; } html[data-accent="red"] { --accent: #FF3B30; } html[data-accent="purple"] { --accent: #AF52DE; } html[data-accent="pink"] { --accent: #FF2D92; } :root { /* акцент по умолчанию, если data-accent не задан */ --accent: var(--accent-default); /* фон акцентного статуса «На проверке» — лёгкая подложка под текущий акцент */ --accent-bg: color-mix(in srgb, var(--accent) 16%, var(--surface)); /* ── алиасы под уже существующую разметку (styles.css) ── */ --card: var(--surface); --text: var(--text-primary); --muted: var(--text-secondary); --warn: var(--warning); --st-blue-fg: var(--accent); --st-blue-bg: var(--accent-bg); --st-orange-fg: var(--warning); --st-orange-bg: var(--warning-bg); --st-green-fg: var(--success); --st-green-bg: var(--success-bg); --st-gray-fg: var(--text-secondary); --st-gray-bg: var(--surface-2); }