/* GenRouter — токены кабинета.
 *
 * Палитра GenSpace: тёмная тема основная, акцент #5e6ad2.
 * Значения взяты из apps/web/src/app/globals.css проекта GenSpace,
 * а не подобраны на глаз. Нужен новый цвет — сначала правится дизайн-система.
 *
 * Светлая тема сохранена как парный набор: кабинет открывают и днём,
 * а насильно тёмный интерфейс в светлом окружении читается хуже. */

:root {
  --canvas: #0d0d10;
  --surface: #141418;
  --surface-2: #1b1b21;
  --text: #ededef;
  --text-2: #8a8f98;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  --accent: #5e6ad2;
  --accent-strong: #6f7ae0;
  --accent-soft: rgba(94, 106, 210, 0.16);
  --accent-fg: #ffffff;
  --danger: #f85149;

  --up: #3fb950;
  --up-soft: rgba(63, 185, 80, 0.14);
  --down: #f85149;
  --down-soft: rgba(248, 81, 73, 0.14);
  --warning: #d29922;

  --radius: 12px;
  --sidebar: 248px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  color-scheme: dark;
}

/* Светлая тема включается классом на <html>, как в GenSpace. */
.theme-light {
  --canvas: #eceef2;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --text: #0d0d10;
  --text-2: #6b7280;
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.14);

  --accent: #4f5bd5;
  --accent-strong: #3f4ac0;
  --accent-soft: rgba(79, 91, 213, 0.12);
  --danger: #cf222e;

  --up: #1a7f37;
  --up-soft: rgba(26, 127, 55, 0.12);
  --down: #cf222e;
  --down-soft: rgba(207, 34, 46, 0.1);
  --warning: #9a6700;

  --shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* font-weight: 500 здесь стоять не может: в подключении шрифта веса 500 нет,
 * поэтому браузер молча подставлял 400. Замер это подтвердил — одна и та же
 * фраза в 400 и в 500 занимала ровно 392.98px, то есть 500 никогда не
 * применялся. Пишем 400 честно, чтобы CSS совпадал с тем, что видно. */
body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Фокус виден всегда — требование доступности из tokens.css проекта. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

/* Локализация: короткая пауза перед показом переведённой страницы.
 *
 * Разметка приходит на русском, а язык по умолчанию английский, поэтому
 * i18n-core.js ставит на <html> data-i18n="pending" ДО отрисовки тела и
 * снимает сразу после подмены текста. Без этого человек видел бы вспышку
 * русского. Скрываем visibility, а не display: размеры и позиции считаются
 * как обычно, поэтому после показа ничего не прыгает и не перекомпоновывается.
 *
 * Атрибут снимается тремя путями (после перевода, из finally при ошибке и по
 * таймеру 400 мс), так что пустая страница не может остаться насовсем.
 * Русскому языку правило не мешает: для него pending вообще не ставится. */
html[data-i18n="pending"] body {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Обнуления длительности мало: сдвиг и масштаб применились бы мгновенно,
     но всё равно сместили бы элемент. Отключаем их полностью. */
  *:hover,
  *:active {
    transform: none !important;
  }
}
