/* apps/animate-party/tokens.css — Playful Jackbox mood, inherited from apps/animate/tokens.css
   Чистый веб, без Telegram — никаких --tg-theme-* переменных, значения заданы напрямую.
   Один визуальный режим (без light/dark toggle) — см. DESIGN_LANGUAGE.md "What this is NOT". */

:root {
  /* ── Colors — унаследовано из animate/tokens.css 1:1 (те же fallback-значения, теперь база) ── */
  --c-bg:          #fff9f0;
  --c-bg-elevated: #fff2dd;
  --c-text:        #171410;
  --c-text-muted:  #8a8074;

  --c-accent:      #ff5a36;
  --c-accent-fg:   #fff9f0;
  --c-ink:         #171410;
  --c-line:        #e8dfd0;

  /* Функциональные состояния (форма/reveal) — не категориальная система данных,
     это единственное новое дополнение к цветовой палитре animate, не описанное в
     DESIGN_LANGUAGE.md напрямую, но необходимое для error/success-фидбека UI */
  --c-success:    var(--palette-5); /* переиспользует синий из палитры рисования — "верно" на reveal, "готово" в ростере */
  --c-success-bg: #eaf2ff;
  --c-error:      #d64545;
  --c-error-bg:   #ffe3dc;

  /* Drawing palette — canvas-движок из apps/animate/public/app.js, тот же набор */
  --palette-1: #171410; /* black */
  --palette-2: #ff5a36; /* red-orange */
  --palette-3: #ffc93c; /* yellow */
  --palette-4: #4fb477; /* green */
  --palette-5: #3d8bff; /* blue */
  --palette-6: #a35bff; /* purple */
  --palette-7: #ff6fb0; /* pink */

  /* ── Shape — унаследовано из animate 1:1 ── */
  --r-card: 16px;
  --r-sm:   10px;
  --r-pill: 999px;
  --bw-thick: 2.5px;

  /* ── Spacing (8-base) — унаследовано из animate 1:1 ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 40px;

  /* ── Typography — базовая шкала унаследована из animate 1:1 ── */
  --fs-label:   12px;
  --fs-caption: 13px;
  --fs-body:    16px;
  --fs-title:   20px;
  --fs-display: 28px; /* степ-индикатор, статусы на телефоне — как в animate */

  /* Новое: display-only шкала — для чтения с 2-4м (DESIGN_LANGUAGE.md "Display type scale") */
  --fs-room-label: 24px;  /* второстепенные подписи на display — имена игроков, статусы */
  --fs-room-body:  40px;  /* промпт, реальный ответ на reveal, лидерборд-строки */
  --fs-room-timer: 56px;  /* таймер — самый читаемый элемент display, кроме кода комнаты */
  --fs-room-code:  88px;  /* код комнаты в лобби — критично для набора на телефоне издалека */

  --font-display: 'Fredoka', var(--font-body);
  --font-body: -apple-system, "SF Pro Text", ui-sans-serif, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ── Sizes ── */
  --sz-icon:    56px; /* крупные статусные иконки на display (корона лидера, галочка) — как в animate */
  --sz-icon-sm: 28px; /* новое: инлайн-иконки на телефоне (таймер, голос, host-бейдж) — animate таких не имел */
  --sz-swatch:  24px; /* палитра рисования — как в animate */
  --tap-min:    44px;

  /* ── Motion — новое, animate не декларировал (DESIGN_LANGUAGE.md "Motion") ── */
  --dur-fast:   150ms; /* верхняя граница обычных переходов — под таймером ничего не должно тормозить */
  --dur-reveal: 350ms; /* единственное исключение — пружинящий reveal (кто кого обманул + очки) */
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-base:   var(--dur-fast) var(--ease-out);     /* все обычные UI-переходы */
  --transition-reveal: var(--dur-reveal) var(--ease-spring); /* только showcase-reveal */
}

/* Табличные цифры — таймер и очки нигде не должны "прыгать" по ширине.
   Применять классом на любом элементе с таймером/счётом (DESIGN_LANGUAGE.md "Numbers"). */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Уважение к системной настройке уменьшенного движения — гасит даже reveal-пружину */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-reveal: 0ms;
  }
}