/* ============================================================================ tokens.css — identidade visual da Trilha do Código. As três telas (equipe, telão, painel) importam SÓ este arquivo de tokens. Regras: - Nenhum hex solto em outro arquivo CSS ou em style inline. Use var(--tc-*). - Prefixo obrigatório: --tc- (Trilha do Código). - Paleta clara é a base em :root. A escura redefine SOMENTE os tokens que mudam. - Tema: automático por prefers-color-scheme; forçado por ou . - Modo projeção: amplia a tipografia (RF-25). Dependências externas (CDN, carregadas no de cada tela): Google Fonts: Inter, Poppins, Fira Code Phosphor Icons: https://cdnjs.cloudflare.com/ajax/libs/phosphor-icons/... Tailwind Play CDN (utilitários; os tokens abaixo é que mandam nas cores) ========================================================================= */ :root { color-scheme: light; /* ── Marca ───────────────────────────────────────────────────────────── */ --tc-marca: #0891b2; /* ciano — identidade da UC */ --tc-marca-forte: #0e7490; --tc-marca-suave: #cffafe; --tc-destaque: #f97316; /* laranja — ação, cronômetro, chamada */ --tc-destaque-forte: #ea580c; --tc-destaque-suave: #ffedd5; /* ── Superfícies e texto ─────────────────────────────────────────────── */ --tc-fundo: #f8fafc; --tc-fundo-alt: #f1f5f9; --tc-superficie: #ffffff; --tc-superficie-alt: #f8fafc; --tc-superficie-elevada: #ffffff; --tc-borda: #e2e8f0; --tc-borda-forte: #cbd5e1; --tc-texto: #0f172a; --tc-texto-suave: #475569; --tc-texto-fraco: #64748b; --tc-texto-invertido: #ffffff; /* ── Estados semânticos (AA sobre --tc-superficie) ───────────────────── */ --tc-acerto: #15803d; --tc-acerto-suave: #dcfce7; --tc-erro: #b91c1c; --tc-erro-suave: #fee2e2; --tc-alerta: #b45309; --tc-alerta-suave: #fef3c7; --tc-info: #1d4ed8; --tc-info-suave: #dbeafe; --tc-neutro: #475569; --tc-neutro-suave: #e2e8f0; /* ── Casas do tabuleiro (TIPOS_CASA) ─────────────────────────────────── */ --tc-casa-comum: #e2e8f0; --tc-casa-comum-texto: #334155; --tc-casa-bonus: #f59e0b; /* ⚡ */ --tc-casa-armadilha: #dc2626; /* ☠ */ --tc-casa-poder: #8b5cf6; /* 🎁 */ --tc-casa-checkpoint: #0891b2; /* ⚑ */ --tc-casa-final: #f97316; --tc-trilha: #cbd5e1; /* ── Cores das 8 equipes (espelham CORES em src/contrato.js) ─────────── */ --tc-equipe-ciano: #0891b2; --tc-equipe-laranja: #ea580c; --tc-equipe-violeta: #7c3aed; --tc-equipe-esmeralda: #059669; --tc-equipe-rubi: #e11d48; --tc-equipe-ambar: #b45309; --tc-equipe-indigo: #4f46e5; --tc-equipe-grafite: #475569; --tc-equipe-texto: #ffffff; /* cor do texto sobre o escudo, em qualquer tema */ /* ── Bloco de código (Fira Code) ─────────────────────────────────────── */ --tc-codigo-fundo: #0f172a; --tc-codigo-texto: #e2e8f0; --tc-codigo-linha: #64748b; /* numeração */ --tc-codigo-linha-alvo: #f97316; /* linha clicada no caça-bug */ --tc-codigo-linha-hover: #1e293b; --tc-codigo-lacuna: #22d3ee; /* ── Tipografia ──────────────────────────────────────────────────────── */ --tc-fonte-texto: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --tc-fonte-titulo: 'Poppins', var(--tc-fonte-texto); --tc-fonte-codigo: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --tc-escala: 1; /* multiplicador global; o telão sobe isto */ --tc-txt-xs: calc(0.75rem * var(--tc-escala)); --tc-txt-sm: calc(0.875rem * var(--tc-escala)); --tc-txt-md: calc(1rem * var(--tc-escala)); --tc-txt-lg: calc(1.125rem * var(--tc-escala)); --tc-txt-xl: calc(1.375rem * var(--tc-escala)); --tc-txt-2xl: calc(1.75rem * var(--tc-escala)); --tc-txt-3xl: calc(2.25rem * var(--tc-escala)); --tc-txt-4xl: calc(3rem * var(--tc-escala)); --tc-txt-5xl: calc(4rem * var(--tc-escala)); --tc-peso-normal: 400; --tc-peso-medio: 500; --tc-peso-forte: 600; --tc-peso-titulo: 700; --tc-altura-linha: 1.6; --tc-altura-titulo: 1.2; --tc-altura-codigo: 1.7; --tc-espacamento-titulo: -0.02em; /* ── Espaçamento (escala de 4px) ─────────────────────────────────────── */ --tc-esp-1: 0.25rem; --tc-esp-2: 0.5rem; --tc-esp-3: 0.75rem; --tc-esp-4: 1rem; --tc-esp-5: 1.5rem; --tc-esp-6: 2rem; --tc-esp-7: 3rem; --tc-esp-8: 4rem; /* ── Formas ──────────────────────────────────────────────────────────── */ --tc-raio-sm: 0.375rem; --tc-raio-md: 0.75rem; --tc-raio-lg: 1rem; --tc-raio-xl: 1.5rem; --tc-raio-pilula: 999px; --tc-borda-fina: 1px; --tc-borda-grossa: 2px; --tc-foco: 0 0 0 3px color-mix(in srgb, var(--tc-marca) 45%, transparent); --tc-sombra-sm: 0 1px 2px rgba(15, 23, 42, 0.08); --tc-sombra-md: 0 4px 12px rgba(15, 23, 42, 0.10); --tc-sombra-lg: 0 12px 32px rgba(15, 23, 42, 0.14); /* ── Movimento ───────────────────────────────────────────────────────── */ --tc-tempo-rapido: 120ms; --tc-tempo-medio: 260ms; --tc-tempo-lento: 600ms; --tc-tempo-peao: 900ms; /* deslize do escudo entre casas no telão */ --tc-curva: cubic-bezier(0.22, 1, 0.36, 1); /* ── Camadas ─────────────────────────────────────────────────────────── */ --tc-z-tabuleiro: 10; --tc-z-peao: 20; --tc-z-barra: 30; --tc-z-painel: 40; --tc-z-modal: 50; --tc-z-aviso: 60; /* ── Medidas de layout ───────────────────────────────────────────────── */ --tc-largura-equipe: 26rem; /* tela da equipe; desenhada para 360px */ --tc-largura-leitura: 68ch; --tc-alvo-toque: 2.75rem; /* mínimo de área tocável no celular */ } /* ── Tema escuro automático ─────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-tema='claro']) { color-scheme: dark; --tc-marca: #22d3ee; --tc-marca-forte: #67e8f9; --tc-marca-suave: #164e63; --tc-destaque: #fb923c; --tc-destaque-forte: #fdba74; --tc-destaque-suave: #7c2d12; --tc-fundo: #0b1220; --tc-fundo-alt: #0f172a; --tc-superficie: #111c30; --tc-superficie-alt: #16233b; --tc-superficie-elevada: #1b2942; --tc-borda: #23324e; --tc-borda-forte: #35476b; --tc-texto: #e8eef8; --tc-texto-suave: #b6c2d6; --tc-texto-fraco: #8ea0bb; --tc-texto-invertido: #0b1220; --tc-acerto: #4ade80; --tc-acerto-suave: #14532d; --tc-erro: #f87171; --tc-erro-suave: #7f1d1d; --tc-alerta: #fbbf24; --tc-alerta-suave: #78350f; --tc-info: #93c5fd; --tc-info-suave: #1e3a8a; --tc-neutro: #b6c2d6; --tc-neutro-suave: #23324e; --tc-casa-comum: #23324e; --tc-casa-comum-texto: #dbe4f0; --tc-casa-bonus: #fbbf24; --tc-casa-armadilha: #f87171; --tc-casa-poder: #a78bfa; --tc-casa-checkpoint: #22d3ee; --tc-casa-final: #fb923c; --tc-trilha: #35476b; --tc-equipe-ciano: #22d3ee; --tc-equipe-laranja: #fb923c; --tc-equipe-violeta: #a78bfa; --tc-equipe-esmeralda: #34d399; --tc-equipe-rubi: #fb7185; --tc-equipe-ambar: #fbbf24; --tc-equipe-indigo: #818cf8; --tc-equipe-grafite: #94a3b8; --tc-equipe-texto: #0b1220; --tc-codigo-fundo: #060c17; --tc-codigo-texto: #dbe4f0; --tc-codigo-linha: #6b7f9e; --tc-codigo-linha-hover: #15233c; --tc-sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --tc-sombra-md: 0 4px 12px rgba(0, 0, 0, 0.55); --tc-sombra-lg: 0 12px 32px rgba(0, 0, 0, 0.6); } } /* ── Tema escuro forçado (o toggle vence a preferência do sistema) ──────── */ :root[data-tema='escuro'] { color-scheme: dark; --tc-marca: #22d3ee; --tc-marca-forte: #67e8f9; --tc-marca-suave: #164e63; --tc-destaque: #fb923c; --tc-destaque-forte: #fdba74; --tc-destaque-suave: #7c2d12; --tc-fundo: #0b1220; --tc-fundo-alt: #0f172a; --tc-superficie: #111c30; --tc-superficie-alt: #16233b; --tc-superficie-elevada: #1b2942; --tc-borda: #23324e; --tc-borda-forte: #35476b; --tc-texto: #e8eef8; --tc-texto-suave: #b6c2d6; --tc-texto-fraco: #8ea0bb; --tc-texto-invertido: #0b1220; --tc-acerto: #4ade80; --tc-acerto-suave: #14532d; --tc-erro: #f87171; --tc-erro-suave: #7f1d1d; --tc-alerta: #fbbf24; --tc-alerta-suave: #78350f; --tc-info: #93c5fd; --tc-info-suave: #1e3a8a; --tc-neutro: #b6c2d6; --tc-neutro-suave: #23324e; --tc-casa-comum: #23324e; --tc-casa-comum-texto: #dbe4f0; --tc-casa-bonus: #fbbf24; --tc-casa-armadilha: #f87171; --tc-casa-poder: #a78bfa; --tc-casa-checkpoint: #22d3ee; --tc-casa-final: #fb923c; --tc-trilha: #35476b; --tc-equipe-ciano: #22d3ee; --tc-equipe-laranja: #fb923c; --tc-equipe-violeta: #a78bfa; --tc-equipe-esmeralda: #34d399; --tc-equipe-rubi: #fb7185; --tc-equipe-ambar: #fbbf24; --tc-equipe-indigo: #818cf8; --tc-equipe-grafite: #94a3b8; --tc-equipe-texto: #0b1220; --tc-codigo-fundo: #060c17; --tc-codigo-texto: #dbe4f0; --tc-codigo-linha: #6b7f9e; --tc-codigo-linha-hover: #15233c; --tc-sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --tc-sombra-md: 0 4px 12px rgba(0, 0, 0, 0.55); --tc-sombra-lg: 0 12px 32px rgba(0, 0, 0, 0.6); } /* ── Tema claro forçado ─────────────────────────────────────────────────── */ :root[data-tema='claro'] { color-scheme: light; } /* ── Modo projeção: telão a 8 metros (RF-25) ────────────────────────────── */ :root[data-projecao='telao'] { --tc-escala: 1.6; --tc-altura-linha: 1.45; --tc-borda-fina: 2px; --tc-borda-grossa: 3px; } /* O professor pode ampliar mais ainda pelo painel; a tela grava --tc-escala inline. */ /* ── Base compartilhada pelas três telas ────────────────────────────────── */ body { margin: 0; background: var(--tc-fundo); color: var(--tc-texto); font-family: var(--tc-fonte-texto); font-size: var(--tc-txt-md); line-height: var(--tc-altura-linha); -webkit-text-size-adjust: 100%; } h1, h2, h3, h4, .tc-titulo { font-family: var(--tc-fonte-titulo); font-weight: var(--tc-peso-titulo); line-height: var(--tc-altura-titulo); letter-spacing: var(--tc-espacamento-titulo); margin: 0; } code, pre, kbd, .tc-codigo { font-family: var(--tc-fonte-codigo); font-variant-ligatures: none; line-height: var(--tc-altura-codigo); } /* Foco visível é requisito de acessibilidade (PRD §9): não remova. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--tc-marca); outline-offset: 2px; box-shadow: var(--tc-foco); } /* Área tocável mínima no celular. */ button, .tc-alvo { min-height: var(--tc-alvo-toque); } /* PRD §9: respeitar prefers-reduced-motion. */ @media (prefers-reduced-motion: reduce) { :root { --tc-tempo-rapido: 1ms; --tc-tempo-medio: 1ms; --tc-tempo-lento: 1ms; --tc-tempo-peao: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } /* Conteúdo largo (código, tabuleiro, tabelas) rola dentro do próprio contêiner. */ .tc-rolagem-x { overflow-x: auto; max-width: 100%; } img { max-width: 100%; }