/* Токены темы 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(226, 88, 47, 0.28); /* Бренд — закат над Андаманским морем (Р-100). Заливка одинакова в обеих темах, чернила у каждой свои: коралл на белом и коралл на чёрном — это разные светлоты, иначе текст либо тускнеет, либо слепит */ --brand: #e2582f; --brand-ink: #b8431f; --accent: #8a4bb0; --accent-ink: #7a3f9c; /* Сумерки после заката. Живут только в градиенте: отдельной заливкой этот синий выглядит холодным и спорит с кораллом */ --dusk: #4a4e8f; /* Чернила ПОВЕРХ градиента. Не переопределяются в тёмной теме намеренно: сам градиент одинаков в обеих, значит и текст на белой кнопке поверх него обязан быть одинаковым. Светлый коралл тёмной темы дал бы на белой плашке контраст 2,4:1 — нечитаемо */ --gradient-ink: #b8431f; --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(226, 88, 47, 0.12); /* Градиент бренда: направление всегда 135°. Четыре точки, а не две — закат это переход, и на двух он выглядит просто оранжевым пятном */ --gradient-brand: linear-gradient(135deg, #f7a24b 0%, #ef6b45 42%, #d2417a 72%, #4a4e8f 100%); --gradient-border: linear-gradient(135deg, #f7a24b 0%, #ef6b45 42%, #d2417a 72%, #4a4e8f 100%); --gradient-stay: linear-gradient(135deg, #f7a24b, #e2582f); --gradient-experience: linear-gradient(135deg, #ffd27a, #f5a524); --gradient-service: linear-gradient(135deg, #b06bd1, #6d4e9c); --gradient-gold: linear-gradient(135deg, #ffd27a, #f5a524); /* Мягкая подложка: заметна, но не спорит с текстом поверх */ --gradient-soft: linear-gradient(135deg, rgba(247, 162, 75, .16), rgba(210, 65, 122, .16)); --gradient-hero: linear-gradient(150deg, #f7a24b, #d2417a 55%, #4a4e8f); /* Сетка и форма (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(226, 88, 47, 0.22); --brand-ink: #ff9670; --accent-ink: #c9a3e8; --gold-ink: #fbbf24; --success-ink: #4ade80; --warning-ink: #fbbf24; --error-ink: #ff6b6b; --info-ink: #93c5fd; }