@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400..700&display=swap');
/* =====================================================================
Tokens — ver DESIGN.md.
Os nomes são os do documento (`## Colors`): canvas, ink, surface-card,
hairline. Eles são lidos direto pelo JS em `style=` inline e pelo
getComputedStyle do app.js — estender é livre, renomear quebra o app, e o
tokens.check.js é quem prova que nenhum nome antigo sobrou.
── Quatro decisões registradas, para não parecerem descuido ────────────
1. TEMA CLARO É DERIVADO. O documento é escuro puro e diz "the brand never
warms to a light surface": ele não descreve tema claro nenhum. O
vocabulário claro que existe lá é só de texto — `on-light #000000` e
`on-light-mute rgba(0,0,51,.7)`, usados no cartão de e-mail branco.
Medi os accents do documento sobre fundo claro e TODOS reprovam:
blue 2.79:1, orange 2.51:1, red 3.78:1, yellow 1.58:1, green 1.33:1.
São calibrados para o preto. Onde o documento é silencioso, a regra é
derivar da lógica dele: aqui, preservar o MATIZ (que é o sinal da marca)
e baixar a luminosidade até 4.5:1. Foi o que fiz, com os números abaixo.
2. BORDA DE 1.35:1 É REGRESSÃO CONSCIENTE (decidida em 2026-09-02).
`hairline-strong` é branco a 14%, que dá 1.35:1 sobre o canvas. O sistema
anterior sustentava 3:1 em fronteira de controle (WCAG 1.4.11) com o
`--hairline-strong`. Eu levantei; a decisão foi por fidelidade ao
documento, que especifica 14% e não tem sombra nenhuma para compensar.
O que NÃO regride é o foco: o documento manda a borda engrossar para
`ink` no foco, e ink sobre canvas dá 20.63:1 — navegação por teclado
continua nítida. O que regride é enxergar um campo em repouso.
Para reverter, o número é 36% de branco (3.14:1); ver contraste.check.js.
No ESCURO a borda subiu para 20% (1.86:1) junto com a decisão 4.
3. SEM BORDA, SÓ EM CAMPO (decidida em 2026-09-23, pelo produto). Nada tem
borda — cartão, botão, painel, badge, divisor, faixa lateral —, exceto
campo de digitação (input, select, textarea e o que se comporta como um).
Contraria o documento, que desenha tudo com hairline: aqui quem separa é
o FUNDO — --preenchimento em controle e seção, --fundo-* em estado,
--surface-flutuante + --sombra-flutuante no que flutua sobre a página (a
única sombra do sistema: sem borda, é o que descola um menu da página).
Ficam o anel dos spinners, o quadrado dos checkboxes, o anel de foco
(:focus-visible), que é acessibilidade, não desenho — e DUAS divisórias,
ambas pedidas de volta no mesmo dia: a linha sob a .menubar (separa a
navegação das abas de trabalho, que têm o mesmo fundo) e a linha sob a
.topbar (separa a topbar da menubar logo abaixo, também no mesmo fundo).
Em 2026-09-26 entrou o separador de coluna das tabelas (.col-redim), que
é a alça de ajustar a largura.
E estado ativo NÃO engrossa texto: ativo é fundo e cor, nunca 600/700.
O estilo.check.js guarda as duas regras.
4. ESCURO "DIM", NÃO PRETO PURO (decidida em 2026-09-24, pelo produto).
O documento manda canvas #000000 e "never near-black". Com a decisão 3
(sem borda), cartão #0a0a0c sobre #000 dava 1.03:1 e a tela virava uma
mancha preta de pouco contraste. O canvas passou a #121419 e cada camada
sobe um passo visível; os valores e o porquê estão no bloco do tema
escuro logo abaixo. O tema claro não mudou.
===================================================================== */
:root {
/* Sem isto o navegador desenha todo controle nativo no tema errado — o
ícone do calendário do , a seta do