/*
 * Дизайн-токены в духе Rave. Палитра взята из скриншотов самого Rave
 * и лендинга rave.io: почти чёрный фон с фиолетовым оттенком, бело-стеклянные
 * элементы и одна яркая вещь — цвет подсвеченного видео. Свой цвет у интерфейса
 * один: белый (как круглая кнопка внизу чата в Rave); остальной цвет приходит
 * из размытого постера ролика и из «северного сияния» на лендинге Rave
 * (индиго, пурпур, оранжевый и синий пятна на тёмной основе).
 *
 * Шрифты. У Rave это Poppins (текст) и Fjalla One (заголовки), но кириллицы
 * в них нет, поэтому берутся ближайшие аналоги с кириллицей: Montserrat
 * и Oswald.
 *
 * Тёмная тема одна: у Rave светлой нет.
 */

:root {
  --bg: #07050f;

  --ink: #ffffff;
  --ink-2: rgba(255, 255, 255, .82);
  --muted: rgba(255, 255, 255, .58);
  --faint: rgba(255, 255, 255, .36);

  /* Стекло: полупрозрачные поверхности поверх подсвеченного фона */
  --glass: rgba(18, 15, 38, .55);
  --glass-1: rgba(255, 255, 255, .07);
  --glass-2: rgba(255, 255, 255, .12);
  --glass-3: rgba(255, 255, 255, .2);
  --line: rgba(255, 255, 255, .1);
  --line-2: rgba(255, 255, 255, .2);

  /* Верхняя панель Rave — тёмно-синий глянцевый градиент */
  --toolbar: linear-gradient(180deg, rgba(38, 60, 128, .8) 0%, rgba(11, 15, 38, .86) 100%);

  --scrim: rgba(4, 3, 12, .62);
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, .85), 0 2px 8px rgba(0, 0, 0, .4);
  --focus: rgba(255, 255, 255, .75);

  /* Пятна «северного сияния» с rave.io */
  --blob-1: #4b2bd6;
  --blob-2: #d1239b;
  --blob-3: #ff6a2b;
  --blob-4: #1f8bff;

  --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Oswald", "Fjalla One", Impact, "Arial Narrow", sans-serif;

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Движение. Выход плавный, вход с перелётом (пружина) */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.64, 0, .78, 0);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --d-fast: .16s;
  --d-base: .3s;
  --d-slow: .6s;

  --top-h: 56px;
  --side-w: clamp(320px, 26vw, 440px);

  color-scheme: dark;
}

/* Повышенная контрастность: линии и подписи заметнее */
@media (prefers-contrast: more) {
  :root {
    --line: rgba(255, 255, 255, .28);
    --line-2: rgba(255, 255, 255, .5);
    --muted: rgba(255, 255, 255, .8);
    --glass: rgba(10, 8, 24, .85);
  }
}