/* Alibi: единые дизайн-токены. Правила и примеры: docs/DESIGN.md.
   Сайт, страница подключения, страницы оплаты и новые экраны берут цвета, шрифты и отступы только отсюда. */
:root {
  color-scheme: dark;
  /* Цвета логотипа (src/brand/alibi-bot-avatar-v1.png): глубокий синий фон и ледяной голубой */
  --night: #030f27;        /* фон страницы, как фон логотипа */
  --deep: #0a1a35;         /* поверхность: карточки, панели */
  --deep-2: #10244a;       /* поверхность на поверхности, наведение */
  --line: #1b3358;         /* границы и разделители */
  --fog: #e8f1fb;          /* основной текст */
  --mist: #8ea5c4;         /* второстепенный текст */
  --accent: #1ed2f4;       /* бренд, главное действие, активное соединение (голубой логотипа) */
  --accent-hover: #63e3f8; /* главная кнопка под курсором */
  --accent-deep: #0180c7;  /* тень ленты логотипа: второй тон для иллюстраций */
  --accent-ink: #021430;   /* текст на голубом */
  --accent-glow: rgba(30, 210, 244, .14);
  --amber: #ffb547;        /* внимание: ждёт подключения, тестовый режим */
  --coral: #ff6b6b;        /* ошибка, отключено */
  --leaf: #3ddc84;         /* оплачено, всё хорошо */

  /* Шрифты: Geologica для заголовков, Onest для текста, JetBrains Mono для ключей и кодов */
  --font-display: "Geologica", "Onest", system-ui, sans-serif;
  --font-text: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Шкала текста (1.25) */
  --t-xs: .8125rem;   /* 13 */
  --t-sm: .9375rem;   /* 15 */
  --t-md: 1.0625rem;  /* 17, основной */
  --t-lg: 1.375rem;   /* 22 */
  --t-xl: 1.875rem;   /* 30 */
  --t-2xl: clamp(2.25rem, 6vw, 3.75rem); /* 36..60, только главный заголовок */

  /* Отступы: шаг 4 px */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;

  /* Скругления: у каждого уровня своё */
  --r-chip: 999px;   /* статусы, метки */
  --r-control: 12px; /* кнопки, поля */
  --r-panel: 20px;   /* карточки и окна */

  /* Тени: только для всплывающего, карточки на фоне без теней */
  --shadow-pop: 0 18px 50px rgba(0, 0, 0, .45);

  /* Движение */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --d-fast: 140ms;
  --d-slow: 900ms;

  --content: 1080px;
}