/* ========================================================= MURRLINK — ТОКЕНЫ ДИЗАЙНА Единственное место, где объявлены CSS-переменные и порядок слоёв. Значения перенесены из static/css/app.css без изменений. ========================================================= */ /* Порядок слоёв. Объявлен здесь, потому что этот файл подключается первым: порядок из @layer-инструкции фиксируется при первой встрече имени слоя. Остальные файлы только ДОБАВЛЯЮТ правила в слои. */ @layer tokens, base, layout, components, features, pages; /* ========================================================= СЛОЙ tokens — переменные ========================================================= */ @layer tokens { :root { /* ===================================================== ТЁМНАЯ НЕОНОВАЯ ТЕМА Значения — из согласованного дизайн-решения (гибрид Flat Neon + Glass Neon). Прежние значения оставлены в комментариях: это тёмно-серая тема «как в Discord». ===================================================== */ /* --- поверхности: глубокий тёмно-фиолетовый, а не серый --- */ --bg-app: #07060d; /* был #313338, затем #0b0a12 */ --bg-sidebar: #13111c; /* был #2b2d31 */ --bg-sidebar-dark: #0e0d14; /* был #1e1f22 */ --bg-panel: #1a1725; /* был #232428 */ --bg-input: #221e30; /* был #383a40 */ --bg-menu: #1a1725; /* был #111214 */ --bg-hover: #241f35; /* был #35373c */ --bg-active: #2d2645; /* был #404249 */ --bg-danger: #4a1d2e; /* был #da373c — теперь мягче, фоном */ /* Нейтральная кнопка: фон и ховер. Заведены при переводе литералов (было #4e5058 и #6d6f78 в .avatar-upload-btn, .voice-btn.neutral, .user-card-btn и других) — в палитре не было подходящего по смыслу. */ --bg-neutral: #241f35; --bg-neutral-hover: #2d2645; /* Ховер круглой кнопки голосовой панели (.vcb-btn): на ступень светлее --bg-neutral, отдельный оттенок, поэтому отдельный токен. */ --bg-neutral-hover-strong: #322b4d; /* --- акценты --- */ --accent: #a855f7; /* был #5865f2 — неоновый фиолетовый */ --accent-hover: #c084fc; /* был #4752c4 */ /* Текст и иконки на акцентном фоне. Внимание: это НЕ белый. На светлом фиолетовом #a855f7 белый текст даёт контраст 3.96:1 (норма WCAG AA для обычного текста — 4.5:1), а на ховере #c084fc всего 2.64:1 — кнопки стали бы трудночитаемыми. Тёмный текст даёт 4.98:1 и 7.45:1, поэтому он и выбран: светящаяся кнопка с тёмной надписью. */ --on-accent: #0b0a12; /* Второй акцент — циан. Редкий: отдельные бейджи, закреплённый участник. Для основных кнопок не использовать. */ --accent-2: #22d3ee; /* Третий акцент — маджента. Только внутри --gradient-accent. */ --accent-3: #ec4899; /* Полупрозрачные подложки под акцент. */ --accent-soft: rgba(168, 85, 247, 0.15); /* Зарево под панелями: крупное мягкое пятно акцента на фоне приложения. В референсах панели лежат на тёмном фоне с таким заревом, и оно видно сквозь стекло — это и даёт ощущение прозрачности, а не «плоской заливки». Прозрачность низкая: задача не «подсветить», а «сделать фон живым». */ --accent-bleed: rgba(168, 85, 247, 0.06); --accent-2-soft: rgba(34, 211, 238, 0.15); --accent-gradient: linear-gradient(135deg, #a855f7 0%, #ec4899 100%); --accent-gradient-hover: linear-gradient(135deg, #c084fc 0%, #f472b6 100%); /* Ссылки и акцент, отличный от --accent (было #00a8fc). */ --link: #22d3ee; /* --- текст --- */ /* --- каналы акцентных цветов --- Нужны, чтобы задавать полупрозрачность, не вписывая цвет числом: rgba(var(--accent-rgb), 0.15). Иначе при смене палитры такие места остаются от прежней темы — так уже было в 7 местах (упоминания в чате, цитаты ответов, подсветка сообщения) и в 3 местах пульсации «говорит». */ --accent-rgb: 168, 85, 247; --success-rgb: 34, 197, 94; --warning-rgb: 240, 178, 50; /* Тёмные подложки: затемняют содержимое под собой. Значение не из палитры (это не цвет темы, а степень затемнения), поэтому отдельные токены — чтобы не расползались по файлам числами. */ --overlay-modal: rgba(0, 0, 0, 0.7); /* затемнение под окнами */ --overlay-strong: rgba(0, 0, 0, 0.85); /* сцена демонстрации на весь экран */ --overlay-soft: rgba(0, 0, 0, 0.55); /* подписи поверх видео */ --bg-neutral-soft: rgba(78, 80, 88, 0.15); /* цитата ответа */ /* Шахматка под прозрачными пикселями — выбор области аватара (static/css/profile.css: .tv-avatar-crop-stage). Два оттенка одной светлоты: прозрачность картинки видно, но клетка не спорит с фото. Именно токены, а не литералы на месте: клетка нужна в двух местах (фон полотна и фон обрезки при экспорте), и разъехаться они не должны. */ --checker-a: #241f35; /* тёмная клетка */ --checker-b: #2d2645; /* светлая клетка */ --checker-size: 10px; /* сторона клетки */ --text-primary: #f5f3ff; /* был #f2f3f5 — с фиолетовым отливом */ --text-normal: #d4d0e0; /* был #dbdee1 */ --text-muted: #a6a0b8; /* был #948fa8; на прежнем сером фоне хватало 6.33:1, но на новом почти чёрном текст выцвел. Здесь 7.82:1 — прежний тон вернулся. */ --text-dim: #a8a2ba; /* светлее: давало 5.02:1, стало 8.01:1. Предложенное #6b6680 давало 3.60:1 на --bg-app — ниже порога для обычного текста. Это значение даёт 4.55:1. */ --text-faint: #7a7490; /* был #4a4659: на тёмном фоне давал 2.17:1 — почти не читался. Сейчас 4.05:1 — служебные подписи читаются. */ --text-icon: #8b85a0; /* был #80848e */ /* Белый: текст и иконки на насыщенном тёмном фоне (опасные и успешные кнопки). На акценте используется --on-accent, см. выше. */ --white: #ffffff; /* --- статусы: не смешивать с неоном --- */ --success: #22c55e; /* был #23a55a */ --success-hover: #16a34a; --warning: #f0b232; /* без изменений */ --danger: #ef4444; /* был #ed4245 */ --danger-hover: #dc2626; /* Фон «опасного» элемента (бейдж, плитка, кнопка) — отдельная роль от --danger (цвет ТЕКСТА ошибки): у них разные требования к контрасту. Белый текст на #ef4444 даёт 3.76:1 — это зафиксированный провал темы «по умолчанию» (она не меняется); в тёмной и светлой теме фон темнее и порог 4.5 соблюдён. */ --danger-solid: #ef4444; --danger-solid-hover: #dc2626; --offline: #6b6680; /* был #80848e */ /* --- границы --- Сделаны ПОЛУПРОЗРАЧНЫМИ в предложенном решении, но здесь взяты непрозрачными: по DESIGN.md полупрозрачный слой поверх контента — отдельное решение, а границ в проекте 31 место, и на разных фонах rgba читался бы по-разному. Непрозрачный тон даёт тот же оттенок предсказуемо. Отдельный токен --border-glow — для акцентных границ. */ --border: #241f35; /* был #1e1f22 */ --border-soft: #1a1725; /* был #35363c */ --border-glow: rgba(168, 85, 247, 0.25); /* Синоним --border-glow: имя из дизайн-списка, значение то же, чтобы не заводить второй оттенок того же назначения. */ --border-strong: rgba(168, 85, 247, 0.25); /* Свечение: ТОЛЬКО на активных состояниях. Спокойный элемент не светится. Значения — размытые и приглушённые: плотное короткое свечение читалось как грубая обводка. Здесь большой радиус размытия при низкой прозрачности, поэтому элемент «подсвечен», а не «обведён». */ --glow-accent: 0 0 18px rgba(168, 85, 247, 0.32), 0 0 48px rgba(168, 85, 247, 0.16); --glow-accent-lg: 0 0 28px rgba(168, 85, 247, 0.36), 0 0 80px rgba(168, 85, 247, 0.18); --glow-success: 0 0 18px rgba(34, 197, 94, 0.30), 0 0 44px rgba(34, 197, 94, 0.15); --glow-danger: 0 0 18px rgba(239, 68, 68, 0.30), 0 0 44px rgba(239, 68, 68, 0.15); --glow-cyan: 0 0 18px rgba(34, 211, 238, 0.30), 0 0 44px rgba(34, 211, 238, 0.15); /* Неоновая кнопка: яркая чёткая грань плюс широкий мягкий ореол и внутреннее свечение. В референсе светящиеся панели устроены именно так: контур яркий и читаемый, а свечение вокруг большое и размытое. Тусклая грань при мягком ореоле даёт «размытое пятно», а не неон; яркая грань без ореола — просто обводку. Нужны оба. */ --neon-edge: rgba(168, 85, 247, 0.72); --neon-edge-hot: rgba(192, 132, 252, 0.95); /* Градиентная неоновая грань: циан слева, маджента справа, между ними фиолетовый — как у светящейся кнопки в референсе. У кольца аватара тот же переход, но по диагонали: круг читается лучше. */ /* Непрозрачное тело для элементов с градиентной гранью. Полупрозрачное тело здесь не работает: нижний слой фона — тот же градиент, и он просвечивает сквозь тело, заливая кнопку цветом целиком вместо полосы границы. Значение — это --glass-bg, положенный на фон приложения. */ --neon-body: #0a0813; --neon-grad: linear-gradient(100deg, var(--accent-2) 0%, var(--accent) 48%, var(--accent-3) 100%); --neon-ring: linear-gradient(150deg, var(--accent-2) 0%, var(--accent-3) 100%); /* Свечение кольца: два цвета, потому что и само кольцо двухцветное. */ --neon-ring-glow: 0 0 7px rgba(34, 211, 238, 0.45), 0 0 16px rgba(236, 72, 153, 0.35); --neon-glow: 0 0 4px rgba(168, 85, 247, 0.70), 0 0 16px rgba(168, 85, 247, 0.38), 0 0 44px rgba(168, 85, 247, 0.18); /* Кольцо фокуса — для доступности с клавиатуры. */ --focus-ring: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--accent); /* Стекло. Изначально решалось «только модалки и тултипы, не панели», но по референсам дизайнера стеклянными стали и панели каркаса (рейл серверов, каналы, участники, панель пользователя, шапка). Прозрачность ниже половины и размытие фона: сквозь панель должно быть ВИДНО свечение фона — иначе это не стекло, а цветная заливка. */ --glass-bg: rgba(10, 8, 16, 0.55); --glass-border: rgba(168, 85, 247, 0.35); /* Затемнение фона ПОД стеклом: фон остаётся виден, но приглушён, поэтому блок читается тёмным и при этом остаётся стеклом. Просто поднять непрозрачность — значит потерять стекло: при 0.72 фон через панель уже не читался и она выглядела чёрной заливкой. */ /* Светлое размытие: фон под стеклом не затемняется, а подсвечивается — блок выглядит засвеченным, как матовое стекло на свету. Раньше стояло затемнение (brightness 0.5); по замечанию дизайнера размытие должно быть светлым. */ --glass-blur: brightness(1.3) blur(7px); /* Верхний блик панели: свет падает сверху, верхняя часть стекла светлее. Без него панель выглядит плоской заливкой. */ --glass-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 200px); /* Кромка стекла: светлая тонкая линия по краю панели. На тёмных фонах проекта разницу видно только у непрозрачных панелей, поэтому значения подобраны плотнее, чем в референсах на светлом фоне. */ --rim: rgba(255, 255, 255, 0.12); --rim-strong: rgba(255, 255, 255, 0.20); /* Объёмная панель. Панели разведены зазором и получили собственный контур, поэтому читаются как отдельные стеклянные блоки, а не как одна плоская поверхность, разрезанная линиями. Тень даёт отрыв от фона (объём), внутренняя подсветка — блик на верхней грани (стекло). */ --panel-gap: 10px; --panel-shadow: 0 26px 60px rgba(0, 0, 0, 0.85); --panel-shadow-hover: 0 32px 72px rgba(0, 0, 0, 0.82); /* Фон медиа-области: сцена демонстрации экрана (было #000). Единственное место с чистым чёрным; в палитре не было подходящего — --bg-menu темнее меню и для сцены не подходит по смыслу. Судьба оттенка (оставить чёрным или приглушить) — решение дизайнера. */ --bg-media: #000000; /* --- голосовые плитки: сцена, локальная плитка, текст ПОВЕРХ неё --- Плитка participant'а — это «медиа-поверхность», а не панель: на ней лежат подписи и значки поверх аватарки. В «по умолчанию» и тёмной темах она тёмная (значения СОВПАДАЮТ с --bg-sidebar-dark / --bg-panel, поэтому вид темы «по умолчанию» не меняется ни на пиксель), а в светлой — отдельная тёмная «сцена»: светлая плитка на светлой панели сливалась с фоном, и ни имя, ни значки микрофона на ней не читались. --on-media / --danger-on-media — текст и значки именно НА этой сцене: в светлой теме они светлые, потому что сцена тёмная. */ --bg-voice-stage: #0e0d14; --bg-voice-local: #1a1725; --on-media: #d4d0e0; --danger-on-media: #ef4444; /* Зарево фона лендинга. Отдельный токен, а не --accent-soft: там акцентная ПОДЛОЖКА элемента (упоминания, тинты), а здесь — свет фона на весь экран. В «по умолчанию» значение совпадает с --accent-soft, поэтому лендинг выглядит как раньше; в тёмной теме зарево нейтральное. */ --bg-glow-landing: rgba(168, 85, 247, 0.15); --shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--border-soft); --shadow-modal: 0 16px 56px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--border); /* Подсветка верхнего края круглых кнопок голосовой панели: даёт «стеклянный» вид без backdrop-filter и без нагрузки на слабых ПК. */ --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.20); --inset-glow: inset 0 0 12px rgba(168, 85, 247, 0.25); /* Фон приложения: сетка сот со светящимися гранями. Файл прислан дизайнером (Frame 1.svg), взят как есть — векторный и самодостаточный, поэтому остаётся резким на любом мониторе и при высоком DPI. Растягивается через background-size: cover; повтор не нужен, полотно уже нарисовано на весь экран. Цвета в файле свои, из токенов не берутся: картинка-фон читать токены не умеет. */ --bg-pattern: url("../img/bg-honeycomb.e86b555e108f.webp"); /* Базовый цвет картинки фона (замерен по её краям). Поля вокруг картинки, когда она показана целиком, заливаются им — тогда границы не видно. */ --bg-pattern-base: #12091c; /* Бегунок прокрутки. Раньше он брался прямо из --bg-menu; на светлой теме --bg-menu = #ffffff, и бегунок исчезал на белой панели. */ --scrollbar-thumb: #1a1725; /* Свечение бегунка ползунка: плотнее общего --glow-accent, иначе круглый бегунок малого размера светится слишком рассеянно. */ --glow-thumb: 0 0 6px rgba(168, 85, 247, 0.5), 0 0 16px rgba(168, 85, 247, 0.25); /* Радиусы увеличены под более мягкую, «капсульную» форму. */ --radius-sm: 6px; /* был 4px */ --radius-md: 12px; /* был 6px */ --radius-lg: 16px; /* был 8px */ --radius-xl: 20px; /* был 12px */ --radius-pill: 999px; /* для кнопок-капсул */ --radius-round: 50%; --transition-fast: 0.1s; --transition-base: 0.15s; /* Брейкпоинты — согласованная шкала. CSS не умеет var() в условии @media, поэтому числа дублируются в запросах, а токены здесь — единственное место, где шкала объявлена и объяснена (DESIGN.md, раздел 5). Подход desktop-first: базовые правила описывают широкий экран, а media-запросы — уточнения для узкого; запрос пишется РЯДОМ с уточняемым правилом и в том же слое, что и оно. Где шкала применена (аудит P5, фундамент адаптива): --bp-sm (480px) — телефон: страница настроек, страница голосового канала и витрина больше не вылезают за экран; --bp-md (768px) — узкий планшет: пока только задел. Каркас приложения (три колонки) требует ≥ 594 px, его мобильная раскладка — отдельная задача, а не этот фундамент; --bp-lg / --bp-xl — не используются: широкий каркас тянется сам. */ /* Шрифт интерфейса. Раньше список был вписан прямо в body (app.css); токен заведён, чтобы компоненты ссылались на него, а не повторяли. */ --font-ui: system-ui, -apple-system, sans-serif; /* Моноширинный шрифт: код в сообщениях, шкала микрофона, настройки. */ --font-mono: Consolas, "Courier New", monospace; --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; /* ===================================================== ТОКЕНЫ, ЗАВЕДЁННЫЕ ПРИ ПЕРЕВОДЕ ЛИТЕРАЛОВ НА ТЕМЫ Значения СОВПАДАЮТ с прежними литералами из CSS-файлов, поэтому тема «по умолчанию» не меняется ни на пиксель. У каждого — своя роль: подпись на опасном фоне, подложка упоминания, стеклянная карточка входа и т. д. Раньше это были rgba()/hex прямо в правилах, и на светлой теме они тянули за собой тёмный вид. ===================================================== */ --on-danger: #ffffff; /* текст на --bg-danger / --danger */ --on-strong: #ffffff; /* текст/иконка на насыщенном цвете */ --on-avatar: #ffffff; /* инициал в круге аватара */ --icon-strong: #ffffff; /* иконка на яркой подложке (ховер «+») */ --ring-success-soft: 0 0 0 3px rgba(34, 197, 94, 0.3); --bg-warning-soft: rgba(240, 178, 50, 0.12); --bg-danger-soft: rgba(239, 68, 68, 0.14); --bg-accent-strong: rgba(168, 85, 247, 0.9); --mention-bg: rgba(168, 85, 247, 0.3); --mention-self-bg: rgba(168, 85, 247, 0.6); --mention-self-fg: #ffffff; /* Карточка входа/приглашения: стекло ПОВЕРХ видео-фона. Три токена — градиент подложки, градиент затемнения и тень: на светлой теме затемнение становится светлым, а тень — мягкой. */ --auth-overlay: radial-gradient(ellipse 85% 75% at 50% 50%, rgba(6, 4, 14, 0.42) 0%, rgba(6, 4, 14, 0.78) 100%); --auth-card-bg: linear-gradient(165deg, rgba(46, 33, 73, 0.72) 0%, rgba(24, 19, 38, 0.88) 60%); --auth-card-border: rgba(168, 85, 247, 0.28); --auth-card-shadow: var(--inset-highlight), 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 40px rgba(168, 85, 247, 0.14); --auth-input-bg: rgba(12, 10, 20, 0.72); --auth-btn-shadow: var(--inset-highlight), 0 8px 24px rgba(168, 85, 247, 0.35); /* Видео-фон страниц входа: на светлой теме тёмный неоновый ролик под светлой подложкой превращался в мутную серую пелену, поэтому там он не показывается вовсе — остаётся ровный светлый фон и свечение. */ --auth-video: block; --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-card-lg: 0 16px 48px rgba(0, 0, 0, 0.5); --shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.3); /* Подсветка элемента при наведении (было `filter: brightness(1.1)` литералом в четырёх файлах). На светлой теме осветление «съедает» элемент, поэтому там фильтр затемняет. */ --hover-filter: brightness(1.1); /* Выделение текста мышью: раньше не задавалось вовсе и браузер брал своё (на тёмном фоне получалось почти нечитаемо). */ --selection-bg: rgba(168, 85, 247, 0.35); --selection-fg: #f5f3ff; /* --- Кнопки: единая поверхность и её состояния --- Причина: вторичные кнопки (.btn-secondary, .btn-pill, .ghost) были залиты цветом, почти совпадающим с панелью, без видимой границы — «Проверить звук» в настройках читался как подпись на панели. Здесь заданы роли, а не вкус: заливка заметно отличается от панели (≥1.4 по отношению яркостей), граница видна (≥3:1), подпись читается (≥4.5:1), иконочные — прозрачное тело и видимый ховер, disabled — своя поверхность, отличимая от активной. Замер держит tools/check_themes.py::buttons_contrast. */ --btn-bg: #362f54; --btn-bg-hover: #423a63; --btn-bg-active: #302948; --btn-border: #7a6aa0; --btn-border-hover: #9a86c7; --btn-fg: var(--text-primary); --btn-icon: var(--text-primary); --btn-icon-hover-bg: #423a63; --btn-icon-hover-border: #9a86c7; --btn-disabled-bg: #2a2438; --btn-disabled-fg: #b9b3c9; --btn-disabled-border: #4a4160; --btn-primary-bg: var(--accent); --btn-primary-bg-hover: var(--accent-hover); --btn-primary-bg-active: var(--accent-hover); --btn-primary-fg: var(--on-accent); --btn-primary-border: var(--accent); --btn-danger-bg: var(--danger-solid); --btn-danger-bg-hover: #f87171; --btn-danger-bg-active: #ef4444; --btn-danger-fg: var(--on-accent); --btn-danger-border: var(--danger-solid); --focus-outline: var(--accent); /* --- Плитки предпросмотра темы (вкладка «Внешний вид») --- Цвета ПОСТОЯННЫЕ: миниатюра показывает свою тему независимо от того, какая включена сейчас. Поэтому они объявлены только здесь и НЕ переопределяются в наборах ниже — иначе все три плитки стали бы одного цвета. */ --theme-swatch-default-bg: #170b28; --theme-swatch-default-panel: #2a1b3f; --theme-swatch-default-accent: #a855f7; --theme-swatch-default-text: #f5f3ff; --theme-swatch-dark-bg: #0d0d12; --theme-swatch-dark-panel: #1b1b23; --theme-swatch-dark-accent: #a855f7; --theme-swatch-dark-text: #f4f4f8; --theme-swatch-light-bg: #f4f2f9; --theme-swatch-light-panel: #ffffff; --theme-swatch-light-accent: #7c3aed; --theme-swatch-light-text: #1b1726; } /* ===================================================== НАБОР «ТЁМНАЯ» (html[data-theme="dark"]) Нейтральная графитовая тёмная с ТЕМ ЖЕ неоновым фиолетовым акцентом. От «по умолчанию» отличается только нейтральными поверхностями и текстом: по умолчанию фон фиолетовый (#07060d / #13111c), здесь — серый графит (#0b0b11 / #131319). Ни размеры, ни радиусы, ни шрифты здесь не переопределяются. ===================================================== */ html[data-theme="dark"] { color-scheme: dark; /* --- поверхности: НЕЙТРАЛЬНЫЙ ГРАФИТ --- Ни одна поверхность здесь не имеет фиолетового оттенка: у всех насыщенность HSL ≤ 8 % (стража — `dark_surfaces_neutral` в tools/check_themes.py). Неон остаётся только в акцентных токенах (--accent*, --link, --neon-*, --glow-*, фокус). */ --bg-app: #0b0b0d; --bg-sidebar: #131316; --bg-sidebar-dark: #0e0e10; --bg-panel: #18181b; --bg-input: #202023; --bg-menu: #18181b; --bg-hover: #232326; --bg-active: #2c2c30; --bg-danger: #4a1d2e; --bg-neutral: #232326; --bg-neutral-hover: #2c2c30; --bg-neutral-hover-strong: #333338; /* Кнопки: тот же контракт, что в :root, но нейтральный графит. */ --btn-bg: #3a3a41; --btn-bg-hover: #45454e; --btn-bg-active: #2e2e34; --btn-border: #6f6f7b; --btn-border-hover: #9a9aa8; --btn-fg: var(--text-primary); --btn-icon: var(--text-primary); --btn-icon-hover-bg: #45454e; --btn-icon-hover-border: #9a9aa8; --btn-disabled-bg: #2a2a2f; --btn-disabled-fg: #b0b0bf; --btn-disabled-border: #4a4a52; --btn-primary-bg: var(--accent); --btn-primary-bg-hover: var(--accent-hover); --btn-primary-bg-active: var(--accent-hover); --btn-primary-fg: var(--on-accent); --btn-primary-border: var(--accent); --btn-danger-bg: var(--danger-solid); --btn-danger-bg-hover: var(--danger-solid-hover); --btn-danger-bg-active: #991b1b; --btn-danger-fg: var(--on-strong); --btn-danger-border: var(--danger-solid); --focus-outline: var(--accent); --accent: #ab5ef8; --accent-hover: #c084fc; --on-accent: #0b0a12; --accent-2: #22d3ee; --accent-3: #ec4899; --accent-soft: rgba(168, 85, 247, 0.15); /* Зарево фона — НЕЙТРАЛЬНОЕ: это подсветка фона, а не акцентный элемент. Фиолетовое зарево и было тем, из-за чего тёмная тема читалась как «по умолчанию». */ --accent-bleed: rgba(200, 200, 215, 0.05); --accent-2-soft: rgba(34, 211, 238, 0.15); --accent-gradient: linear-gradient(135deg, #a855f7 0%, #ec4899 100%); --accent-gradient-hover: linear-gradient(135deg, #c084fc 0%, #f472b6 100%); --link: #22d3ee; --accent-rgb: 168, 85, 247; --success-rgb: 34, 197, 94; --warning-rgb: 240, 178, 50; --overlay-modal: rgba(0, 0, 0, 0.7); --overlay-strong: rgba(0, 0, 0, 0.85); --overlay-soft: rgba(0, 0, 0, 0.55); --bg-neutral-soft: rgba(85, 85, 97, 0.15); --checker-a: #232326; --checker-b: #2c2c30; --bg-voice-stage: #101013; --bg-voice-local: #1b1b1f; --on-media: #d3d3dd; --danger-on-media: #ef4444; --bg-glow-landing: rgba(200, 200, 215, 0.06); --text-primary: #f4f4f8; --text-normal: #d3d3dd; --text-muted: #a5a5b4; --text-dim: #a7a7b4; --text-faint: #8a8a9a; /* 4.76:1 на --bg-input: порог 4.5 */ --text-icon: #8b8b9c; --white: #ffffff; --success: #22c55e; --success-hover: #16a34a; --warning: #f0b232; --danger: #ef4444; --danger-hover: #dc2626; --danger-solid: #dc2626; --danger-solid-hover: #b91c1c; --offline: #70707b; --border: #232326; --border-soft: #18181b; --border-glow: rgba(168, 85, 247, 0.25); --border-strong: rgba(168, 85, 247, 0.25); --glow-accent: 0 0 18px rgba(168, 85, 247, 0.32), 0 0 48px rgba(168, 85, 247, 0.16); --glow-accent-lg: 0 0 28px rgba(168, 85, 247, 0.36), 0 0 80px rgba(168, 85, 247, 0.18); --glow-success: 0 0 18px rgba(34, 197, 94, 0.3), 0 0 44px rgba(34, 197, 94, 0.15); --glow-danger: 0 0 18px rgba(239, 68, 68, 0.3), 0 0 44px rgba(239, 68, 68, 0.15); --glow-cyan: 0 0 18px rgba(34, 211, 238, 0.3), 0 0 44px rgba(34, 211, 238, 0.15); --neon-edge: rgba(168, 85, 247, 0.72); --neon-edge-hot: rgba(192, 132, 252, 0.95); --neon-body: #0c0c12; --neon-grad: linear-gradient(100deg, #22d3ee 0%, #a855f7 48%, #ec4899 100%); --neon-ring: linear-gradient(150deg, #22d3ee 0%, #ec4899 100%); --neon-ring-glow: 0 0 7px rgba(34, 211, 238, 0.45), 0 0 16px rgba(236, 72, 153, 0.35); --neon-glow: 0 0 4px rgba(168, 85, 247, 0.7), 0 0 16px rgba(168, 85, 247, 0.38), 0 0 44px rgba(168, 85, 247, 0.18); --focus-ring: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--accent); /* Стекло панелей: чуть плотнее и светлее прежнего, потому что фон под ним теперь ровный графит без узора — иначе панели не отличались бы от фона. */ --glass-bg: rgba(24, 24, 28, 0.62); --glass-border: rgba(220, 220, 230, 0.14); --glass-blur: brightness(1.3) blur(7px); --glass-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 200px); --rim: rgba(255, 255, 255, 0.12); --rim-strong: rgba(255, 255, 255, 0.2); --panel-shadow: 0 26px 60px rgba(0, 0, 0, 0.85); --panel-shadow-hover: 0 32px 72px rgba(0, 0, 0, 0.82); --bg-media: #000000; --shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--border-soft); --shadow-modal: 0 16px 56px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--border); --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.2); --inset-glow: inset 0 0 12px rgba(168, 85, 247, 0.25); /* Фон-соты — растровая картинка дизайнера с ФИОЛЕТОВЫМ неоном: токенами её не перекрасить. В тёмной теме она отключена, фон — ровный графит с нейтральным заревом (--accent-bleed); фиолетовый узор остался только в теме «по умолчанию». */ --bg-pattern: none; --bg-pattern-base: #0b0b0d; --scrollbar-thumb: #1f1f23; --glow-thumb: 0 0 6px rgba(168, 85, 247, 0.5), 0 0 16px rgba(168, 85, 247, 0.25); /* --- перевод литералов: значения те же по смыслу, что у умолчания --- */ --on-danger: #ffffff; --on-strong: #ffffff; --on-avatar: #ffffff; --icon-strong: #ffffff; --ring-success-soft: 0 0 0 3px rgba(34, 197, 94, 0.3); --bg-warning-soft: rgba(240, 178, 50, 0.12); --bg-danger-soft: rgba(239, 68, 68, 0.14); --bg-accent-strong: rgba(168, 85, 247, 0.9); --mention-bg: rgba(168, 85, 247, 0.3); --mention-self-bg: rgba(168, 85, 247, 0.6); --mention-self-fg: #ffffff; /* Вход и приглашение: карточка — тоже ПОВЕРХНОСТЬ, поэтому здесь графит, а не фиолетовое стекло «по умолчанию». Неон остался на кнопке (её тело — --accent-gradient), а не на подложке. */ --auth-overlay: radial-gradient(ellipse 85% 75% at 50% 50%, rgba(6, 6, 6, 0.42) 0%, rgba(6, 6, 6, 0.78) 100%); --auth-card-bg: linear-gradient(165deg, rgba(30, 30, 34, 0.72) 0%, rgba(18, 18, 21, 0.88) 60%); --auth-card-border: rgba(220, 220, 230, 0.2); --auth-card-shadow: var(--inset-highlight), 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.35); --auth-input-bg: rgba(12, 12, 14, 0.72); --auth-btn-shadow: var(--inset-highlight), 0 8px 24px rgba(168, 85, 247, 0.35); --auth-video: block; --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-card-lg: 0 16px 48px rgba(0, 0, 0, 0.5); --shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.3); --hover-filter: brightness(1.1); --selection-bg: rgba(168, 85, 247, 0.35); --selection-fg: #f4f4f8; } /* ===================================================== НАБОР «СВЕТЛАЯ» (html[data-theme="light"]) Светлые поверхности с неоновым фиолетовым акцентом. Неон на белом теряется, поэтому роли разделены: * ТЕКСТ и иконки — приглушённые оттенки (--accent #7c3aed, --accent-2/--link #0e7490, --warning #a16207, --success #15803d, --danger #b91c1c): у каждого ≥ 4.5:1 на светлом фоне; * ГРАДИЕНТЫ и свечения — яркие (#a855f7 → #ec4899, #06b6d4): они не несут текста, им контраст не нужен, зато нужен неон. Фон-соты в светлой теме отключён: картинка тёмная, и осветлить её токенами нельзя — вместо неё ровная светлая подложка с зарево. ===================================================== */ html[data-theme="light"] { color-scheme: light; /* --- поверхности --- ★ Фон притемнён до #eceaf3: на прежнем почти белом (#f6f4fb) панели и плитки сливались, «объёма» не было, а контраст терялся. Панели остаются БЕЛЫМИ — так блоки читаются отдельными поверхностями. Границы (--border) тёмные: у поля и карточки контраст к своему фону ≥ 3:1 (стража `light_borders_contrast`). */ --bg-app: #eceaf3; --bg-sidebar: #ffffff; --bg-sidebar-dark: #f1edf9; --bg-panel: #ffffff; --bg-input: #f4f1fa; --bg-menu: #ffffff; --bg-hover: #e6dff3; --bg-active: #dcd1ee; --bg-danger: #fde7ec; --bg-neutral: #e6dff3; --bg-neutral-hover: #dcd1ee; --bg-neutral-hover-strong: #d2c5e8; --accent: #7c3aed; --accent-hover: #6d28d9; --on-accent: #ffffff; --accent-2: #0e7490; --accent-3: #db2777; --accent-soft: rgba(124, 58, 237, 0.12); --accent-bleed: rgba(124, 58, 237, 0.05); --bg-glow-landing: rgba(124, 58, 237, 0.12); --accent-2-soft: rgba(14, 116, 144, 0.12); --accent-gradient: linear-gradient(135deg, #7c3aed 0%, #db2777 100%); --accent-gradient-hover: linear-gradient(135deg, #6d28d9 0%, #be185d 100%); --link: #0e7490; --accent-rgb: 124, 58, 237; --success-rgb: 21, 128, 61; --warning-rgb: 161, 98, 7; --overlay-modal: rgba(30, 22, 48, 0.45); --overlay-strong: rgba(30, 22, 48, 0.78); --overlay-soft: rgba(30, 22, 48, 0.55); --bg-neutral-soft: rgba(60, 50, 80, 0.06); --checker-a: #e7e0f4; --checker-b: #ffffff; /* ★ Плитка участника в светлой теме — ТЁМНАЯ СЦЕНА, как в просмотре медиа. На светлой плитке (прежние #efeaf8 на белой панели) имя, значки микрофона и «заглушён» не читались: белый текст на светлой плашке давал 4.39:1, тёмный значок — 3.2:1, а красный «заглушён» — 1.48:1. Сцена даёт объём и читаемость, неон остаётся в акцентах. */ --bg-voice-stage: #241f30; --bg-voice-local: #2f2840; --on-media: #ffffff; --danger-on-media: #f87171; --text-primary: #1b1726; --text-normal: #2e2842; --text-muted: #55506b; --text-dim: #575170; --text-faint: #6b6580; --text-icon: #5f5a76; --white: #ffffff; --success: #15803d; --success-hover: #166534; --warning: #a16207; --danger: #b91c1c; --danger-hover: #991b1b; --danger-solid: #b91c1c; --danger-solid-hover: #991b1b; --offline: #6b6680; /* Кнопки: светлая тема — самый рискованный случай («белое на белом»). Поверхность вторичной кнопки заметно темнее белой панели, граница проходит порог 3:1 и к панели, и к фону приложения. */ --btn-bg: #cfc2e3; --btn-bg-hover: #b9a8d6; --btn-bg-active: #ad9acd; --btn-border: #857f94; --btn-border-hover: #6f6782; --btn-fg: var(--text-primary); --btn-icon: var(--text-primary); --btn-icon-hover-bg: #b9a8d6; --btn-icon-hover-border: #6f6782; --btn-disabled-bg: #e6dff3; --btn-disabled-fg: #55506b; --btn-disabled-border: #b3a9c4; --btn-primary-bg: var(--accent); --btn-primary-bg-hover: var(--accent-hover); --btn-primary-bg-active: var(--accent-hover); --btn-primary-fg: var(--on-accent); --btn-primary-border: var(--accent); --btn-danger-bg: var(--danger-solid); --btn-danger-bg-hover: var(--danger-solid-hover); --btn-danger-bg-active: #7f1d1d; --btn-danger-fg: var(--on-strong); --btn-danger-border: var(--danger-solid); --focus-outline: var(--accent); --border: #857f94; --border-soft: #c9c0db; --border-glow: rgba(124, 58, 237, 0.45); --border-strong: rgba(124, 58, 237, 0.45); --glow-accent: 0 0 12px rgba(124, 58, 237, 0.22), 0 0 34px rgba(124, 58, 237, 0.12); --glow-accent-lg: 0 0 18px rgba(124, 58, 237, 0.26), 0 0 56px rgba(124, 58, 237, 0.14); --glow-success: 0 0 12px rgba(21, 128, 61, 0.22), 0 0 30px rgba(21, 128, 61, 0.12); --glow-danger: 0 0 12px rgba(185, 28, 28, 0.22), 0 0 30px rgba(185, 28, 28, 0.12); --glow-cyan: 0 0 12px rgba(14, 116, 144, 0.22), 0 0 30px rgba(14, 116, 144, 0.12); --neon-edge: rgba(124, 58, 237, 0.55); --neon-edge-hot: rgba(109, 40, 217, 0.8); --neon-body: #ffffff; --neon-grad: linear-gradient(100deg, #06b6d4 0%, #a855f7 48%, #ec4899 100%); --neon-ring: linear-gradient(150deg, #06b6d4 0%, #ec4899 100%); --neon-ring-glow: 0 0 6px rgba(6, 182, 212, 0.35), 0 0 14px rgba(236, 72, 153, 0.25); --neon-glow: 0 0 3px rgba(124, 58, 237, 0.45), 0 0 12px rgba(124, 58, 237, 0.25), 0 0 32px rgba(124, 58, 237, 0.12); --focus-ring: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--accent); --glass-bg: rgba(255, 255, 255, 0.78); --glass-border: rgba(124, 58, 237, 0.22); --glass-blur: saturate(1.4) blur(10px); --glass-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 200px); --rim: rgba(30, 22, 48, 0.1); --rim-strong: rgba(30, 22, 48, 0.18); --panel-shadow: 0 22px 48px rgba(52, 38, 82, 0.14); --panel-shadow-hover: 0 28px 58px rgba(52, 38, 82, 0.18); /* Сцена демонстрации и просмотр картинки остаются тёмными в ЛЮБОЙ теме: на светлом фоне видео и фото выглядят выцветшими, а плашки имён поверх кадра — нечитаемыми. */ --bg-media: #0b0a12; --shadow-menu: 0 8px 24px rgba(52, 38, 82, 0.16), 0 0 0 1px var(--border-soft); --shadow-modal: 0 16px 48px rgba(52, 38, 82, 0.2), 0 0 0 1px var(--border); --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.75); --inset-glow: inset 0 0 10px rgba(124, 58, 237, 0.1); /* Фон-соты — растровая картинка с тёмным неоном; в светлой теме она выглядела бы чёрным полотном, поэтому здесь ровный светлый фон. */ --bg-pattern: none; --bg-pattern-base: #eceaf3; --scrollbar-thumb: #b9aecf; --glow-thumb: 0 0 5px rgba(124, 58, 237, 0.35), 0 0 12px rgba(124, 58, 237, 0.18); /* --- перевод литералов: светлые варианты тех же ролей --- */ --on-danger: #9f1239; --on-strong: #ffffff; --on-avatar: #ffffff; --icon-strong: #ffffff; --ring-success-soft: 0 0 0 3px rgba(21, 128, 61, 0.28); --bg-warning-soft: rgba(161, 98, 7, 0.12); --bg-danger-soft: rgba(185, 28, 28, 0.1); --bg-accent-strong: rgba(124, 58, 237, 0.92); --mention-bg: rgba(124, 58, 237, 0.16); --mention-self-bg: rgba(124, 58, 237, 0.92); --mention-self-fg: #ffffff; --auth-overlay: radial-gradient(ellipse 85% 75% at 50% 50%, rgba(255, 255, 255, 0.35) 0%, rgba(238, 232, 250, 0.75) 100%); --auth-card-bg: linear-gradient(165deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 244, 253, 0.98) 60%); --auth-card-border: rgba(124, 58, 237, 0.28); --auth-card-shadow: var(--inset-highlight), 0 20px 48px rgba(52, 38, 82, 0.18), 0 0 32px rgba(124, 58, 237, 0.1); --auth-input-bg: rgba(255, 255, 255, 0.92); --auth-btn-shadow: var(--inset-highlight), 0 8px 20px rgba(124, 58, 237, 0.28); --auth-video: none; --shadow-card: 0 8px 24px rgba(52, 38, 82, 0.14); --shadow-card-lg: 0 14px 40px rgba(52, 38, 82, 0.16); --shadow-toast: 0 4px 12px rgba(52, 38, 82, 0.14); --hover-filter: brightness(0.95); --selection-bg: rgba(124, 58, 237, 0.22); --selection-fg: #1b1726; } /* Выделение текста — одно правило на все темы: цвет берётся из набора. */ ::selection { background: var(--selection-bg); color: var(--selection-fg); } }