# VidConf — Дизайн-система

Дизайн зафиксирован как обязательный референс для реализации; изменения —
только через обновление этого документа и макетов `design/mockups/`. Оболочка
поддерживает светлую и тёмную тему с переключателем и автодетектом системной
темы (см. §0.1 и §1.2b ниже).

Референсы: `referens.png` (стиль/layout светлой оболочки), `collor_ico.png` (цвета/иконография тёмной комнаты конференции).
Все hex-значения взяты пипеткой непосредственно из референсов (см. таблицы ниже)
и проверены на контраст по формуле WCAG 2.1 (относительная светимость sRGB);
тёмная оболочка (§1.2b) — производная от уже утверждённой палитры комнаты
(hex переиспользованы 1:1, без повторной пипетки, см. таблицу происхождения).

## 0. Принцип тем

Оболочка (auth, лобби, календарь, «Мои конференции», join, админка, профиль,
email) имеет **две** темы — светлую (дефолт) и тёмную, с ручным переключателем
и автодетектом системной темы (см. §0.1). Комната конференции — **всегда**
тёмная, отдельная тема без переключателя.

| | Экраны | Референс | Характер |
|---|---|---|---|
| **Оболочка, светлая** | auth, лобби (хаб действий), календарь (менеджер конференций), «Мои конференции», подключение по ссылке/номеру, админка, профиль, email | `referens.png` | светлый фон, глубокий индиго в типографике, крупные скругления (20–32px), pill-кнопки с обводкой, пастельно-мятный CTA, glass-панели |
| **Оболочка, тёмная** | те же экраны оболочки | `design/mockups/dark/` (утв. 2026-07-18), палитра — производная от `collor_ico.png` (см. §1.2b) | графитовый фон, пастельная мята вместо индиго (бренд/заголовки/ссылки/CTA), розовый danger, янтарный warning/focus, те же формы/скругления/типографика, что у светлой оболочки — меняется только цвет |
| **Комната (всегда тёмная)** | room (конференция) | `collor_ico.png` | графитовый фон, тёмно-серые плитки участников, зелёный/красный микрофон, жёлто-оранжевая рамка активного спикера, контурные иконки тулбара |

Темы не смешиваются на одном экране: комната конференции — единственный экран
с собственной несменяемой тёмной темой; всё остальное — оболочка, которая
целиком переключается между светлым и тёмным вариантом (пользователь никогда
не видит светлую панель внутри тёмной оболочки или наоборот).

### 0.1 Механизм переключения (оболочка)

Контракт для frontend-dev (реализовано в `design/tokens.css`):

- **Атрибут на корне** — `data-theme="dark"` / `data-theme="light"` на
  `<html>` (или другом предке `:root`-скоупа приложения) — явный выбор
  пользователя, сохраняется (localStorage/настройка профиля), имеет приоритет
  над системной темой.
- **Дефолт по ОС** — если `data-theme` не проставлен вообще, действует
  `@media (prefers-color-scheme: dark)`: тёмная палитра активируется
  автоматически при тёмной системной теме, светлая — при светлой/отсутствии
  поддержки. Как только пользователь явно переключил тему, автодетект
  отключается для этого выбора (селектор `:root:not([data-theme])` в
  `tokens.css` перестаёт совпадать).
- Оба триггера переопределяют **один и тот же набор** переменных, что и
  светлый `:root` (`--color-bg`, `--color-ink-900`, `--color-accent` и т.д.) —
  весь остальной CSS оболочки (компоненты, `frontend/`) ссылается на них через
  `var()` и не нуждается в собственной `dark:`-логике.
- `[data-theme="room"]` (комната) — независимый третий скоуп с отдельным
  неймспейсом `--color-room-*`; не активируется ни атрибутом `dark`, ни
  `prefers-color-scheme`, и не участвует в переключателе оболочки.

Предустановленных переговорных комнат нет — конференции создаются динамически
(мгновенно из лобби или планово из календаря), закрепляются с повторением и
видны в «Мои конференции»; вход — по ссылке или номеру, гости входят через
«представиться». Макеты:
`design/mockups/lobby.html`, `calendar.html`, `my-conferences.html`, `join.html`.

---

## 1. Цветовые токены

Все значения продублированы 1:1 в `tokens.css`. Контраст текста проверен и
везде ≥ 4.5:1 (см. колонку «контраст»), кроме специально помеченных
декоративных/крупных элементов (правило WCAG для large text ≥ 3:1, отмечено ⚠︎).

### 1.1 Светлая тема (оболочка)

| Токен | Hex | Назначение | Контраст |
|---|---|---|---|
| `--color-bg` | `#F1F1F1` | фон страницы (пипетка referens.png, фон вокруг карточек) | — |
| `--color-bg-alt` | `#F7F7F8` | альтернативный фон секций / подложка полей | — |
| `--color-surface` | `#FFFFFF` | карточки, модалки, поля ввода | — |
| `--color-surface-glass` | `rgba(255,255,255,.55)` | glass-панели (стат-карточки в стиле referens.png), с `backdrop-filter: blur(16px)` | — |
| `--color-border` | `#E1E3E9` | базовая обводка карточек/инпутов | — |
| `--color-border-strong` | `#C7CCDC` | обводка при hover | — |
| `--color-border-pill` | `#4A5A9E` | обводка pill-кнопок (пипетка контура «НАПРАВЛЕНИЕ») | — |
| `--color-ink-900` | `#2E3454` | основной текст (параграфы), **текст на CTA** (`--color-accent-text`, см. ниже) | 11.3:1 на `--color-bg-alt` |
| `--color-ink-700` | `#3B4D95` | **брендовый индиго** — дисплейные заголовки, ссылки (пипетка «X'FLOW GYM») | 6.9:1 на `--color-bg` |
| `--color-ink-500` | `#535F94` | вторичный текст (подписи, мета) | 5.7:1 на `--color-bg-alt` |
| `--color-ink-400` | `#6976AC` | third-tier — только крупный/жирный текст (эйбрау-подписи в [скобках], ≥ 20px) | 4.1:1 ⚠︎ large-text-only |
| `--color-ink-300` | `#A6AECB` | плейсхолдеры, disabled-текст | — |
| `--color-accent` | `#D4F2E3` | **пастельная мята CTA** (заливка primary-кнопки; токен переименован из `--color-accent-green`, т.к. акцент больше не обязан быть зелёным) | — |
| `--color-accent-hover` | `#C7EBD9` | hover CTA (переименовано из `--color-accent-green-hover`; осветлена на 50%, было `#8FD6B2`) | — |
| `--color-accent-active` | `#BAE4CE` | active/pressed CTA (переименовано из `--color-accent-green-active`; осветлена на 50%, было `#74C89D`) | — |
| `--color-accent-text` | `#2E3454` | текст на мятной заливке — тёмный индиго, равен `--color-ink-900` (переименовано из `--color-accent-green-text`) | 10.15:1 (default) / 9.40:1 (hover) / 8.69:1 (active) |
| `--color-success` | `#0A7A4C` | текст статуса «свободна» | 5.38:1 на белом |
| `--color-success-bg` | `#E4F7ED` | подложка бейджа «свободна» | — |
| `--color-success-dot` | `#46916B` | индикатор-точка (пастелизирована, была неоновой `#1BC46B`; не единственный носитель статуса) | 3.80:1 на белом (нетекст) |
| `--color-danger` | `#C7364F` | текст статуса «отменена», кнопки удаления | 5.16:1 на белом |
| `--color-danger-bg` | `#FCE7EB` | подложка бейджа «отменена» | — |
| `--color-danger-dot` | `#C65366` | индикатор-точка (пастелизирована, была `#E0526B`) | 4.35:1 на белом (нетекст) |
| `--color-warning` | `#7F560D` | текст статуса «запланирована» | 6.48:1 на белом |
| `--color-warning-bg` | `#FBF0DC` | подложка бейджа «запланирована» | — |
| `--color-warning-dot` | `#B58A26` | индикатор-точка (углублена с `#D6A83D` ради контраста 3:1 на белом; рамка спикера в тёмной теме — отдельный токен, тот же исходный тон, оставлена без изменений) | 3.17:1 на белом (нетекст) |
| `--color-focus-ring` | `#3B4D95` | focus-visible обводка | — |

### 1.2a Тёмная тема — комната конференции

| Токен | Hex | Назначение | Контраст |
|---|---|---|---|
| `--color-room-bg` | `#1E1E1E` | фон канвы конференции (пипетка collor_ico.png) | — |
| `--color-room-surface` | `#2A2A2A` | топбар, нижний тулбар, всплывающие панели | — |
| `--color-room-surface-raised` | `#333333` | дропдауны, поповеры, панель чата | — |
| `--color-room-tile` | `#363636` | плитка участника (пипетка тёмно-серых плиток) | — |
| `--color-room-tile-border` | `#3F3F3F` | обводка плитки в покое | — |
| `--color-room-tile-hover` | `#3D3D3D` | плитка при hover/фокусе | — |
| `--color-room-text-primary` | `#E8E8E8` | имя участника, основной текст | 9.9:1 на tile |
| `--color-room-text-secondary` | `#B0B0B0` | вторичный текст (время, статус) | 5.6:1 на tile |
| `--color-room-text-tertiary` | `#7A7A7A` | таймстемпы чата (декоративно, не единственный носитель смысла) | — |
| `--color-room-mic-on` | `#7FDDA8` | **микрофон активен**, пастельная мята (была неоновая `#46D97A`, тот же зелёный вектор, что и `--color-accent` в оболочке) | 8.76:1 на surface / 7.37:1 на tile (нетекст) |
| `--color-room-mic-off` | `#EB93A1` | **микрофон выключен / mute**, пастельный розово-красный (была `#F2778C`) | 6.30:1 на surface / 5.31:1 на tile (нетекст) |
| `--color-room-speaker-ring` | `#D6A83D` | **рамка активного спикера**, жёлто-оранжевая (пипетка collor_ico.png) | 6.51:1 ⚠︎ декоративная рамка |
| `--color-room-danger` | `#EB93A1` | иконка «выйти», деструктивные контуры (пастелизирована вместе с mic-off) | 6.30:1 (нетекст) |
| `--color-room-danger-bg` | `#B85468` | заливка кнопки «Выйти» (hover/подтверждение), пастельная роза (была `#B3384E`) | 4.66:1 (белый текст) |
| `--color-room-danger-bg-hover` | `#B9495F` | hover заливки danger (была `#C24363`) | 5.02:1 (белый текст) |
| `--color-room-focus-ring` | `#D6A83D` | focus-visible обводка в тёмной теме | — |

Статусы никогда не передаются только цветом: у микрофона есть форма иконки
(перечёркнутый микрофон = mute), у бейджей лобби — иконка + текст, у активного
спикера — рамка + подпись, у конфликта брони — иконка `AlertTriangle` + текст.

### 1.2b Тёмная тема — оболочка

Макеты: `design/mockups/dark/*.html` (6
экранов, 1:1 разметка со светлыми прообразами `design/mockups/*.html`,
меняется только цвет — см. `design/mockups/dark/README.md`, полное
обоснование подбора палитры). Механизм переключения — §0.1.

**Принцип.** Тёмная оболочка не изобретает новых цветов, а переиспользует уже
утверждённые токены комнаты (§1.2a) в новых ролях — так тёмное лобби и тёмная
комната конференции читаются как одна система при переходе пользователя между
ними. Там, где у комнаты нет готового аналога (бренд-панель, формы, glass-
карточки — компоненты, которых в комнате не существует), значения получены
подмешиванием уже утверждённых цветов комнаты к графитовому фону/друг к другу,
а не придуманы независимо.

**Токены, переиспользованные из комнаты 1:1** (тот же hex, что и `--color-room-*`, §1.2a):

| Токен оболочки (`[data-theme='dark']`) | = токен комнаты | Hex | Новая роль в оболочке |
|---|---|---|---|
| `--color-bg` | `--color-room-bg` | `#1E1E1E` | фон страницы |
| `--color-surface` | `--color-room-surface` | `#2A2A2A` | карточки, топбар, поля |
| `--color-border` | `--color-room-tile-border` | `#3F3F3F` | базовая обводка |
| `--color-ink-900` | `--color-room-text-primary` | `#E8E8E8` | основной текст |
| `--color-ink-500` | `--color-room-text-secondary` | `#B0B0B0` | вторичный текст |
| `--color-ink-300` | `--color-room-text-tertiary` | `#7A7A7A` | плейсхолдеры/disabled |
| `--color-ink-700`, `--color-accent`, `--color-border-pill`, `--color-success`, `--color-success-dot` | `--color-room-mic-on` | `#7FDDA8` | мята: бренд/заголовки/ссылки/CTA/«успех» — единая пастельно-зелёная роль (см. ниже) |
| `--color-danger`, `--color-danger-dot` | `--color-room-mic-off` | `#EB93A1` | розово-красный: текст/иконки/обводка статуса «отменена»/ошибки |
| `--color-warning`, `--color-warning-dot` | `--color-room-speaker-ring` | `#D6A83D` | янтарь: статус «запланирована» |
| `--color-focus-ring` | `--color-room-focus-ring` | `#D6A83D` | кольцо `:focus-visible` |
| `--color-danger-solid`, `--color-danger-solid-hover` | `--color-room-danger-bg(-hover)` | `#B85468` / `#B9495F` | заливка **сплошных** danger-кнопок (`.btn-danger`) — отдельная пара, см. ниже почему |

**Одна мята — три роли.** В светлой оболочке бренд-индиго (`--color-ink-700`)
и мятный CTA (`--color-accent`) — два разных токена/hex. В тёмной оболочке они
**сведены к одному и тому же** `#7FDDA8` (= `--color-room-mic-on`), как и в
самой комнате, где одна пастельная мята уже покрывает всё «позитивное»
(микрофон вкл, демонстрация экрана, счётчик участников, отправка в чате).
Различие ролей (бренд-текст vs интерактивная заливка) остаётся читаемым за
счёт контекста, а не второго оттенка.

**Почему заливка danger-кнопок — отдельный токен.** В светлой теме один hex
(`--color-danger`, `#C7364F`) одинаково хорошо работает и как текст на белом,
и как заливка кнопки с белым текстом. В тёмной теме роли расходятся:
`--color-danger` (`#EB93A1`, светлый пастельный тон) отлично читается как
**текст на тёмном фоне** (6.30:1 на `#2A2A2A`), но слишком светлый для белого
текста кнопки поверх него (≈1.9:1, провал). Поэтому у **тёмной** оболочки
заведена отдельная пара `--color-danger-solid` / `--color-danger-solid-hover`
(`#B85468` / `#B9495F`, контраст с белым текстом 4.66:1 / 5.02:1) — только для
сплошных danger-кнопок (`.btn-danger`: «Отменить все повторения» в календаре,
«Удалить» в админке). В светлой теме этот токен не заведён — компонент
`.btn-danger` там по-прежнему ссылается на `--color-danger` напрямую (§4.3),
т.к. проблема специфична для тёмной палитры.

**Новые токены** (введены там, где у комнаты нет готового компонента-аналога —
формы, бренд-панель, glass-карточки; получены смешиванием уже утверждённых
цветов комнаты, не придуманы независимо):

| Токен | Hex | Как получен | Контраст | Роль |
|---|---|---|---|---|
| `--color-bg-alt` | `#242424` | между `--color-room-bg` и `--color-room-surface` | — | альт-фон секций, инпуты, disabled-поля |
| `--color-surface-glass` | `rgba(51,51,51,.55)` | `--color-room-surface-raised` (`#333333`) с прозрачностью, по образцу светлой `--color-surface-glass` | — | glass-панели (стат-виджеты) |
| `--color-border-strong` | `#585858` | осветление `--color-border` | 2.02:1 на surface (нетекст, декоративный hover-акцент, задублирован тенью — не единственный носитель состояния) | обводка при hover |
| `--color-ink-400` | `#5D9A78` | мята `#7FDDA8` × фон `#1E1E1E`, смешение 35% | 5.05:1 на bg / 4.35:1 на surface | эйбрау-подписи `[ В СКОБКАХ ]`, крупные подписи |
| `--color-accent-hover` | `#75CA9A` | мята × фон, смешение 10% | текст `#10331F` на заливке: 7.04:1 | hover CTA |
| `--color-accent-active` | `#6CB78C` | мята × фон, смешение 20% | текст `#10331F` на заливке: 5.80:1 | active/pressed CTA |
| `--color-accent-text` | `#10331F` | буквальный hex, уже встречающийся инлайн в `room.html` (`.chat-input-row button`, `.tb-btn.is-positive-active`, `.badge-count`) как цвет текста на `--color-room-mic-on` | 8.45:1 на мяте | текст на CTA/бренд-заливках мятой |
| `--color-success-bg` | `rgba(127,221,168,.14)` | мята, низкая непрозрачность поверх тёмной поверхности | — | подложка бейджей «идёт сейчас»/«свободна»/«активен» |
| `--color-danger-bg` | `rgba(235,147,161,.14)` | розовый (mic-off), низкая непрозрачность | — | подложка бейджей «отменена» |
| `--color-warning-bg` | `rgba(214,168,61,.16)` | янтарь (speaker-ring), низкая непрозрачность | — | подложка бейджей «запланирована» |
| `--shadow-sm/md/lg/glass` | `rgba(0,0,0,.35–.5)` | по образцу `--shadow-room-panel` комнаты (тёмные тени вместо индиго-тонированных) | — | тени карточек/модалок/glass-панелей |

**Компонентные исключения (не токены, точечные правки в самих макетах).**
Пять мест, где CSS светлого макета использовал литеральный hex/rgba вместо
`var()` и поэтому не мог автоматически перекраситься — задокументированы в
`design/mockups/dark/README.md` (раздел «Точечные правки поверх скопированного
CSS»), в `tokens.css` не заводились как отдельные токены:

1. Аватары/`.weekday-chip.is-selected`/`.badge-role-admin` — заливка
   `var(--color-ink-700)` + жёсткий `color: #fff` заменены на
   `var(--color-accent-text)` (белый на мятной заливке нечитаем).
2. `.btn-danger` — заливка `var(--color-danger-solid)` вместо
   `var(--color-danger)` (см. таблицу выше).
3. `.copy-toast` (тултип «Скопировано») — фон был `var(--color-ink-900)`
   (тёмный в светлой теме → стал бы светлым в тёмной, ломая тёмный чип-
   тултип); в макетах заменён на буквальный `#333333`
   (= `--color-room-surface-raised`). При переносе в `frontend/` (реальный
   компонент на React, не статичная копия страницы) рекомендуется завести
   токен-алиас `--color-surface-raised` под обе темы, а не повторять этот
   литерал — тултип не единственное будущее место такой потребности.
4. Декоративные градиенты/rgba-подложки (бренд-панель `login.html`, фон
   `body` в `lobby.html`, `.day-col.is-today`/`.cancel-alert` в
   `calendar.html`, box-shadow фокуса/ошибки форм, glass-обводка) — тональные
   аналоги новой палитры (мятное свечение вместо индигового, янтарный
   focus-glow вместо индигового, розовый error-glow); та же практика уже
   используется в светлых макетах (см. `auth.html` — там эти значения тоже
   не токенизированы).
5. `color-scheme: dark` — добавлен в активационный блок `tokens.css` (см.
   §0.1), чтобы нативные элементы форм (скроллбар, чекбоксы) тоже
   рендерились в тёмной палитре браузера.

**Доступность.** Текст ≥ 4.5:1 везде, кроме крупных/декоративных элементов
(правило §5, порог 3:1). Статус не передаётся только цветом (см. §1.2a).
Палитра пастельная, той же светлоты, что и утверждённая палитра комнаты —
неоновых/кислотных акцентов не вводилось. Регрессия — `design/tools/contrast.py`.

### 1.3 Проверка контраста

Палитра пастельная (не неоновая) во всей системе — все текстовые пары
проходят WCAG 2.1 (≥4.5:1, кроме отмеченных ⚠︎ декоративных/крупных
элементов, ≥3:1). Регрессионная проверка — скрипт `design/tools/contrast.py`
(явный список пар с ratio и порогом), запуск: `python3 design/tools/contrast.py`
— 24/24 пар PASS.

### 1.4 Логотип

Логотип — стилизованный **объектив камеры**, отсылка к видео как сути
продукта.

**Файлы:**
- `design/logo.svg` — мастер-версия, квадратный viewBox `0 0 64 64`,
  масштабируется без искажений. Для крупных начертаний: центральный медальон
  лобби, промо-материалы, шапка письма при экспорте в PNG высокого разрешения.
- `design/favicon.svg` — упрощённая версия для мелких размеров (16–32px):
  меньше колец, толще штрихи, чтобы силуэт не «замыливался». Используется как
  иконка в топбаре рядом со словом «VidConf» во всех макетах, а также как
  browser favicon / app-иконка продакшен-сборки.

**Конструкция (обе версии):**
- центр — плоский шестигранник (`polygon`), закрытая диафрагма объектива,
  залита сплошным цветом;
- вокруг — концентрические окружности (4 в мастер-версии, 1 в favicon),
  каждая нарисована как `<circle>` со `stroke-dasharray`/`stroke-dashoffset`,
  что даёт разорванные на сегменты дуги неровной длины и разной толщины
  штриха — техно/HUD-эстетика, ощущение вращения диафрагменных лепестков.

**Цвет:** строго монохром, один тон — `currentColor`, наследующий цвет
текста в месте использования (в проекте это всегда `var(--color-ink-700)`,
`#3B4D95`). Никаких градиентов, бликов или цветов из референса-эскиза.
Контраст `#3B4D95` на `--color-bg` (`#F1F1F1`) — 6.93:1, на `--color-surface`
(`#FFFFFF`) — 7.83:1 (обе пары — в `design/tools/contrast.py`, порог для
графики 3:1 — проходят с большим запасом даже как текстовый).

**Использование в макетах:**
- топбар/сайдбар (`.brand-mark`) — `favicon.svg` инлайн, `22×22px`
  (соразмерно высоте строки словесного знака, заменяет прежний `.logo-dot`)
  во всех макетах `design/mockups/*.html`, где есть слово «VidConf»;
- центральный медальон лобби (`.hub-logo`) — полная `logo.svg`, `56×56px`
  внутри медальона `156×156px`, вместе со словом «VidConf» под знаком (см.
  §4.12 «Карточка-действие хаба (лобби)» — геометрия перекрытия медальона);
- `email-summary.html` — инлайн SVG допустим только для HTML-макета;
  в продакшен-письме обязателен растровый PNG (почтовые клиенты в массе не
  рендерят инлайн-SVG), см. комментарий в файле рядом с разметкой.

### 1.5 Аватары (инициалы)

Круглый аватар с инициалами (`.avatar`, компонент `Avatar` §4) — заливка
**всегда** `var(--color-ink-700)` (основной, current-user — user-pill топбара,
сайдбар админки) либо `var(--color-ink-500)` (второстепенные, списки
участников — таблицы админки, участники встречи в письме-саммари). Текст
инициалов — **всегда светлый, `#FFFFFF`**, никогда не тёмный `ink-900`/
`ink-700`: тёмные инициалы на индиго-заливке дают нечитаемый, «слипшийся»
результат. Правило зафиксировано как регрессионные пары в
`design/tools/contrast.py`:

| Заливка | Текст | Контраст |
|---|---|---|
| `--color-ink-700` (`#3B4D95`) | `#FFFFFF` | 7.83:1 |
| `--color-ink-500` (`#535F94`) | `#FFFFFF` | 6.12:1 |

Обе пары — с большим запасом выше порога 4.5:1 для текста. Дополнительно:
`font-weight` инициалов — не ниже 600 (используется `--text-caption`,
`600 12px`), `text-transform: none` (кириллические инициалы не должны
проходить через uppercase-трансформацию родителя).

**⚠ Предупреждение о каскаде CSS-специфичности.** В
`calendar.html` и `my-conferences.html` правило `.avatar-btn span { color:
var(--color-ink-900); }` (специфичность 0,1,1 — класс + тип-селектор) имело
специфичность ВЫШЕ, чем `.avatar { color: #fff; }` (0,1,0 — один класс), и
перебивало белый цвет у `<span class="avatar">` (он тоже `span` внутри
`.avatar-btn`, значит попадал под общее правило `.avatar-btn span`) —
инициалы рендерились тёмным `ink-900` на индиго-заливке, нечитаемо.
Специфичность решает независимо от порядка правил в файле, поэтому простое
переупорядочивание CSS не спасает. **Правило на будущее:** имя рядом с
аватаром — всегда через адресный класс (`.user-name`, не голый `span`),
никогда `.wrapper span` без уточнения — такой селектор непреднамеренно
задевает `<span class="avatar">`, если он лежит в той же обёртке. Проверено
headless-рендером (`getComputedStyle(...).color`) после фикса — `rgb(255,
255, 255)` в обоих файлах; заодно проверены `admin.html`, `lobby.html`
(структура другая — `.avatar-btn div span`/`.user-pill .avatar`, коллизии не
было) — там уже было `rgb(255, 255, 255)` и до правки.

---

## 2. Типографика

| Роль | Шрифт | Fallback-стек | Где |
|---|---|---|---|
| Дисплей (display) | **Unbounded** | `'Arial Rounded MT Bold', -apple-system, 'Segoe UI', sans-serif` | H1 лендинг-подобных блоков, крупные цифры дашборда, логотип |
| Текст (body/UI) | **Inter** | `-apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif` | вся UI-типографика: формы, таблицы, кнопки, параграфы |
| Моно (mono) | **JetBrains Mono** | `'SFMono-Regular', Menlo, Consolas, monospace` | код комнаты, ID брони, таймер конференции, .ics-детали |

Шрифты подключаются как **самостоятельно захостенные** (`frontend/public/fonts`,
`@font-face` с относительным путём), CDN Google Fonts не используется нигде
(в т.ч. в макетах) согласно правилу проекта «секреты и зависимости — не из
внешних сетей на рантайме». В `tokens.css` объявлены `@font-face` с путями
`../fonts/...`, отсутствие файлов в макетах безопасно деградирует в fallback-стек
без сетевых запросов.

Unbounded выбран за геометричные, слегка скруглённые формы букв — это то же
семейство характера, что у дисплейного заголовка в `referens.png` (широкие O/G/W,
единая толщина штриха). Inter — для плотного кириллического текста интерфейса
(отличная читаемость в мелких кеглях, стандарт де-факто для shadcn/ui).

### Шкала

| Токен | Размер / line-height | Начертание | Применение |
|---|---|---|---|
| `--text-display-2xl` | 64px / 1.05 | Unbounded 700 | Hero-заголовок (не используется в MVP-экранах, зарезервировано) |
| `--text-display-xl` | 48px / 1.1 | Unbounded 700 | Крупные цифры (админ-дашборд, счётчики) |
| `--text-display-lg` | 34px / 1.2 | Unbounded 600 | H1 экрана (заголовок лобби, «VidConf» в auth) |
| `--text-h1` | 28px / 1.25 | Inter 700 | заголовок карточки/секции |
| `--text-h2` | 22px / 1.3 | Inter 600 | подзаголовок |
| `--text-h3` | 18px / 1.35 | Inter 600 | заголовок компонента (карточка комнаты, панель) |
| `--text-body-lg` | 16px / 1.5 | Inter 400/500 | основной текст форм |
| `--text-body` | 14px / 1.5 | Inter 400/500 | таблицы, списки, вторичный UI |
| `--text-caption` | 12px / 1.4, uppercase, `letter-spacing: .04em` | Inter 600 | эйбрау-подписи `[ В КВАДРАТНЫХ СКОБКАХ ]`, статус-бейджи |
| `--text-mono-sm` | 13px / 1.4 | JetBrains Mono 500 | код комнаты/брони |

---

## 3. Spacing, радиусы, тени, границы

### Spacing (8pt-грид с базой 4px)
`--space-1: 4px · --space-2: 8px · --space-3: 12px · --space-4: 16px ·
--space-5: 20px · --space-6: 24px · --space-8: 32px · --space-10: 40px ·
--space-12: 48px · --space-16: 64px · --space-20: 80px · --space-24: 96px`

### Радиусы
Крупные скругления карточек взяты из `referens.png` (визуально 24–32px).

`--radius-sm: 8px` (инпуты, чипы) · `--radius-md: 12px` (кнопки не-pill, теги) ·
`--radius-lg: 16px` (плитки участников в комнате, пипетка collor_ico.png) ·
`--radius-xl: 20px` (малые карточки) · `--radius-2xl: 24px` (карточки комнат/лобби) ·
`--radius-3xl: 32px` (крупные панели, hero-блоки) · `--radius-full: 999px`
(pill-кнопки, аватары, бейджи-статусы)

### Тени
- `--shadow-sm` `0 1px 2px rgba(46,52,84,.06)` — лёгкий отрыв карточки от фона.
- `--shadow-md` `0 4px 16px rgba(46,52,84,.08)` — карточка при hover.
- `--shadow-lg` `0 12px 32px rgba(46,52,84,.12)` — модалки, поповеры.
- `--shadow-glass` `0 8px 24px rgba(59,77,149,.15)` + `backdrop-filter: blur(16px)` — glass-панели (стат-виджеты).
- `--shadow-speaker-glow` `0 0 0 3px var(--color-room-speaker-ring), 0 0 24px rgba(214,168,61,.35)` — свечение активного спикера (доп. к рамке).
- `--shadow-room-panel` `0 8px 24px rgba(0,0,0,.4)` — панель чата/поповеры в тёмной теме.

### Границы
`--border-thin: 1px` (базовая) · `--border-md: 1.5px` (pill-кнопки) ·
`--border-thick: 2px` (hover/focus состояния) · `--border-speaker: 3px`
(рамка активного спикера).

### Breakpoints (desktop-first)
`--bp-desktop: 1440px` — расчётная ширина макета. `--bp-min: 1280px` — минимальная
поддерживаемая ширина (контент перетекает, колонки не ломаются
до 1280px; мобильная адаптация — вне скоупа).

### Motion
Только микро-переходы состояний (hover/focus/toggle), без декоративных
анимаций: `--transition-fast: 120ms ease`, `--transition-base: 200ms ease`.

---

## 4. Компоненты и их состояния

### 4.1 Кнопка Primary (pill CTA, светлая тема)
Форма: `--radius-full`, паддинг `12px 24px`, шрифт `--text-body-lg` / Inter 600.

| Состояние | Фон | Текст | Обводка |
|---|---|---|---|
| default | `--color-accent` | `--color-accent-text` | нет |
| hover | `--color-accent-hover` | тот же | нет, `--shadow-md` |
| active/pressed | `--color-accent-active` | тот же | нет |
| focus-visible | как default | тот же | `2px --color-focus-ring`, offset 2px |
| disabled | `--color-ink-300` фон 40% | `--color-surface` | нет, `cursor: not-allowed` |

### 4.2 Кнопка Secondary (pill outline, светлая тема)
Прозрачный фон, обводка `1.5px --color-border-pill`, текст `--color-ink-700`.
Hover: фон `--color-bg-alt`, обводка `--color-ink-700`. Focus-visible: кольцо
`--color-focus-ring`. Disabled: обводка `--color-border`, текст `--color-ink-300`.

### 4.3 Кнопка Danger (светлая тема, напр. «Удалить комнату» в админке)
Фон `--color-danger`, текст `#FFFFFF`, форма `--radius-full`. Hover — темнее на 8%.
Всегда сопровождается иконкой (`Trash2`), не только цветом.

### 4.4 Инпут / форма
Фон `--color-surface`, обводка `1px --color-border`, радиус `--radius-md`,
паддинг `10px 14px`, текст `--text-body-lg`.

| Состояние | Обводка | Доп. |
|---|---|---|
| default | `--color-border` | — |
| hover | `--color-border-strong` | — |
| focus | `2px --color-focus-ring` | подпись-хинт индиго |
| error | `2px --color-danger` | текст ошибки под полем, иконка `AlertCircle` слева |
| disabled | `--color-border`, фон `--color-bg-alt` | текст `--color-ink-300` |

### 4.5 Карточка (светлая тема)
Фон `--color-surface`, радиус `--radius-2xl`, обводка `1px --color-border`,
тень `--shadow-sm` (по умолчанию) → `--shadow-md` (hover, если карточка кликабельна).
Glass-вариант (стат-виджеты): `--color-surface-glass` + `backdrop-filter: blur(16px)`
+ `--shadow-glass`, обводка `1px rgba(255,255,255,.6)`.

### 4.6 Бейдж статуса конференции (календарь, «Мои конференции»)
Бейдж описывает жизненный цикл КОНФЕРЕНЦИИ (комнат в системе нет). Pill (`--radius-full`),
паддинг `4px 12px` (мелкий вариант в сетке календаря — `2px 9px`, `font-size: 11px`),
`--text-caption`, иконка 12–14px слева от текста.

| Статус | Фон | Текст | Иконка |
|---|---|---|---|
| Запланирована (разовая) | `--color-warning-bg` | `--color-warning` | `Clock` |
| Закреплена · повторяется | `--color-bg-alt`, обводка `1px --color-border-strong` | `--color-ink-700` | `Repeat` |
| Идёт сейчас | `--color-success-bg` | `--color-success` | `Play` |
| Завершена | `--color-bg-alt` | `--color-ink-500` | `CheckCircle2` |
| Отменена | `--color-danger-bg` | `--color-danger` | `X`, заголовок карточки — `line-through` |

Закрытость паролем — НЕ отдельный статус жизненного цикла (ортогональна ему:
запланированная, закреплённая или идущая сейчас конференция может быть
закрытой одновременно). Отображается отдельно — маленькая иконка `Lock`
(13–15px, `--color-ink-700`/`--color-room-text-secondary`) инлайном перед
названием конференции, не бейджем.

### 4.7 Плитка участника (комната, тёмная тема)
Фон `--color-room-tile`, радиус `--radius-lg`, обводка `1px --color-room-tile-border`.
Имя — верхний левый угол, `--text-body` / `--color-room-text-primary`, поверх
полупрозрачной подложки-градиента снизу-вверх для читаемости на видео.
Иконка микрофона — нижний левый угол, 20px, круглая подложка `rgba(0,0,0,.35)`.

| Состояние | Обводка/эффект | Микрофон |
|---|---|---|
| default (не говорит) | `--color-room-tile-border` | `Mic` зелёный, если не muted |
| активный спикер | `--border-speaker` `--color-room-speaker-ring` + `--shadow-speaker-glow` | форма рамки — единственный, кто её имеет |
| muted | обводка как default | `MicOff` `--color-room-mic-off`, иконка перечёркнута (не только цвет) |
| видео выключено | вместо видео — аватар-заглушка на `--color-room-tile-hover` | значок `VideoOff` в углу |
| pinned/развёрнута | увеличенный размер в сетке, иконка `Pin` активна | — |
| hover (крупная плитка) | показывается toolbar-оверлей (`Maximize2`, `MoreVertical`) | — |

### 4.8 Нижний тулбар комнаты (тёмная тема)
Фон `--color-room-surface`, высота 72px, иконки контурные 24px, подпись под
иконкой `--text-caption` `--color-room-text-secondary`.

| Кнопка | Цвет по умолчанию | Toggled-off/mute | Позитивное действие |
|---|---|---|---|
| Микрофон | `--color-room-text-primary` outline | фон `--color-room-mic-off` заливка, иконка `MicOff` | — |
| Камера | `--color-room-text-primary` outline | фон `--color-room-mic-off`, иконка `VideoOff` | — |
| Демонстрация экрана | `--color-room-text-primary` outline | — | active-состояние: иконка/подпись `--color-room-mic-on` |
| Чат | `--color-room-text-primary` outline | — | активна (панель открыта): подложка `--color-room-surface-raised` |
| Участники | `--color-room-text-primary` outline | — | бейдж-счётчик `--color-room-mic-on` |
| Выйти | обводка `--color-room-danger` | — | всегда красная, hover → заливка `--color-room-danger-bg` |

### 4.9 Панель чата (комната)
Свёрнута: не занимает места, доступна кнопкой в тулбаре (см. 4.8).
Развёрнута: правая колонка 320px, фон `--color-room-surface-raised`,
разделитель `1px --color-room-tile-border`, сетка участников сужается.
Сообщения — пузыри `--color-room-tile`, имя автора `--color-room-mic-on`
(лёгкий акцент, не критично для контраста т.к. декоративно), текст
`--color-room-text-primary`.

### 4.10 Ячейка календаря-менеджера
Календарь не бронирует переговорные (нет привязки к комнате, нет конфликтов
брони по `EXCLUDE`-констрейнту БД) — это менеджер запланированных/закреплённых
КОНФЕРЕНЦИЙ. Единица сетки —
дневная колонка (`--radius-lg`, фон `--color-bg-alt`, `min-height: 460px`),
внутри — стопка карточек-конференций («чипов», `--radius-md`, `--text-body`).

| Состояние | Фон/обводка | Текст/иконка |
|---|---|---|
| День без конференций | колонка `--color-bg-alt` | подпись-заглушка `--color-ink-300` по центру («Свободный день» / «Ещё нет конференций») |
| Сегодняшняя колонка | лёгкая подсветка `rgba(212,242,227,.16)` (тон `--color-accent`) | заголовок дня `--color-ink-700` |
| Чип конференции (default) | `--color-surface`, обводка `1px --color-border` | бейдж статуса §4.6 сверху, hover → `--shadow-sm` + `--color-border-strong` |
| Чип отменённой конференции | как default, `opacity: .6` | заголовок `line-through`, `--color-ink-500` |
| Закрытая паролем | как default | иконка `Lock` инлайн перед названием (см. §4.6) |

### 4.11 Таблица (админка)
Заголовок `--color-bg-alt`, `--text-caption` uppercase `--color-ink-500`.
Строки — разделитель `1px --color-border`, hover-строка `--color-bg-alt`.
Действия — icon-button (`Pencil`, `Trash2`, `Mail`) 32px, `--radius-md`.

### 4.12 Карточка-действие хаба (лобби)
Лобби — хаб из 4 плиток-действий вокруг медальона VidConf
(`design/mockups/lobby.html`), а не список комнат. Фон `--color-surface`,
радиус `--radius-3xl`, обводка `1px --color-border`, тень `--shadow-sm`.
**Фиксированная высота** (не `min-height`) у всех 4 плиток — обязательное
условие строгой симметрии сетки 2×2 независимо от длины текста внутри.

Тайл `816×340px` (при доступной ширине ≥ ~1728px; на меньших вьюпортах,
вплоть до `--bp-min: 1280px`, сетка пропорционально сжимается через
`width: min(1664px, 100%)` на контейнере `.hub`, оставаясь строго
симметричной 2×2, без переполнения); контейнер `.hub` — `1664px`, gap между
тайлами — `--space-8` (32px). Типографика внутри: заголовок `40px/1.2`
(`54px/1.1` для акцентной плитки «Создать»), подпись-объект `21px`,
примечание `17px`.

Медальон-иконка (68px, круг, обводка `--border-thick --color-ink-700`)
вынесен на верхнюю кромку карточки (`position: absolute; top: -34px`),
под него на самой карточке зарезервирован `margin-top: 34px`. Заголовок
`--color-ink-700`, uppercase; подзаголовок-объект `--color-ink-900`;
примечание `--color-ink-500`.

Главное действие («Создать») — акцентный вариант на пастельной мяте
(`--color-accent`), текст и медальон — `--color-accent-text`.

| Состояние | Фон (обычная / акцентная) | Эффект |
|---|---|---|
| default | `--color-surface` / `--color-accent` | `--shadow-sm` |
| hover | тот же / `--color-accent-hover` | `--shadow-lg`, `translateY(-4px)` |
| active | тот же / `--color-accent-active` | `translateY(-1px)` |
| focus-visible | тот же | кольцо `--color-focus-ring`, offset 2px |

**Медальон VidConf в центре** — декоративный (`pointer-events: none`,
`aria-hidden`), диаметр `156px`, фон `--color-surface`
(непрозрачный), обводка `--border-thick --color-ink-700`, тень
`--shadow-lg`, `z-index: 20` (гарантированно поверх карточек). Содержимое —
знак объектива `logo.svg` (`56×56px`, §1.4) + слово «VidConf» под ним
(`600 16px var(--font-display)`, `--color-ink-700`).

Медальон не просто сидит в промежутке сетки, а **лежит поверх** равных по
величине частей видимых углов всех 4 карточек. Геометрия фиксированная (в пикселях,
не в процентах — высота `.hub` всегда `2×340 + 32 = 712px`, независимо от
ширины вьюпорта):
- по горизонтали асимметрии нет — центр строго на границе колонок, `16px`
  (половина `gap`) до ближнего края каждой карточки;
- по вертикали — видимый низ карточек ряда 1 на `y = 340px` от верха `.hub`,
  видимый верх карточек ряда 2 на `y = 406px` (`gap` 32px + `margin-top`
  34px карточки под собственный медальон-иконку); равноудалённая от обеих
  точка — `y = 373px` (`33px` до каждой), а **не** геометрический центр
  сетки `356px` (`712 / 2`), — из-за несимметричного резерва под
  action-icon только у нижнего ряда.

Медальон центрирован в `(50%, 373px)` (`top: 373px; left: 50%;
transform: translate(-50%, -50%)`), а не `(50%, 50%)`. Такая точка —
зеркально-симметричная по обеим осям относительно всех 4 карточек (что
подтверждается тем, что сдвиг `16px`/`33px` — общий для обеих карточек по
каждой оси, а не индивидуальный для одной), поэтому перекрытие получается
одинаковым на все 4 угла **по построению**, без ручной подгонки под каждый
угол. Проверено headless-рендером (Playwright/Chromium, 1280/1440/1728px):
перекрытие видимой (с учётом скругления `--radius-3xl`, 32px) части каждой
из 4 карточек — **29.2px**, идентично на всех четырёх и на всех проверенных
ширинах вьюпорта (симметрия по x/y — расхождение 0px).

### 4.13 Карточка создания конференции (календарь)
Фон `--color-surface`, радиус `--radius-2xl`, паддинг `--space-6`, sticky
в двухколоночном layout календаря. Поля «Название / Дата / Время /
Участники» — стандартный инпут §4.4. Два тумблера общего компонента
`.switch`/`.slider` (заливка `--color-accent-active` во включённом состоянии):

- **«Закрытая по паролю»** — раскрывает поле пароля под тумблером.
- **«Закрепить постоянную конференцию»** — раскрывает блок повторений
  (§4.14) со всеми 4 вариантами сразу.

Оба раскрытия — чистый CSS через `:has()` (без JS): тумблер и раскрываемый
блок — сиблинги внутри общего `.pin-block`/`.toggle-block`,
`:has(input:checked) .sub-block { display: … }`. При адаптации на
`frontend/` — то же поведение через `useState`/controlled-компонент.

### 4.14 Блок повторений (recurrence)
Раскрывается под тумблером «Закрепить постоянную конференцию» (§4.13),
отделён `1px dashed --color-border`. Список из 4 вариантов
(`.recurrence-option`, radio-группа — выбран ровно один):

| Вариант | Доп. поля | Обязательная подсказка (edge cases) |
|---|---|---|
| По дням недели, еженедельно | 7 круглых чипов дней недели (34px, множественный выбор) | ближайшие 2 даты вхождения |
| Раз в 2 недели | дата начала + день недели | ближайшие 2 даты вхождения |
| Раз в месяц | число месяца (1–31) | «если в месяце нет такого числа — переносится на последний день месяца» (31-е число, 29 февраля) |
| Каждые N дней | целое N + дата начала | ближайшие даты вхождения («через N, 2N, 3N дней») |

Строка варианта: `--radius-md`, обводка `1px --color-border` → при выборе
обводка `--color-ink-700` + фон `--color-bg-alt` (через `:has(input:checked)`,
см. §4.13). Под-поля выбранного варианта раскрываются тем же CSS-приёмом;
у невыбранных — скрыты (`display: none`), а не задизейблены — чтобы список
из 4 строк был виден целиком сразу после раскрытия тумблера. Выбранный день недели/чип — заливка `--color-ink-700`, текст
белый. Подсказки — `12px`, `--color-ink-500`.

### 4.15 Пилюли «ссылка / номер» с копированием
Новый компонент «Моих конференций»: у каждой конференции есть постоянная
ссылка и человеко-диктуемый номер, доступные для копирования одним кликом.
Подпись-заголовок над пилюлей — `--text-caption`, `--color-ink-400`
(«Ссылка» / «Номер»). Пилюля — `--radius-full`, фон `--color-bg-alt`,
обводка `1px --color-border`; значение — `--text-mono-sm` `--color-ink-700`,
обрезается `text-overflow: ellipsis` (для длинных ссылок). Кнопка
копирования — круг 28px справа внутри пилюли.

| Состояние кнопки копирования | Иконка | Доп. |
|---|---|---|
| default | `Copy`, `--color-ink-500` | — |
| hover | `Copy`, `--color-ink-700` | `--shadow-sm` |
| скопировано (~1.5s) | `Check`, `--color-success` | всплывающая подсказка «Скопировано» над кнопкой |
| focus-visible | как default | кольцо `--color-focus-ring` |

Статус «скопировано» не передаётся только сменой цвета иконки — обязательно
дублируется сменой формы иконки (`Copy` → `Check`) и текстовым тултипом.

### 4.16 Селект (кастомный выпадающий список)

Заменяет нативный `<select>` в полях
«Рассылка саммари» (карточка создания/редактирования конференции, §4.13) и
«Получатели по умолчанию» (настройки админки), а также любой будущий
одиночный выбор из списка. Собран из уже утверждённых примитивов — триггер
переиспользует геометрию инпута (§4.4), дроплист переиспользует паттерн
`.menu` (выпадающее меню бургера лобби, `design/mockups/lobby.html`), пункт
списка — паттерн `.menu a`. Ничего нового в токенах не заводится.

**Триггер (закрытое состояние).** Высота `44px` (паддинг `10px 14px` +
`--text-body-lg` при `line-height: 1.5` — идентично инпуту §4.4, чтобы
селект и текстовые поля в одной форме были на одной высоте), фон
`--color-surface`, обводка `1px --color-border`, радиус `--radius-md`.
Значение слева, шеврон `ChevronDown` (18px, `--color-ink-500`) прижат
вправо. Текст — `--text-body-lg` `--color-ink-900`; если значение не
выбрано — плейсхолдер `--color-ink-300` (та же роль токена, что у
плейсхолдера инпута).

| Состояние | Обводка/фон | Текст/шеврон | Доп. |
|---|---|---|---|
| default | `--color-border` | `--color-ink-900` / шеврон `--color-ink-500` | — |
| hover | `--color-border-strong` | те же | курсор `pointer` |
| focus-visible (закрыт) | `2px --color-focus-ring` | те же | как фокус инпута §4.4 |
| открыт | `2px --color-focus-ring`, нижние углы дроплиста продолжают радиус триггера визуально (панель — отдельный блок, см. ниже) | шеврон повёрнут `rotate(180deg)`, `--transition-fast` | `aria-expanded="true"` |
| error | `2px --color-danger` | текст `--color-ink-900` | текст ошибки под полем + `AlertCircle` слева от значения, как у инпута §4.4 |
| disabled | `--color-border`, фон `--color-bg-alt` | текст и шеврон `--color-ink-300` | курсор `not-allowed`, `aria-disabled="true"` |

**Дроплист (открытое состояние).** `position: absolute`, `top: calc(100% + 6px)`,
ширина равна триггеру (`width: 100%`, в отличие от `.menu`, у которого
`min-width` фиксирован — селект обязан совпадать по ширине с полем, иначе
теряется визуальная связь триггер↔панель). Фон `--color-surface`, обводка
`1px --color-border`, радиус `--radius-lg`, тень `--shadow-lg`, внутренний
паддинг `--space-2` (8px), `z-index: 30` (над соседними карточками формы).
Список длиннее ~7 пунктов — `max-height: 280px; overflow-y: auto` со
стандартным скроллбаром (не кастомизируется, см. `color-scheme` в
`tokens.css`, влияет на нативный скроллбар браузера в обеих темах).

Пункт списка (`role="option"`): паддинг `10px 14px`, радиус `--radius-sm`,
`--text-body-lg` 400, текст `--color-ink-900`, `display: flex; justify-content: space-between`
(значение слева, место под иконку `Check` справа).

| Состояние пункта | Фон | Текст | Доп. индикатор |
|---|---|---|---|
| default (не выбран, не наведён) | прозрачный | `--color-ink-900` | — |
| hover / клавиатурная подсветка (`aria-activedescendant`) | `--color-bg-alt` | `--color-ink-700` | — |
| выбран (`aria-selected="true"`) | прозрачный (или `--color-bg-alt`, если одновременно наведён/подсвечен — состояния комбинируются аддитивно) | `--color-ink-900`, `font-weight: 600` | иконка `Check` (16px, `--color-ink-700`) справа — «выбрано» никогда не передаётся только фоном/цветом |
| disabled-пункт | прозрачный | `--color-ink-300` | `cursor: not-allowed`, `aria-disabled="true"`, без hover-эффекта |

Опциональный разделитель групп внутри списка — тот же приём, что
`.menu-divider`: `1px --color-border`, `margin: var(--space-2) 6px`.

**Клавиатурная доступность и ARIA.** Паттерн — listbox-combobox
(`role="combobox"` на триггере + `role="listbox"` на панели), без нативного
`<select>`, чтобы стилизация дроплиста была полностью в токенах проекта.

| Действие | Клавиша | Поведение |
|---|---|---|
| Открыть список | `Enter`, `Space`, `ArrowDown`, `ArrowUp` (фокус на триггере, список закрыт) | раскрывает дроплист; подсветка ставится на выбранный пункт (если значения ещё нет — на первый) |
| Навигация | `ArrowDown` / `ArrowUp` (список открыт) | двигает клавиатурную подсветку на следующий/предыдущий пункт (циклически не переходит с последнего на первый), обновляет `aria-activedescendant` триггера — фокус физически остаётся на триггере |
| К началу/концу | `Home` / `End` | подсветка на первый/последний доступный (не disabled) пункт |
| Быстрый переход | ввод буквы | подсветка прыгает на ближайший следующий пункт, начинающийся с введённого символа (стандартное ожидание пользователей от `<select>`) |
| Выбрать и закрыть | `Enter`, `Space` (на подсвеченном пункте) | фиксирует значение, закрывает панель, фокус остаётся на триггере, `aria-expanded="false"` |
| Закрыть без изменений | `Esc` | закрывает панель, значение не меняется, фокус остаётся на триггере |
| Закрыть без изменений | клик вне триггера/панели, `Tab` | панель закрывается, значение не меняется (если пункт не был явно выбран через `Enter`/клик) |

ARIA-контракт: триггер — `role="combobox"`, `aria-haspopup="listbox"`,
`aria-expanded`, `aria-controls="<id панели>"`, `aria-labelledby`/`aria-label`
(подпись поля, как у инпута §4.4); панель — `role="listbox"`,
`aria-activedescendant` на триггере указывает на `id` текущего подсвеченного
`role="option"`; каждый пункт — `aria-selected`, disabled-пункты —
`aria-disabled="true"` и исключены из навигации стрелками/type-ahead.

**Обе темы.** Компонент целиком собран из уже описанных выше токенов
(`--color-surface`, `--color-border(-strong)`, `--color-ink-*`,
`--color-focus-ring`, `--color-danger`, `--shadow-lg`, `--radius-md/lg/sm`),
которые уже переключаются между светлой и тёмной оболочкой по механизму
§0.1 — отдельной тёмной версии спеки не требуется. Прецедент — `.menu`
(дроплист бургер-меню лобби): его CSS в `design/mockups/lobby.html` и
`design/mockups/dark/lobby.html` побайтово идентичен, меняется только
подстановка переменных из `tokens.css`; Select использует ту же панель
целиком на var(), поэтому корректно рендерится в тёмной теме без правок.
В тёмной оболочке фон панели/триггера — графитовый `--color-surface`
(`#2A2A2A`), подсветка пункта — `--color-bg-alt` (`#242424`), выбранный
пункт и hover-текст — пастельная мята `--color-ink-700` (`#7FDDA8`), кольцо
фокуса — янтарь `--color-focus-ring` (`#D6A83D`), см. §1.2b.

---

## 5. Доступность

- Текст ≥ 4.5:1 везде, кроме крупных декоративных элементов (отмечены ⚠︎ выше,
  ≥ 3:1 по правилу WCAG для large text).
- Статус всегда дублируется не цветом: иконка (статус конференции §4.6,
  mic on/off, «скопировано» при копировании ссылки/номера) + текстовая подпись.
- `:focus-visible` — везде видимое кольцо (`--color-focus-ring` светлая тема,
  `--color-room-focus-ring` тёмная), никогда `outline: none` без замены.
- Интерактивные элементы ≥ 40×40px области клика (кнопки тулбара — 48×48px).
- Все декоративные SVG-иконки — `aria-hidden="true"`, интерактивные — с
  `aria-label` на кнопке-обёртке.
- Логотип (§1.4) в топбаре — `role="img" aria-label="VidConf"` на SVG внутри
  `.brand-mark`, где рядом уже есть текстовое «VidConf» — SVG физически
  декоративен (`aria-hidden="true"` в разметке), словесный знак читает
  скринридер. Медальон лобби — весь блок `aria-hidden="true"` (дублирует
  бренд, не несёт уникальной информации).
- Аватары с инициалами (§1.5) — текст инициалов всегда светлый (`#FFFFFF`)
  на заливке `--color-ink-700`/`--color-ink-500`, ≥ 4.5:1 (см.
  `design/tools/contrast.py`).

---

## 6. Имплементация для frontend-dev

### shadcn/ui
Тема подключается через CSS-переменные `tokens.css`, а не через хардкод в
`tailwind.config`. Компоненты shadcn/ui кастомизировать так:

| shadcn/ui компонент | Что переопределить | Токены |
|---|---|---|
| `Button` | варианты `default` (pill CTA), `outline` (pill secondary), `destructive`, `ghost` (иконки тулбара) | `--color-accent*`, `--color-border-pill`, `--color-danger*`, `--radius-full` |
| `Input`, `Textarea` | border/focus/error-состояния | `--color-border`, `--color-focus-ring`, `--color-danger` |
| `Card` | радиус, тень, glass-вариант отдельным классом `.card-glass` | `--radius-2xl`, `--shadow-sm/md`, `--shadow-glass` |
| `Badge` | варианты `success` / `danger` / `warning` / `neutral` под статусы конференций (§4.6) | цвета из 1.1 |
| `Dialog` / `Sheet` | модалка брони, панель чата (Sheet справа в тёмной теме) | `--shadow-lg`, `--color-room-surface-raised` |
| `Select` (кастомный, §4.16, не нативный `<select>`) | триггер как `Input` (§4.4), дроплист — паттерн `.menu` (лобби) | триггер `--radius-md`; панель `--radius-lg` + `--shadow-lg`; пункт `--radius-sm`; `--color-border`, `--color-focus-ring` |
| `Tabs` | Вход/Регистрация на auth | `--color-ink-700` активная вкладка, подчёркивание `--color-accent-active` |
| `Table` | админка | `--color-bg-alt` заголовок, `--color-border` разделители |
| `Toggle`/`ToggleGroup` | переключатель layout сетки в комнате, кнопки mic/camera | активное состояние `--color-room-mic-on` / `--color-room-mic-off` |
| `Calendar` (FullCalendar, не shadcn) | обёртка токенами, ячейки — см. 4.10 | — |
| `Avatar` | участники комнаты, аватары в лобби/админке | `--radius-full`; заливка/текст инициалов — см. §1.5 (заливка `ink-700`/`ink-500`, текст всегда `#FFFFFF`) |
| `Tooltip` | подсказки тулбара | `--color-room-surface-raised` |

Тёмная тема room включается локальным скоупом (напр. `data-theme="room"` на
контейнере страницы конференции), а не глобальным `dark:` — остальная оболочка
всегда светлая независимо от системной темы ОС.

### Иконки — lucide-react, контурные, `stroke-width: 2`

| Экран | Иконки |
|---|---|
| **auth** | `Mail`, `Lock`, `Eye`/`EyeOff`, `User`, `CheckCircle2` (подтверждён email), `ArrowRight` |
| **lobby** (хаб действий) | `Video` («Создать»), `CalendarDays` («Календарь»), `Link2` («Подключиться»), `User` («Мои»), бургер-меню: `Download`, `Info`, `LayoutDashboard`, `LogOut` |
| **room** | `Mic`, `MicOff`, `Video`, `VideoOff`, `ScreenShare`, `MessageSquare`, `PhoneOff` (выход), `Users`, `Settings`, `LayoutGrid`, `Columns`, `Grid2x2`, `Maximize2`, `MoreVertical`, `Pin`, `Send`, `ChevronLeft`/`ChevronRight` (лента превью) |
| **calendar** (менеджер конференций) | `ChevronLeft`/`ChevronRight`, `CalendarDays`, `Clock`, `Lock`, `AlertTriangle`, `Check`, `Plus`, `Repeat` (закреплена), `Play` (идёт сейчас), `X` (отменена/отмена), `ChevronDown` (селект «Рассылка саммари», §4.16) |
| **my-conferences** | `Repeat`, `Clock`, `CheckCircle2`, `Users`, `Copy`/`Check` (копирование), `Play` («Войти»), `Pencil`, `FileText` (саммари), `Lock` |
| **join** | `Link2`, `Hash`, `User`, `Mail`, `Lock`, `Eye`/`EyeOff`, `ArrowRight`, `AlertCircle`, `Video` (карточка целевой конференции) |
| **admin** | `LayoutDashboard`, `Video`, `Lock`, `Users`, `Mail`, `Trash2`, `Pencil`, `Search`, `Plus`, `Send`, `ChevronDown`/`Check` (селект «Получатели по умолчанию», §4.16) |
| **email-summary** | инлайн-SVG (email-клиенты не грузят icon-шрифты/JS): `CheckCircle2`, `ListChecks`, `HelpCircle`, `BarChart3`, стрелка CTA |

В HTML-макетах иконки встроены как инлайн-SVG (без иконных шрифтов и CDN);
во frontend — заменяются на `lucide-react` компоненты 1:1 по смыслу.

### Файлы
`design/tokens.css` — источник истины по значениям (используется напрямую или
транслируется в `tailwind.config.*`, см. `design/tailwind.md`).

### Макеты (`design/mockups/`, единый источник истины по разметке)
- `auth.html` — форма входа/регистрации
- `lobby.html` — хаб действий (2×2 плитки)
- `calendar.html` — менеджер запланированных конференций
- `my-conferences.html` — мои конференции (закреплённые и предстоящие)
- `join.html` — подключение по ссылке/номеру → представиться → пароль
- `room.html` — конференция (тёмная тема)
- `admin.html` — администрирование
- `email-summary.html` — экспорт-письмо с транскриптом и резюме (всегда
  светлое — почтовые клиенты в массе не поддерживают тёмную тему/CSS-переменные,
  не участвует в переключателе тем оболочки)
- `dark/*.html` — тёмный вариант оболочки (6 экранов: `login`, `lobby`,
  `calendar`, `join`, `my-conferences`, `admin`); палитра — §1.2b, см. `dark/README.md` за происхождением цветов
