/* Токены темы Bounty — копия значений из docs/themes.md. * * Это НЕ самостоятельный источник цвета: новый цвет сначала появляется в * документе, потом здесь. Иначе панель, веб и мобильные разъезжаются, и * «фирменный бирюзовый» становится тремя разными бирюзовыми. * * Тема переключается атрибутом `data-theme="dark"` на . * Системную настройку НЕ читаем нигде (docs/themes.md §1, правило 1): * сервис выглядит одинаково у всех, и скриншоты в поддержке совпадают с тем, * что человек видит на экране. */ :root { /* Нейтральные — светлая тема (основная) */ --bg: #ffffff; --surface: #f6f8fa; --surface2: #ffffff; --surface3: #eef1f5; --text: #0b1220; --text2: #5a6675; --text3: #8a94a3; --border: #e5e9ef; --border2: #d5dbe3; --overlay: rgba(11, 18, 32, 0.45); /* Тени живут только в светлой теме */ --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.06); --shadow-md: 0 4px 16px rgba(11, 18, 32, 0.08); --shadow-lg: 0 12px 32px rgba(11, 18, 32, 0.12); --shadow-brand: 0 8px 24px rgba(18, 181, 164, 0.28); /* Бренд — одинаков в обеих темах */ --brand: #12b5a4; --brand-ink: #0f766e; --accent: #6d5cf6; --accent-ink: #6d5cf6; --gold: #f5a524; --gold-ink: #b45309; /* Статусы */ --success: #16a34a; --success-ink: #15803d; --warning: #f59e0b; --warning-ink: #b45309; --error: #ef4444; --error-ink: #dc2626; --info: #3b82f6; --info-ink: #2563eb; /* Плашки статусов: 12 % от насыщенного цвета — приём один на обе темы */ --success-bg: rgba(22, 163, 74, 0.12); --warning-bg: rgba(245, 158, 11, 0.12); --error-bg: rgba(239, 68, 68, 0.12); --info-bg: rgba(59, 130, 246, 0.12); --brand-bg: rgba(18, 181, 164, 0.12); /* Градиент бренда: направление всегда 135° */ --gradient-brand: linear-gradient(135deg, #12b5a4, #6d5cf6); /* Сетка и форма (docs/design.md) */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --gap: 16px; --header-height: 56px; --sidebar-width: 232px; } :root[data-theme="dark"] { --bg: #000000; --surface: #0d1014; --surface2: #14181e; --surface3: #1b2027; --text: #f4f7fa; --text2: #98a3b2; --text3: #6b7684; --border: #232830; --border2: #2e353f; --overlay: rgba(0, 0, 0, 0.65); /* В тёмной теме теней нет: тень на чёрном не видна, а попытка её усилить даёт грязный ореол. Глубину набирают surface2/surface3 и бордеры */ --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-brand: 0 8px 24px rgba(18, 181, 164, 0.2); --brand-ink: #2dd4bf; --gold-ink: #fbbf24; --success-ink: #4ade80; --warning-ink: #fbbf24; --error-ink: #ff6b6b; --info-ink: #93c5fd; }