/* apps/animate-hub/tokens.css — Playful Jackbox mood, inherited from apps/animate-party/tokens.css (которая унаследовала из apps/animate). В отличие от animate-party (чистый веб, без TG) — hub-поверхность здесь снова настоящий Telegram Mini App, поэтому цветовые токены возвращаются к var(--tg-theme-*, fallback) паттерну из apps/animate/tokens.css, с теми же fallback-значениями и тем же light/dark блоком. Один и тот же файл используется всеми тремя поверхностями (см. DESIGN.md): на display/browser-join-fallback --tg-theme-* переменные просто не заданы браузером, поэтому они автоматически падают на light fallback — эти две поверхности ведут себя как в animate-party (константный светлый веб) без какого-либо дополнительного кода. Дальше нужно только не пускать на них :root[data-theme="dark"] — см. комментарий над dark-блоком. */ :root { /* ── Colors — TG-тема с fallback, как в animate (НЕ как в animate-party) ── */ --c-bg: var(--tg-theme-bg-color, #fff9f0); --c-bg-elevated: var(--tg-theme-secondary-bg-color, #fff2dd); --c-text: var(--tg-theme-text-color, #171410); --c-text-muted: var(--tg-theme-hint-color, #8a8074); --c-accent: #ff5a36; --c-accent-fg: #fff9f0; --c-ink: #171410; --c-line: #e8dfd0; /* Функциональные состояния — унаследовано из animate-party 1:1 */ --c-success: var(--palette-5); --c-success-bg: #eaf2ff; --c-error: #d64545; --c-error-bg: #ffe3dc; /* Drawing palette — унаследовано 1:1, для canvas-движка при/party-игре */ --palette-1: #171410; --palette-2: #ff5a36; --palette-3: #ffc93c; --palette-4: #4fb477; --palette-5: #3d8bff; --palette-6: #a35bff; --palette-7: #ff6fb0; /* ── Shape — унаследовано 1:1 ── */ --r-card: 16px; --r-sm: 10px; --r-pill: 999px; --bw-thick: 2.5px; /* ── Spacing (8-base) — унаследовано 1:1 ── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 40px; /* ── Typography — базовая шкала унаследована 1:1 ── */ --fs-label: 12px; --fs-caption: 13px; --fs-body: 16px; --fs-title: 20px; --fs-display: 28px; /* Display-only шкала (для display-waiting) — унаследовано 1:1 из animate-party */ --fs-room-label: 24px; --fs-room-body: 40px; --fs-room-timer: 56px; --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 — унаследовано 1:1, плюс два новых под hub-экраны ── */ --sz-icon: 56px; --sz-icon-sm: 28px; /* переиспользуется для инлайн-иконок в share-screen-link (ссылка/копировать) */ --sz-icon-card: 40px; /* новое — значок игры на карточке game-list: крупнее icon-sm (карточка — доминирующий элемент экрана, DESIGN_LANGUAGE.md Hierarchy), но меньше icon (не статусный full-screen символ) */ --sz-qr: 200px; /* новое — размер QR на display-waiting и share-screen-link; рабочий дефолт, не валидирован визуально (в animate-party QR не имел отдельного токена размера) */ --sz-swatch: 24px; --tap-min: 44px; /* ── Motion — унаследовано 1:1. Hub-навигация использует только --transition-base, --transition-reveal остаётся исключительно за party-игрой (DESIGN_LANGUAGE.md Motion) ── */ --dur-fast: 150ms; --dur-reveal: 350ms; --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); --transition-reveal: var(--dur-reveal) var(--ease-spring); } /* Тёмная тема — ТОЛЬКО для hub-поверхности. Селектор нарочно требует [data-surface="hub"] на : hub.html при старте ставит этот атрибут (плюс data-theme, если Telegram сообщил тему через initData/themeParams), display.html и join.html (browser-join-fallback) его никогда не ставят — поэтому обе продолжают жить в light fallback-значениях выше, независимо от системной темы устройства, как решено в DESIGN_LANGUAGE.md. */ :root[data-surface="hub"][data-theme="dark"] { --c-bg: var(--tg-theme-bg-color, #17140f); --c-bg-elevated: var(--tg-theme-secondary-bg-color, #221d15); --c-text: var(--tg-theme-text-color, #fbf5ea); --c-text-muted: var(--tg-theme-hint-color, #a89c89); --c-accent: #ff7350; --c-accent-fg: #17140f; --c-ink: #fbf5ea; --c-line: #362f24; } @media (prefers-color-scheme: dark) { :root[data-surface="hub"]:not([data-theme="light"]) { --c-bg: var(--tg-theme-bg-color, #17140f); --c-bg-elevated: var(--tg-theme-secondary-bg-color, #221d15); --c-text: var(--tg-theme-text-color, #fbf5ea); --c-text-muted: var(--tg-theme-hint-color, #a89c89); --c-accent: #ff7350; --c-accent-fg: #17140f; --c-ink: #fbf5ea; --c-line: #362f24; } } /* Табличные цифры — таймер/очки/код комнаты нигде не должны "прыгать" по ширине. */ .tabular-nums { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-reveal: 0ms; } }