/* Дизайн-система: единственный источник цветов, размеров и типографики.
   Все нейтрали тёплые: чистый серый рядом с синим акцентом выглядит
   холодно и "системно". Тёмная тема переопределяет те же переменные в
   html[data-theme="dark"] (см. docs/superpowers/specs/2026-11-10-dark-theme-design.md),
   поэтому хардкод цветов в других файлах запрещён (проверяется тестом). */

:root {
  color-scheme: light;

  /* Поверхности: сайдбар на 3% темнее ленты, без тёмной заливки */
  --bg: #ffffff;
  /* Рельс каналов и колонка людей стоят на подложке: зоны каркаса
     читаются границами, а не отступами (редизайн, направление A) */
  --rail-bg: #f4f2ee;
  --rail-active: #e4e0d8;
  --surface: #faf9f6;
  --surface-hover: #f2efe9;
  --border: #e3dfd6;
  --border-strong: #cdc7ba;

  /* Текст: тёплый почти-чёрный, не чистый чёрный */
  --text: #191817;
  --text-muted: #6a6660;
  --text-faint: #948f86;

  /* Один акцент, чернильный синий */
  --accent: #2c5cc5;
  --accent-hover: #234a9e;
  --accent-soft: rgba(44, 92, 197, 0.09);

  /* Затемнение под выдвижным ящиком на узком экране: фон уходит назад,
     ящик читается как слой, а не как сдвинутая колонка */
  --scrim: rgba(26, 26, 24, 0.45);

  /* Служебные цвета, встречаются редко */
  --online: #2b8f57;
  /* Точка офлайн: #878f98 даёт 3.11:1 на surface и 3.27:1 на белом, то есть
     проходит порог 3:1 для индикатора. Прежний #8b949e давал 2.92:1 */
  --offline: #8a8f96;
  --danger: #ab2317;
  /* Подложка необратимого действия (архивация, удаление): плотность как у
     --accent-soft, чтобы кнопка читалась как опасная, но не кричала красным
     пятном в каждом списке. В тёмной теме подлежит переопределению */
  --danger-soft: rgba(180, 35, 24, 0.07);

  /* Цвета решёток каналов: как в Zulip, канал узнаётся по цвету значка.
     Оттенки приглушены и лежат в одной светлоте с остальной палитрой,
     чтобы список не превращался в радугу. Номер оттенка выбирается по
     имени канала (app/channels/colors.py), здесь - только значения */
  --ch-0: #5b7fb5;
  --ch-1: #b56b5b;
  --ch-2: #5ba57a;
  --ch-3: #8a6bb5;
  --ch-4: #b5905b;
  --ch-5: #5b9fb5;

  /* Шкала отступов: только эти значения */
  --s0: 2px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  --radius-panel: 8px;
  --radius-control: 6px;
  /* Радиус мелких чипов (код в тексте, кнопки действий): 3px */
  --radius-chip: 3px;

  /* Тени: тоже часть системы, иначе цвет тени расползётся по файлам */
  --shadow-panel: 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-popup: 0 4px 14px rgba(0, 0, 0, 0.12);

  /* Типографика: три размера тела плюс один для заголовков экранов */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Текст сообщений (направление A): начертание с засечками отделяет
     содержание переписки от интерфейса. Системные стеки, без загрузки
     шрифтов: продукт без сборки. Georgia есть на Windows/macOS/iOS,
     Charter/Palatino - на macOS, поэтому падение до serif безопасно */
  --font-text: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino,
    "Bitstream Charter", serif;
  /* Моноширинный набор: код, команды, адреса. Токеном, потому что
     применяется в разных местах (подсказка команд, код в ленте) */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --fs-body: 16px;
  --lh-body: 1.6;
  --fs-meta: 13px;
  --lh-meta: 1.4;
  --fs-label: 11px;
  --lh-label: 1.2;
  --fs-title: 22px;
  --lh-title: 1.3;

  /* Ширины зон каркаса (направление A): рельс уже, людям хватает 188 */
  --sidebar-w: 232px;
  --users-w: 188px;
}

/* Тёмная тема: синий уголь (направление A), а не нейтральный графит -
   акцент получает продолжение в фоне, и текст не висит в вакууме.
   Акцент здесь СВЕТЛЕЕ фона, а не темнее: дневной #2c5cc5 на #14161b даёт
   2.97:1 - провал порога 4.5:1, разворот направления неизбежен; ночной
   #8fb0ff даёт 8.46:1. Значения проходят пороги WCAG AA с запасом
   (tests/ui/test_dark_theme.py держит порог числами).
   color-scheme перекрашивает нативное: скроллбары, стрелки select,
   автозаполнение, курсор в input. */
html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #14161b;
  --rail-bg: #1b1e25;
  --rail-active: #272b34;
  --surface: #1e222a;
  --surface-hover: #252a33;
  --border: #2e333d;
  --border-strong: #3f4653;

  --text: #e6e8ec;
  --text-muted: #a2a7b2;
  --text-faint: #7b8190;

  --accent: #8fb0ff;
  --accent-hover: #a9c3ff;
  --accent-soft: rgba(143, 176, 255, 0.15);

  --scrim: rgba(0, 0, 0, 0.6);

  --online: #4fc47b;
  --offline: #78808e;
  --danger: #f08a80;
  /* Та же логика подложки, что в светлой теме, но цветом тёмного danger */
  --danger-soft: rgba(240, 138, 128, 0.14);

  /* Те же оттенки, что в светлой теме, но осветлённые до одной светлоты:
     приглушённые светлые тона читаются на графите, тёмные - пропадали бы */
  --ch-0: #7d9fd9;
  --ch-1: #d98f80;
  --ch-2: #7dc496;
  --ch-3: #b294d9;
  --ch-4: #d9b37d;
  --ch-5: #7dc2d9;

  /* На тёмном фоне тень без плотности не видна: поднимаем прозрачность */
  --shadow-panel: 0 2px 12px rgba(0, 0, 0, 0.5);
  --shadow-popup: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* Базовая нормализация: одна точка правды для всего приложения */
* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Атрибут hidden перебивается авторскими правилами вида "#main form input":
   без этого правила скрытые контролы рендерятся как видимые элементы */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Доступность: фокус виден везде, движение отключается по просьбе системы */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}