/* ─────────────────────────────────────────────────────────────────────────────
   tokens.css — токены интерфейса (цвета, типографика, метрики).
   Слепок снят с Suno RPC (desktop/src/index.html) 2026-09-15.

   Подключать первым, до своих стилей:
       <link rel="stylesheet" href="brand/tokens.css">
   Дальше — либо brand/ui.css с готовыми компонентами, либо свои правила
   поверх этих переменных. Машиночитаемая версия палитры — brand/colors.json.

   Тема одна — тёмная. Светлой нет намеренно: приложения этого набора живут
   поверх плеера и Discord, и светлое окно среди них выглядит чужим.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  /* ── Поверхности ────────────────────────────────────────────────────────
     Шкала zinc. bg4 ТЕМНЕЕ bg3 — это hover-состояние: в тёмном окне
     осветление на наведении убивает глубину. */
  --bg:#0e0e10;    /* фон окна            */
  --bg2:#18181b;   /* карточки, панели    */
  --bg3:#27272a;   /* поля, границы       */
  --bg4:#1c1c1f;   /* hover поверх bg3    */

  /* ── Текст ───────────────────────────────────────────────────────────── */
  --text:#f4f4f5;  /* основной            */
  --text2:#a1a1aa; /* подписи, вторичный  */
  --text3:#52525b; /* подсказки, значения */

  /* ── Акцент ──────────────────────────────────────────────────────────────
     violet-500/400. Тот же #8b5cf6 — цвет глаз персонажа и его обводки:
     менять акцент, не меняя персонажа, нельзя. */
  --accent:#8b5cf6;       /* плашки, рамка окна, фокус, прогресс */
  --accent2:#a78bfa;      /* акцентный ТЕКСТ и hover             */
  --accent-soft:#2a2140;  /* акцент, растворённый в фоне         */
  --accent-muted:#7654c4; /* второстепенная графика              */

  /* ── Состояния ──────────────────────────────────────────────────────────
     Только состояния, не декор. */
  --green:#22c55e;
  --yellow:#eab308;
  --red:#ef4444;

  /* ── Полоса заголовка ───────────────────────────────────────────────────
     Если окно без системной рамки (titleBarStyle:'hidden'), ЭТИ ЖЕ значения
     обязаны стоять в main.js у titleBarOverlay — иначе полоса и системные
     кнопки разъедутся по цвету и высоте. */
  --tb:var(--accent);
  --tb-h:36px;

  /* ── Типографика ────────────────────────────────────────────────────────
     Основной шрифт — моноширинный: окно техническое, в нём постоянно
     соседствуют цифры времени, ссылки и логи. Пропорциональный --sans —
     для длинных текстов (страница инструкции). */
  --mono:"Cascadia Code","Consolas",monospace;
  --sans:"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;

  --fs-body:13px;     /* база                                   */
  --fs-title:15px;    /* заголовок вкладки, крупная строка       */
  --fs-label:12.5px;  /* пункты меню, кнопки                    */
  --fs-note:11.5px;   /* подписи полей, мелкий текст в карточке  */
  --fs-hint:11px;     /* подсказки под полем                     */
  --fs-micro:10px;    /* служебные пометки                       */
  --fs-num:22px;      /* число в плитке статистики               */

  /* ── Метрики ─────────────────────────────────────────────────────────────
     Радиусы: 12 — карточка, 8 — кнопка и пункт меню, 6 — поле,
     999 — «пилюля». Иного не заводить. */
  --r-card:12px;
  --r-btn:8px;
  --r-field:6px;
  --r-pill:999px;

  --pad-content:26px 32px;  /* внутренние поля области контента */
  --pad-card:14px 16px;
  --gap:8px;
  --gap-lg:14px;

  --sidebar-w:190px;

  /* ── Движение ────────────────────────────────────────────────────────────
     Коротко и без «пружин»: интерфейс сопровождает музыку, а не соревнуется
     с ней за внимание. */
  --t-fast:.15s;
  --t-med:.22s;
  --t-slow:.3s;

  /* ── Тень персонажа ─────────────────────────────────────────────────────
     Акцент с прозрачностью: без неё стикер на тёмном фоне читается как
     наклейка, положенная поверх окна. */
  --mascot-shadow:drop-shadow(0 3px 10px rgba(139,92,246,.28));
}