/* * Sistema de temas via CSS custom properties. Cada tema define a mesma * lista de variáveis — trocar de tema é só trocar o atributo * `data-theme` no , sem tocar em nenhum outro CSS/JS. * * As quatro "cores de resposta" (--answer-1..4) são fixas em todos os * temas (vermelho/azul/amarelo/verde, como no padrão Kahoot que os * jogadores já reconhecem de longe na tela do celular) — só o resto da * paleta muda por tema. */ /* Fontes do Fogueira Design System 1.0 (self-host, sem CDN — ver * docs/DECISIONS.md e docs/engineering/DESIGN_SYSTEM_1.0.md) — arquivos em * public/shared/fonts/, licença SIL Open Font License (LICENSE.txt ao lado de * cada família). `font-display: swap` pra nunca segurar a renderização do texto * esperando a fonte baixar; o fallback da lista em --font-* cobre o intervalo. * * DECISÃO OFICIAL (UX-02): a tipografia do Fogueira 1.0 é **Inter** para TUDO — * body, headings, display, números, ranking, pódio, dashboard. JetBrains Mono * segue como a família monoespaçada (código/PIN/tokens). A antiga família de * DISPLAY 'General Sans' era uma variável FANTASMA (sem @font-face — Fontshare * bloqueada pela rede, ausente do npm/Fontsource): todos os títulos já caíam no * fallback system-ui. Ela foi ELIMINADA — `--font-display` agora aponta para * Inter (a mesma família já carregada), dando ao produto uma voz tipográfica * única e real, sem introduzir dependência externa nova. Ver a seção de * tipografia abaixo. */ @font-face { font-family: 'Inter'; src: url('./fonts/inter/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('./fonts/inter/inter-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('./fonts/inter/inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('./fonts/inter/inter-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('./fonts/jetbrains-mono/jetbrains-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('./fonts/jetbrains-mono/jetbrains-mono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('./fonts/jetbrains-mono/jetbrains-mono-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root, [data-theme='fogueira'] { --bg: #1a0f1f; --bg-gradient: radial-gradient(ellipse at 50% -10%, #3a1a2e 0%, #1a0f1f 55%, #0d0810 100%); --bg-elevated: #2a1830; --bg-elevated-2: #3a2440; --text: #fff6ec; --text-muted: #cbb8c9; --primary: #ff7a3d; --primary-dark: #e0551a; --primary-contrast: #1a0f1f; --accent: #ffc857; --success: #35d07f; --danger: #ff4d5e; --warning: #ffc857; --border: rgba(255, 246, 236, 0.12); --shadow: 0 12px 32px rgba(0, 0, 0, 0.45); /* Design system do redesign do painel admin (2026-07-27) — paleta "fogueira à noite" refinada, mais escura/saturada que --bg/--bg-elevated/ --text/--text-muted acima. Só consumida pelos componentes novos em public/css/admin/, carregados só nas páginas do admin — as outras 4 telas (jogador/apresentador/entrada/colaborador) continuam usando as variáveis de sempre, sem nenhuma mudança visual. Dentro do bloco de tema (não num :root solto) de propósito: já fica pronto pra um tenant futuro sobrescrever via [data-theme='outro-nome'], sem precisar de nenhuma mudança estrutural quando isso for implementado. --accent-ember NÃO existe aqui: o valor #FF7A3D pedido no SPEC é idêntico a --primary já existente (usado por .btn em todo o app) — reaproveitado direto, não duplicado sob nome novo. */ --bg-base: #150e1f; --bg-surface: #211730; --bg-surface-raised: #2c2140; --text-primary: #f5f1ea; --text-secondary: #a99fbd; } /* =================================================================== * SKINS LEGADOS DE SALA (oceano / floresta / neon) — FORA do DS 1.0 * =================================================================== * DECISÃO OFICIAL (UX-02): a identidade visual do Fogueira 1.0 é ÚNICA, com os * três modos oficiais Fogueira Light/Dark/Soft (blocos [data-theme='fogueira-*'] * mais abaixo). Oceano/Floresta/Neon NÃO são temas estruturais do Design System * — são skins de sala LEGADOS, mantidos aqui APENAS para compatibilidade: * `rooms.theme` é NOT NULL e salas já criadas podem apontar para eles * (aplicados em presenter/join/player via room.theme). Removê-los seria * destrutivo (quebraria a renderização dessas salas) — por isso ficam, * intactos e reversíveis, como skins desacoplados do DS principal. * NÃO usar estes temas em telas novas nem como base de componentes do DS 1.0. * A retirada da OPÇÃO de escolhê-los ao criar sala (mantendo o suporte de * renderização para salas antigas) é uma fatia de migração posterior. * Ver docs/engineering/DESIGN_SYSTEM_1.0.md > "Temas e skins legados". */ [data-theme='oceano'] { --bg: #06131f; --bg-gradient: radial-gradient(ellipse at 50% -10%, #0d3352 0%, #06131f 55%, #030a12 100%); --bg-elevated: #0e2438; --bg-elevated-2: #123049; --text: #eaf6ff; --text-muted: #a9c4d6; --primary: #2fb2e0; --primary-dark: #1a8bb8; --primary-contrast: #06131f; --accent: #6ee7d8; --success: #35d07f; --danger: #ff5d6c; --warning: #ffce54; --border: rgba(234, 246, 255, 0.12); --shadow: 0 12px 32px rgba(0, 0, 0, 0.45); } [data-theme='floresta'] { --bg: #0c1c11; --bg-gradient: radial-gradient(ellipse at 50% -10%, #1c3a24 0%, #0c1c11 55%, #061009 100%); --bg-elevated: #16301e; --bg-elevated-2: #1e3d27; --text: #eefaf0; --text-muted: #accab4; --primary: #57c26a; --primary-dark: #3a9a4c; --primary-contrast: #0c1c11; --accent: #d8e85a; --success: #57c26a; --danger: #ff5d5d; --warning: #f2b84b; --border: rgba(238, 250, 240, 0.12); --shadow: 0 12px 32px rgba(0, 0, 0, 0.45); } [data-theme='neon'] { --bg: #0a0a14; --bg-gradient: radial-gradient(ellipse at 50% -10%, #24123f 0%, #0a0a14 55%, #050508 100%); --bg-elevated: #17122b; --bg-elevated-2: #201a3a; --text: #f3edff; --text-muted: #b6a9d9; --primary: #c04df0; --primary-dark: #9a2fd0; --primary-contrast: #0a0a14; --accent: #4de2f0; --success: #3ef2a3; --danger: #ff4d8d; --warning: #f5e457; --border: rgba(243, 237, 255, 0.14); --shadow: 0 12px 32px rgba(0, 0, 0, 0.5); } /* --- Ponte de tokens do FDS (Fogueira Design System) -------------------- * Os tokens "de superfície" que os componentes .ds-* consomem * (--bg-base/--bg-surface/--bg-surface-raised/--text-primary/--text-secondary) * nasceram só no bloco do tema 'fogueira' acima — e ELE os declara sob o * seletor `:root` (que casa com em QUALQUER tema), não sob * `[data-theme='fogueira']`. Resultado do bug: nos temas oceano/floresta/neon * as superfícies do FDS ficavam com a cor do fogueira (card roxo num tema * azul). Aqui esses tokens são DERIVADOS, em cada um desses três temas, dos * tokens que o próprio tema já define (--bg/--bg-elevated/--bg-elevated-2/ * --text/--text-muted). Especificidade `[data-theme]` (0,1,0) vence o `:root` * do bloco fogueira (0,1,0) por vir depois na cascata. Puramente ADITIVO: * esses três blocos não declaravam esses tokens; nenhum valor existente é * alterado, e o tema fogueira (default) fica idêntico. Ver docs/DECISIONS.md * > "Fogueira Design System (FDS)". */ [data-theme='oceano'], [data-theme='floresta'], [data-theme='neon'] { --bg-base: var(--bg); --bg-surface: var(--bg-elevated); --bg-surface-raised: var(--bg-elevated-2); --text-primary: var(--text); --text-secondary: var(--text-muted); } /* Cores das 4 alternativas: iguais em todos os temas, com formas para reforçar a diferença sem depender só da cor (acessibilidade a daltonismo). */ :root { --answer-1: #e21b3c; /* triângulo */ --answer-2: #1368ce; /* losango */ --answer-3: #d89e00; /* círculo */ --answer-4: #26890c; /* quadrado */ } /* Tipografia/espaçamento/raio/sombra do design system do admin (2026-07-27) — fora do bloco de tema de propósito, igual às cores das alternativas acima: não dependem de qual tema de cor está ativo, então não faz sentido reavaliar por tema. Só consumidas pelos componentes novos em public/css/admin/ (ver comentário no bloco 'fogueira' acima). */ :root { /* Tipografia oficial do Fogueira 1.0 (UX-02): Inter para body E display — display não é uma família diferente, é Inter em pesos/tamanhos maiores. A antiga 'General Sans' (fantasma, sem arquivo) foi eliminada; --font-display é mantida como token semântico (telas consomem var(--font-display)) mas agora resolve para Inter real. Números/ranking/pódio também usam Inter. */ --font-display: 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-base: 16px; --font-size-lg: 18px; --font-size-xl: 22px; --font-size-2xl: 28px; --font-size-3xl: 36px; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-normal: 1.5; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --radius-control: 8px; --radius-card: 12px; --radius-pill: 999px; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.24); --shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.4); /* Glow "pulso de brasa" do countdown de sala agendada e do indicador de sala ao vivo (ver Fase 0/animação em public/css/admin/admin.css) — é a cor que o SPEC chamava de "--accent-flame" sem definir separado; como o rgba abaixo já carrega a cor certa, não criamos uma variável de cor nova só pra isso. */ --shadow-ember-glow: 0 0 12px rgba(255, 177, 61, 0.3); } /* =================================================================== * MODOS OFICIAIS DO FOGUEIRA DESIGN SYSTEM 1.0 — Light / Dark / Soft * =================================================================== * DECISÃO OFICIAL (UX-02): estes três modos ([data-theme='fogueira-dark'], * ['fogueira-light'], ['fogueira-soft']) são a IDENTIDADE VISUAL ÚNICA e oficial * do Fogueira 1.0 — para TODAS as experiências (jogador, apresentador, * organização, Super Admin, eventos, torneios, ranking, pódio, relatórios), não * só a tela do participante onde nasceram (revitalização 2026-08, trocáveis pelo * jogador via playerTheme.js). São a base do DS 1.0; telas novas nascem sobre * eles. * * HIERARQUIA DE TOKENS (Foundation → Semantic → Component): * - FOUNDATION: escala crua de espaço/raio/tipografia/sombra (blocos :root * "Tipografia/espaçamento/raio/sombra" acima) — invariante ao modo. * - SEMANTIC: papéis de cor/superfície que cada MODO redefine — superfícies * (--bg / --bg-base / --bg-surface / --bg-surface-raised / --bg-primary / * --bg-secondary), texto (--text / --text-primary / --text-secondary), * marca (--primary / --accent / --accent-primary / --accent-secondary), * feedback (--success / --danger / --warning / --info), estrutura * (--border / --border-strong / --focus / --shadow*), e as 4 respostas * (--answer-1..4 / --answer-a..d, fixas por reconhecimento, só ajustadas * por modo quando o contraste exige). Cada modo define o CONJUNTO COMPLETO. * - COMPONENT: os .ds-* consomem só tokens semânticos — nunca cores cruas. * * NOTA DE CONVERGÊNCIA (pendência registrada): o tema clássico 'fogueira' * (default global fixo em data-theme="fogueira" no HTML e default de * rooms.theme) é um DARK legado, próximo mas não idêntico ao 'fogueira-dark' * oficial. Convergir o default global de 'fogueira' → 'fogueira-dark' mexe no * default de arquivos compartilhados e exige verificação visual tela a tela — * é uma fatia de MIGRAÇÃO posterior, fora desta unidade de fundação. Até lá, * 'fogueira' clássico permanece intacto (compatibilidade). * Ver docs/engineering/DESIGN_SYSTEM_1.0.md. */ /* Tokens semânticos NOVOS no :root (aliases dos existentes + defaults) — * puramente aditivo: nenhuma tela usa estes nomes ainda, então declarar * aqui não muda nada; serve de fallback e é sobrescrito por cada tema. */ :root { --bg-primary: var(--bg); --bg-secondary: var(--bg-elevated); --bg-surface: var(--bg-elevated); --bg-surface-elevated: var(--bg-elevated-2); --accent-primary: var(--primary); --accent-secondary: var(--accent); --accent-glow: rgba(255, 122, 61, 0.35); --info: #4aa3e0; --border-strong: var(--border); --shadow-elevated: var(--shadow); --focus: var(--accent); --answer-a: var(--answer-1); --answer-b: var(--answer-2); --answer-c: var(--answer-3); --answer-d: var(--answer-4); --answer-ink: #ffffff; } /* ---- TEMA 1 — FOGUEIRA DARK (principal, brasa noturna) ---- */ [data-theme='fogueira-dark'] { --bg: #120a17; --bg-gradient: radial-gradient(ellipse at 50% -12%, #3a1a2c 0%, #1a0e1f 48%, #0b060f 100%); --bg-elevated: #211433; --bg-elevated-2: #2f1d42; --text: #fdf3ea; --text-muted: #c9b6cf; --primary: #ff7a3d; --primary-dark: #e0551a; --primary-contrast: #150c1c; --accent: #ffc861; --success: #35d07f; --danger: #ff5566; --warning: #ffc861; --border: rgba(255, 243, 234, 0.13); --shadow: 0 14px 38px rgba(0, 0, 0, 0.5); --bg-base: #100915; --bg-surface: #1c1129; --bg-surface-raised: #281838; --text-primary: #fdf3ea; --text-secondary: #b7a6c4; --bg-primary: var(--bg); --bg-secondary: var(--bg-elevated); --bg-surface-elevated: var(--bg-elevated-2); --accent-primary: var(--primary); --accent-secondary: var(--accent); --accent-glow: rgba(255, 122, 61, 0.45); --info: #56b6f0; --border-strong: rgba(255, 243, 234, 0.24); --shadow-elevated: 0 20px 52px rgba(0, 0, 0, 0.62); --focus: #ffc861; --answer-a: #e21b3c; --answer-b: #1368ce; --answer-c: #d89e00; --answer-d: #26890c; --answer-1: var(--answer-a); --answer-2: var(--answer-b); --answer-3: var(--answer-c); --answer-4: var(--answer-d); --answer-ink: #ffffff; } /* ---- TEMA 2 — FOGUEIRA LIGHT (claro, alta legibilidade ao ar livre) ---- */ [data-theme='fogueira-light'] { --bg: #f6efe7; --bg-gradient: radial-gradient(ellipse at 50% -12%, #ffe6cf 0%, #f7efe6 46%, #efe4d7 100%); --bg-elevated: #fffdfa; --bg-elevated-2: #f0e5d8; --text: #2a1a20; --text-muted: #6f5a63; --primary: #e0551a; --primary-dark: #b8410f; --primary-contrast: #fffdfa; --accent: #c67f00; --success: #1e9e5a; --danger: #d63343; --warning: #c67f00; --border: rgba(42, 26, 32, 0.14); --shadow: 0 12px 30px rgba(120, 74, 40, 0.16); --bg-base: #f6efe7; --bg-surface: #fffdfa; --bg-surface-raised: #fbf4ec; --text-primary: #2a1a20; --text-secondary: #6f5a63; --bg-primary: var(--bg); --bg-secondary: var(--bg-elevated); --bg-surface-elevated: var(--bg-elevated-2); --accent-primary: var(--primary); --accent-secondary: var(--accent); --accent-glow: rgba(224, 85, 26, 0.22); --info: #2f7fc4; --border-strong: rgba(42, 26, 32, 0.26); --shadow-elevated: 0 18px 44px rgba(120, 74, 40, 0.2); --focus: #e0551a; --answer-a: #c81733; --answer-b: #14559f; --answer-c: #a97b00; --answer-d: #1f6e0a; --answer-1: var(--answer-a); --answer-2: var(--answer-b); --answer-3: var(--answer-c); --answer-4: var(--answer-d); --answer-ink: #ffffff; } /* ---- TEMA 3 — FOGUEIRA SOFT (moderno, dessaturado, leitura confortável) ---- */ [data-theme='fogueira-soft'] { --bg: #e7e4ee; --bg-gradient: radial-gradient(ellipse at 50% -12%, #ece3ee 0%, #e7e4ed 50%, #ded9e8 100%); --bg-elevated: #f3f1f7; --bg-elevated-2: #ddd8e6; --text: #322e3c; --text-muted: #6d6880; --primary: #cf6b41; --primary-dark: #b0552f; --primary-contrast: #f7f5fa; --accent: #c49a4e; --success: #3a9c6e; --danger: #c9556a; --warning: #bf8f3e; --border: rgba(50, 46, 60, 0.13); --shadow: 0 10px 26px rgba(60, 52, 78, 0.12); --bg-base: #e2dfe9; --bg-surface: #f3f1f7; --bg-surface-raised: #ebe8f1; --text-primary: #322e3c; --text-secondary: #6d6880; --bg-primary: var(--bg); --bg-secondary: var(--bg-elevated); --bg-surface-elevated: var(--bg-elevated-2); --accent-primary: var(--primary); --accent-secondary: var(--accent); --accent-glow: rgba(207, 107, 65, 0.16); --info: #5a86bf; --border-strong: rgba(50, 46, 60, 0.24); --shadow-elevated: 0 16px 38px rgba(60, 52, 78, 0.16); --focus: #cf6b41; --answer-a: #bd394f; --answer-b: #3a6aa6; --answer-c: #a67d3a; --answer-d: #3f8055; --answer-1: var(--answer-a); --answer-2: var(--answer-b); --answer-3: var(--answer-c); --answer-4: var(--answer-d); --answer-ink: #ffffff; }