/* aquacalc — tokens do Tema B "Instrumento" (etapa 0, 11/08/2026) Fonte única de cor, escala tipográfica e motion. NENHUM hex de tema vive fora daqui — se aparecer hex em componente de página convertida, é bug (o LINT-TEMA do verificar-site.py cobra isso nas páginas do manifesto). Os pares de contraste foram validados WCAG 2.1 AA na spec (texto >= 4,5:1; borda de campo >= 3:1). AO TROCAR QUALQUER VALOR, RECALCULAR ANTES DE GRAVAR. O modo é propriedade da SEÇÃO do produto (escuro: home/calculadoras/Pulso · claro: fichas/guias/área do lojista), não preferência do usuário — sem toggle na v1, sem prefers-color-scheme de propósito. Spec: claude/tema-b-instrumento-spec.md */ :root[data-tema="escuro"], [data-tema="escuro"] { --bg: #0C1418; --bg-elev: #121C21; /* cartão, campo */ --bg-sunken: #101A1F; /* bloco de resultado */ --line: #26383E; /* régua decorativa */ --line-forte: #63848C; /* borda de campo — 4,29:1 sobre --bg-elev */ --ink: #E4EFEC; /* 15,8:1 */ --ink-2: #93A8A5; /* 7,4:1 — texto secundário */ --ink-3: #7F9793; /* 6,0:1 — labels */ --teal: #3FCFB0; /* estrutura: barra, ponto, anel de foco */ --teal-ink: #57E0BE; /* 10,8:1 — número e dado */ --coral: #E8623C; /* CTA e alerta */ --coral-ink: #F1854F; /* 7,3:1 — texto de ressalva */ --on-coral: #170703; /* 5,9:1 sobre --coral */ } :root[data-tema="claro"], [data-tema="claro"] { --bg: #F7FAF9; --bg-elev: #FFFFFF; --bg-sunken: #EEF3F2; --line: #D6E0DE; --line-forte: #728481; /* borda de campo — 3,94:1 sobre branco */ --ink: #0E1A1E; /* 16,9:1 */ --ink-2: #4A5D5A; /* 6,7:1 */ --ink-3: #5E716E; /* 4,9:1 */ --teal: #0F7A63; --teal-ink: #0F7A63; /* 4,7:1 sobre --bg-sunken */ --teal-fundo: #0C6553; /* fundo de badge, texto branco a 7,0:1 */ --coral: #C2431C; /* CTA sólido */ --coral-ink: #A33413; /* 6,5:1 — texto de ressalva */ --on-coral: #FFF6F2; /* 4,8:1 sobre --coral */ } /* ---- severidade: ok · atenção · crítico (03/09) ------------------------------------------ Estes nove valores já existiam, copiados à mão em OITO páginas (app, admin-lojas, as quatro do Pulso, e agora a aclimatação). Nenhuma delas está errada — o que estava errado era não haver casa: a nona cópia é a que diverge, e ninguém a veria. Aqui é a casa. Os pares são os que o Pulso já publicava e valem sobre superfície CLARA; sobre o cartão petróleo das calculadoras o triplo funciona porque o bloco traz o próprio fundo. Contraste medido do texto sobre o próprio fundo: ok 7,6:1 · atenção 7,1:1 · crítico 8,0:1. AS OITO CÓPIAS ANTIGAS CONTINUAM LÁ e são dívida contada, não conserto pela metade — o teto está no `componente-do-resultado.test.js` e no §8 do ESTADO, com data e dono. */ :root { --sev-ok-fundo: #e9f6ef; --sev-ok-borda: #a8d8bf; --sev-ok-tinta: #14603c; --sev-atencao-fundo: #fff7ec; --sev-atencao-borda: #f0cf9a; --sev-atencao-tinta: #8a5300; --sev-critico-fundo: #fdecea; --sev-critico-borda: #f0b4ae; --sev-critico-tinta: #8c1d18; } /* ---- escala tipográfica: usar os extremos, não os meios (salto corpo->display ~3,8x) ---- */ :root { --fonte-texto: 'Bricolage Grotesque', system-ui, sans-serif; --fonte-mono: 'JetBrains Mono', ui-monospace, monospace; --t-display: clamp(38px, 6vw, 64px); /* peso 800 · lh .98 · tracking -.03em */ --t-titulo: clamp(27px, 4vw, 40px); /* peso 800 · lh 1.02 · tracking -.025em */ --t-sub: 20px; /* peso 800 · lh 1.25 */ --t-corpo: 17px; /* peso 400 · lh 1.65 */ --t-menor: 13px; /* peso 400 · lh 1.55 */ --t-label: 11px; /* peso 600 · MAIÚSCULAS · tracking .16em */ --t-num-g: 44px; /* mono 700 · tabular · tracking -.02em */ --t-num-m: 22px; /* mono 700 · tabular */ --t-num-p: 13px; /* mono 400 · tabular */ } /* Todo número que o usuário lê como resultado ou parâmetro é mono tabular — é isso que faz a interface parecer instrumento. */ .num, .num-g, .num-m, .num-p { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; } .num-g { font-size: var(--t-num-g); font-weight: 700; letter-spacing: -.02em; } .num-m { font-size: var(--t-num-m); font-weight: 700; } .num-p { font-size: var(--t-num-p); font-weight: 400; } .t-label { font-size: var(--t-label); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; } /* ---- os tons de BOTAO da marca (decisao do Franco, 02/09/2026 — A11) ---- Medido em 28/08 sobre 75.977 textos: branco sobre o coral (#e85d3a) da 3,47 e sobre o petrol-claro (#1e9e94) da 3,29 — abaixo do 4,5 da WCAG AA. A cor da IDENTIDADE nao muda: onde e fundo grande, detalhe ou o `calc` do wordmark, continua a mesma. O que muda e so o tom do BOTAO com texto branco em cima, por estes dois tokens: --coral-botao #c74f31 (4,57) e --petrol-botao #19847c (4,53). Quem olha lado a lado quase nao distingue; quem le no celular no sol, sim. Cor de botao com texto branco nasce DESTES tokens, nao dos da marca. */ :root{--coral-botao:#c74f31;--petrol-botao:#19847c;} /* ---- marca: aplicacao UNICA do wordmark (decisao do Franco, 12/08/2026) ---- "aquacalc" e uma palavra, minuscula, bicolor: aqua #0b2b45 (cor do traco do logo SVG) + calc #1e9e94. Peso 800, 22px na nav, 17px no rodape (.marca-rodape). Em fundo escuro, .marca-escura: aqua branco, calc #7fe0d4. NENHUMA pagina redefine cor, peso ou tamanho da marca — quem precisar variar, varia AQUI. (Antes havia 4 aplicacoes divergentes: home 24px/#0b2b45, internas 22px/700/#14557f, pulso 21px, app branco/#4ecdc0.) */ .marca{display:inline-flex;align-items:center;gap:9px;font-family:var(--fonte-texto);font-weight:800;font-size:22px;letter-spacing:-.3px;line-height:1;text-decoration:none;color:inherit;} .marca .aqua{color:#0b2b45;} .marca .calc{color:#1e9e94;} /* isola as partes da marca de colisoes de classe (ex.: .calc e tambem o cartao de resultado das calculadoras) */ .marca .aqua,.marca .calc{background:none;box-shadow:none;border:0;border-radius:0;padding:0;margin:0;font-weight:inherit;} .marca-escura .aqua{color:#fff;} .marca-escura .calc{color:#7fe0d4;} /* o `padding` não é estética: a 414 px este link tinha 17 px de altura, abaixo do mínimo de 24 px de alvo de toque. O padding cresce o ALVO sem mexer no tamanho da letra (28/08). */ .marca-rodape{font-size:17px;gap:6px;padding:5px 0;} /* ---- motion: UMA entrada orquestrada por página; contagem 0->valor só no resultado ---- */ @keyframes sobe { to { opacity: 1; transform: none } } .entra { opacity: 0; transform: translateY(14px); animation: sobe .7s cubic-bezier(.22,.8,.3,1) forwards } .entra:nth-child(1) { animation-delay: .05s } .entra:nth-child(2) { animation-delay: .17s } .entra:nth-child(3) { animation-delay: .29s } @media (prefers-reduced-motion: reduce) { .entra { animation: none; opacity: 1; transform: none } } /* ---- Cabeçalho e rodapé: fonte única de CSS (12/08) ---- O site tinha TRÊS implementações de nav — estilo.css (altura 64, fonte 14,5, peso 500), index.html (68 / 15 / 500 e um botão .btn-p próprio) e pulso.html (60 / 14 / 600 com .nav-btn). Como cada página declarava as suas regras depois do tokens.css, a cascata escolhia a local e o cabeçalho mudava de tamanho e de cor entre a home, o Pulso e o resto. Aqui fica a definição canônica; as locais foram removidas. Vale o mesmo para o rodapé. */ /* `nav.topo`, e não `nav` (28/08, achado do Franco no ar). A regra pegava a TAG, e `