/* Общие значения трёх публичных страниц: сайта, чата и статуса ремонта.
   Порождён `packages/page-kit/gen-site-css.mjs` — руками не править.
   Цвет меняется в `packages/page-kit/src/tokens.ts`, потом
   `npm run tokens -w @fixbox/page-kit` (docs/platform/page-kit.md). */

:root {
  --bg: #ffffff;
  --bg-soft: #f5f5f7;
  --bg-elevated: #ffffff;
  --fg: #16161a;
  --fg-muted: #6b6b72;
  --border: #e2e2e6;
  --border-strong: #c9c9d0;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.06);
  --accent: #25d366;
  --accent-fg: #06301a;
  --accent-hover: #1fbb59;
  --radius: 14px;
  --radius-sm: 10px;
}

/* Системная тёмная — только когда переключатель молчит. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0c0c0e;
    --bg-soft: #151518;
    --bg-elevated: #1a1a1f;
    --fg: #f2f2f5;
    --fg-muted: #9c9ca6;
    --border: #2a2a31;
    --border-strong: #3d3d46;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.35);
  }
}

/* Выбор человека перебивает системную — в обе стороны. */
:root[data-theme='dark'] {
  --bg: #0c0c0e;
  --bg-soft: #151518;
  --bg-elevated: #1a1a1f;
  --fg: #f2f2f5;
  --fg-muted: #9c9ca6;
  --border: #2a2a31;
  --border-strong: #3d3d46;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.35);
}
:root[data-theme='light'] {
  --bg: #ffffff;
  --bg-soft: #f5f5f7;
  --bg-elevated: #ffffff;
  --fg: #16161a;
  --fg-muted: #6b6b72;
  --border: #e2e2e6;
  --border-strong: #c9c9d0;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.06);
}

/* Полоса прокрутки — общая у трёх публичных страниц. Объявляется один раз на
   корне: scrollbar-width и scrollbar-color наследуются, поэтому скроллящиеся
   элементы не перечисляются поимённо и новый скролл получит тот же вид сам.
   Своих блоков под темы правилу не нужно — цвет берётся переменной, и за темой
   он едет вместе с ней.

   Системная полоса белая и квадратная: в тёмной теме она светит на весь экран.
   Прятать её нельзя — она отвечает на вопрос «выше ещё есть?» до того, как
   человек взялся за мышь.

   Только стандартные свойства: ::-webkit-scrollbar браузер игнорирует вовсе на
   элементе с заданным scrollbar-color, и второй способ рядом с этим не работал
   бы. Safari младше 26.2 свойства не знает и оставит системную полосу —
   сознательная деградация, на телефоне полосы нет вовсе. */
:root {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* Полоса шапки во всю ширину: липкая, полупрозрачная с размытием и с
   отбивкой снизу. Взято с сайта целиком — он эталон, и подложка такая же часть
   облика, как кегль имени. */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}

/* Содержимое шапки: у сайта его держит общая полоса страницы, у чата и статуса
   ширину и поля задаёт сама шапка. */
.head {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 62px;
  max-width: 720px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* Бренд — ссылка на сайт у всех трёх страниц. Цвет и подчёркивание заданы явно:
   у чата и статуса он живёт в Shadow DOM, куда вид ссылки от документа не
   наследуется вовсе, и без этих двух строк вылез бы синий подчёркнутый link. */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
  color: inherit;
  text-decoration: none;
  margin-right: auto;
  min-width: 0;
}

/* Бренд — управляющий элемент, и с клавиатуры его видно той же обводкой, что и
   кнопку темы. Отступ больше: буквы выходят под самую рамку, кнопка — нет. */
.brand:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

.brand span {
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
}

/* Действия справа: кнопка темы и, если страница их даёт, её собственные. */
.head-actions { display: flex; align-items: center; gap: 8px; flex: none; }

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s, background 0.15s;
}

.theme-toggle:hover {
  border-color: var(--border-strong);
  background: var(--bg-soft);
}

.theme-toggle:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

.theme-toggle svg { width: 17px; height: 17px; }

/* Иконка показывает тему, которая сейчас, а не ту, в которую переключит. */
.theme-toggle .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme='light']) .theme-toggle .icon-moon { display: block; }
}

:root[data-theme='dark'] .theme-toggle .icon-sun { display: none; }
:root[data-theme='dark'] .theme-toggle .icon-moon { display: block; }
:root[data-theme='light'] .theme-toggle .icon-sun { display: block; }
:root[data-theme='light'] .theme-toggle .icon-moon { display: none; }