/* ══════════════════════════════════════════════════════════════════ DATALAND · LANDBANK — sistema Mundo: prancheta de urbanista. Papel, grafite, carimbo de processo. Cor: grafite carrega o DADO. O indigo de marca (#3D2177, do manual) marca só três coisas por tela: a marca, a ação primária e o objeto em foco no mapa. Semântico (verde/âmbar/vermelho) carrega o VEREDITO. O dourado de marca (#FCB830) aparece em UM lugar só, a marca no rail: âmbar já significa "atenção" nesta interface, e dourado em qualquer outro lugar colidiria de sentido. Ícones: Tabler, 24/stroke 2, hidratados via [data-ic]. REGRA DE BASE, e ela custou caro: qualquer `display` declarado numa classe VENCE o `hidden` do navegador, porque folha do autor bate folha do agente. Então `el.hidden=true` num `.res-grid{display:grid}` não esconde nada, e o bug aparece só no print, nunca no teste que lê `el.hidden`. O arquivo já tinha CINCO remendos locais disso (.cal, .lupa-dica, .onb-pe, .falta, .falta-lista): virou uma regra só, e ela vale pro sistema inteiro. Corolário pro teste: conferir getComputedStyle().display, não .hidden. ══════════════════════════════════════════════════════════════════ */ /* Os @font-face. Vem PRIMEIRO porque @import tem que preceder qualquer regra, e porque os tokens --fonte/--fonte-mono abaixo apontam pras famílias declaradas lá. Ver 00-fonte.css: o Inter estava nomeado na pilha desde sempre e nunca carregava. */ @import './00-fonte.css'; [hidden]{display:none!important} :root{ /* ROXO OFICIAL DE MARCA (Indigo Velvet #3D2177, do manual em brandfetch). Antes era #6106D2, amostrado de print do GeoImóvel. O manual manda, e o tom oficial ainda é MAIS sóbrio: 12,5:1 no branco contra 8,5:1 do anterior. */ --acao:#3D2177; --acao-2:#2C1758; --acao-fraco:rgba(61,33,119,.06); --acao-borda:rgba(61,33,119,.28); /* dourado de marca: só a marca usa. Âmbar nesta interface já significa "atenção", então dourado em qualquer outro lugar colidiria de sentido. */ --marca-ouro:#FCB830; /* grafite — o dado mora aqui. t2 8,9:1 · t3 4,8:1 — passam AA para texto pequeno, mas só contra --papel (branco); nenhum dos dois foi medido contra composição translúcida real. O tom mais claro virou --decor e NÃO carrega texto: só régua, ponto e traço. Hierarquia de rótulo se faz por peso, caixa e tracking, não por clarear até sumir. --t4 CORRIGIDO na fonte (31/ago/2026): o valor antigo (#73737F, quase idêntico a --t3) tinha reprovado 4,5:1 SEIS vezes em sessões anteriores (`.rotcorte small`/`.escala` a 4,19:1, `.morta-tx` a 4,31:1 — ver `contratos/regua.md`), e cada vez foi remendado só no seletor que reprovou (trocado pra --t2 em `12-v3-terreno.css`/`11-v2-fila.css`), sem nunca corrigir o token. A sétima ocorrência apareceu na Fila (`.pos.num`/`.mapa-pe`, medido ao vivo com getComputedStyle + composição real de fundo translúcido, não a string do CSS): 4,19–4,41:1. Valor novo medido pra passar com folga contra o pior caso real (~rgb(245,245,246), o `--shell` translúcido composto sobre `--mundo`): 4,97–5,11:1. Fica mais escuro que --t3 de propósito — --t3 segue documentado como "só sobre --papel", --t4 precisa segurar composição translúcida, então não são mais o mesmo degrau. Os dois remendos antigos em --t2 continuam válidos (mais contraste que o necessário não é defeito) e não foram revertidos. */ --tinta:#16161C; --ink:#2A2A34; --ink-2:#4A4A57; --t2:#494954; --t3:#71717D; --t4:#666670; --decor:#B0B0BA; /* ════════════════════════════════════════════════════════════════ VEREDITO — migrado pra paleta do shadcn/ui em 25/ago/2026. Decisão em PADRAO-VISUAL-DATALAND.md, vigente pros dois produtos (Landbank e Backoffice Geo). Revoga o par antigo (#1C7548/#846014/ #B0322A/#1B5FB8), que era escuro demais pra servir de preenchimento e claro demais nunca — era só texto, nunca teve o par componente/texto. CADA PAPEL É UM PAR, não uma cor: o tom 600 passa o 3:1 da WCAG 1.4.11 (borda, rail, ícone, preenchimento) e REPROVA o 4,5:1 de texto pequeno. Por isso todo papel semântico tem duas entradas, `--X` (componente) e `--X-tx` (texto) — mesma lógica que Radix e GitHub Primer usam entre escala de acento e escala de texto. O VALOR É O oklch. O shadcn/ui roda em Tailwind v4, que publica em oklch; hex de v3 NÃO é a mesma cor — foi o erro que custou três rodadas de retrabalho no Backoffice Geo (ver decisao-cor-terracota-bordo.md). Os valores abaixo saíram do registry (PADRAO-VISUAL-DATALAND.md §3), não de estimativa. Não adicione hex "pra ler": se precisar do valor pintado, meça no navegador (getComputedStyle), não recalcule de cabeça. ════════════════════════════════════════════════════════════════ */ /* green-600 · componente. ATENÇÃO, medido em 25/ago/2026 e a afirmação anterior estava otimista: este tom dá 3,22:1 sobre --papel (branco) e 2,88:1 sobre --mundo (o fundo da janela). Ou seja, ele passa o 3:1 da WCAG 1.4.11 SOBRE A FOLHA e REPROVA sobre o fundo da janela. O comentário antigo dizia "3:1" sem dizer sobre o quê, o que é o mesmo tipo de número órfão que a Regra 1 proíbe na tela. Consequência prática: borda, rail ou ícone verde de 1px direto sobre --mundo não é acessível. Sobre a folha, é. CORREÇÃO DE UMA AFIRMAÇÃO MINHA, na mesma sessão: escrevi aqui que o preenchimento cheio dava "4,7:1 com --cheio-tinta" e esse número eu não tinha medido — branco sobre este tom dá 3,22:1, que reprova como texto. O que salva o badge sólido é que ele NÃO usa este token: 31-badge.css linha 66 preenche com `var(--ok-tx)` (green-800), e branco sobre aquele dá ~5,8:1. Duas coisas diferentes que eu tinha juntado numa frase. Não corrigido nesta entrega porque subir o tom mexe na paleta dos dois produtos e precisa passar pelo PADRAO-VISUAL — registrado no CHANGELOG como pendência, não como decisão. */ --ok:oklch(0.627 0.194 149.214); /* green-800 · texto, 7,13:1 no branco */ --ok-tx:oklch(0.448 0.119 151.328); /* orange-600 · componente, 3:1 */ --at:oklch(0.646 0.222 41.116); /* orange-700 · texto, 5,22:1 no branco */ --at-tx:oklch(0.553 0.195 38.402); /* red-600 (destructive) · componente */ --no:oklch(0.577 0.245 27.325); /* red-700 · texto, 6,42:1 no branco */ --no-tx:oklch(0.505 0.213 27.518); /* blue-600 · componente, 5,25:1 */ --info:oklch(0.546 0.245 262.881); /* blue-700 · texto, 6,83:1 no branco */ --info-tx:oklch(0.488 0.243 264.376); /* Tingimentos de fundo (--ok-t etc.) NÃO foram recalculados nesta migração — ficam com o valor antigo, derivado do tom escuro anterior. Recalcular exige o oklch-50 real do registry pra cada matiz, que não foi consultado nesta rodada (a mesma regra do parágrafo acima: não se deriva de memória). Registrado como pendência, não como decisão. */ --ok-t:#E7F5EB; --at-t:#FBF3DA; --no-t:#FCEAE8; --info-t:#E5EEFB; --off:#54545F; --off-t:#F1F1F3; --dourado:#846014; /* categórica das camadas: um conjunto harmônico, não cinco cores soltas */ --c1:#5B63A8; --c2:#B08430; --c3:#AB5252; --c4:#3F8069; --c5:#6E7480; --papel:#FFFFFF; --shell:rgba(255,255,255,.94); /* O FUNDO DA JANELA — a "prancheta" atrás de tudo. Existir como token é correção de defeito, não adição (25/ago/2026): o valor vivia como `background:#F2F2F6` literal na regra do body, logo abaixo, e portanto era o único papel de superfície do sistema que não tinha nome. O sintoma: comentários em estilo/11-v2-fila.css e na vitrine JÁ citavam "--mundo" pra explicar contraste ("--t3 dá 4,31:1 sobre --mundo"), como se o token existisse — e ninguém podia consultá-lo. Depois, a página de documentação escreveu `var(--mundo, #f2f2f6)`, que caía SEMPRE no fallback: um literal disfarçado de token, exatamente o que a Regra 3 proíbe. Não é igual a --sup nem a --papel de propósito: os dois são branco, e o card branco precisa flutuar contra algo. */ --mundo:#F2F2F6; --linha:rgba(20,20,34,.10); --linha-2:rgba(20,20,34,.055); --linha-3:rgba(20,20,34,.20); /* escurece o que fica atrás de uma camada modal centrada (o véu da busca Ctrl/Cmd+K). Não muda por tema de propósito, igual --sombreia: o papel dele é escurecer, não servir de hairline visível contra o canvas, então não precisa inverter no escuro. Achado no gate (26/ago/2026): estava rgba(20,20,34,.32) literal direto em Layout.css, violação da Regra 3. */ --veu-modal:rgba(20,20,34,.32); /* profundidade: uma estratégia só, sombra em camadas. CONFERIDO contra mercado (usuário, `tokens-icone-sombra-motion-mercado.md`, 01/set/2026): a régua sugerida copia o shadcn puro, sombra em preto puro (`rgb(0 0 0 / ...)`), com o ponto em aberto "vale tingir a sombra com grafite/indigo em vez de preto puro, como Stripe/Linear/Attio fazem". Já fazemos isso — as três sombras abaixo usam `rgba(20,20,34, ...)`/`rgba(18,18,32,...)`, um grafite bem escuro, não preto puro (`rgb(0,0,0)`). Não são --shadow-xs/sm/md/lg novos: criar esse segundo conjunto duplicaria o mesmo papel que --sh-1/2/3 já cobre (a Regra 2 do AGENTS.md existe pra evitar exatamente isso), e pior, um --shadow-xs copiado literal do shadcn ENTRARIA em preto puro — regressão de um ponto que já estamos na frente do baseline comparado. Decisão de cor da sombra já tomada, então; falta só decidir se o tom exato (20,20,34) fica como está ou migra pro grafite/indigo específico que o documento sugere — ajuste fino, não decisão nova. */ --sh-1:0 0 0 1px rgba(20,20,34,.055), 0 1px 2px -1px rgba(18,18,32,.06), 0 2px 4px rgba(18,18,32,.04); --sh-2:0 0 0 1px rgba(20,20,34,.055), 0 1px 2px rgba(18,18,32,.05), 0 8px 20px -6px rgba(18,18,32,.10), 0 24px 56px -16px rgba(18,18,32,.16); --sh-3:0 0 0 1px rgba(20,20,34,.06), 0 2px 4px rgba(18,18,32,.05), 0 14px 32px -8px rgba(18,18,32,.13), 0 40px 80px -20px rgba(18,18,32,.20); /* realce da AÇÃO PRIMÁRIA: a única sombra colorida do sistema, e só o botão de peso marca a usa. As --sh-1/2/3 acima são profundidade neutra; esta é ênfase, então é papel diferente e não um quarto degrau da mesma escala. Derivada de --acao por color-mix, não fixada: trocar o roxo troca o realce junto. Estava como rgba(61,33,119,.24) literal dentro da regra do botão, que é violação da Regra 3 e reprovava a entrega da Fase 1. */ --sh-acao:0 2px 8px color-mix(in srgb, var(--acao) 24%, transparent); /* ════════════════════════════════════════════════════════════════ PAPÉIS — a lição que mais importa do shadcn. Os tokens acima são nomeados pelo VALOR (--t2, --linha-2). Isso obriga quem constrói componente novo a ESCOLHER um valor. Os de baixo são nomeados pela FUNÇÃO, então o componente só PEDE um papel. Todo par superfície/tinta anda junto: nunca se usa um sem o outro. ════════════════════════════════════════════════════════════════ */ --sup:#FFFFFF; --sup-tinta:var(--tinta); /* superfície base */ --sup-2:rgba(20,20,34,.05); --sup-2-tinta:var(--t2); /* superfície suave */ --sup-3:rgba(20,20,34,.08); /* hover de item */ --flutua:rgba(255,255,255,.98); --flutua-tinta:var(--ink); /* popover/menu */ --calada:var(--t3); /* texto secundário */ --borda:var(--linha); /* borda de contorno */ --borda-forte:var(--linha-3); /* borda em hover */ /* FOCO É CINZA NEUTRO, NUNCA A MARCA — decidido em PADRAO-VISUAL-DATALAND.md §2: "o roxo chama muita atenção pro campo enquanto digita, um cinza escuro é mais discreto e foca no conteúdo". Não é estética, é a marca competindo com o dado que a pessoa está digitando ou lendo. Reusa --t2 (não inventa hex novo) via color-mix, pra manter o halo translúcido que já existia — mas o valor ANTIGO (roxo a 32%) nunca chegou no 3:1 que WCAG 1.4.11 pede pra indicador de foco: media 1,9:1 contra branco. Não era so a cor errada, era o contraste errado, e ninguem tinha medido isso porque o outline SEMI-TRANSPARENTE muda o numero final — testar so a string do CSS não pega esse defeito. 65% de --t2 foi escolhido medindo o efeito de mistura real (RGBA sobre o fundo), não estimado: 3,47:1 sobre --papel, 3,32:1 sobre --mundo. Os dois passam o 3:1, com folga pequena de propósito — halo mais forte que isso passa a competir com o conteúdo, o mesmo problema que motivou a troca. */ --anel:color-mix(in srgb,var(--t2) 65%,transparent); /* foco */ /* CONFERIDO contra mercado (usuário, `tokens-mercado-avancado-dataland.md`, 01/set/2026, rodada 6): a LARGURA de 3px converge de verdade — shadcn, Landbank (aqui) e os dois componentes medidos ao vivo da Attio batem nela. A COR não converge (Linear usa marca nos dois componentes, Attio é neutro no input mas azulado no botão, Stripe não tem anel visível) — fica com --anel como já era, não é decisão de mercado, é decisão nossa que o mercado não contradiz com força. Só a largura vira token — era `3px` literal solto nas duas regras que usam essa largura (`:focus-visible` global e `.inp-lei:focus-visible`), violação da Regra 3 anterior a esta medição. */ --focus-ring-width:3px; /* MIGRADO pra shadcn (usuário, 01/set/2026): era `.45` literal, repetido em cinco arquivos (`.btn`/`.tgl`/`.opt`/`.inp-lei`/`.ordena button`), nunca um token — violação da Regra 3 anterior a esta decisão. shadcn usa 0.5 (`disabled:opacity-50`) sem exceção nos 7 componentes conferidos (`tokens-mercado-avancado-dataland.md`); mercado real (Stripe/Linear/ Attio) não tinha o estado numa superfície pública testável, então shadcn era a única fonte com dado — decisão do usuário foi segui-la. */ --disabled-opacity:.5; --marca:var(--acao); --marca-tinta:#fff; --forte-neutro:var(--tinta); /* tinta sobre preenchimento CHEIO de qualquer tom semântico: badge sólido de ok, atenção, risco, calado. São dois papéis e não um: --marca-tinta é o par da marca e muda se a marca mudar; este acompanha verde, âmbar e vermelho, que são outra família e outra decisão. */ --cheio-tinta:#fff; /* o agente de ESCURECIMENTO: o que se mistura a um preenchimento cheio pra produzir o hover dele. Preto puro de propósito, e não --tinta: --tinta é papel de texto e tem viés azul (#16161C), então escurecer o verde e o vermelho com ela deslocaria o matiz em vez de só baixar o brilho. */ --sombreia:#000; /* ════════════════════════════════════════════════════════════════ RAIO — uma base, o resto derivado. "Menos arredondado" passa a ser mudar UM número, não caçar quatro valores soltos pelo arquivo. ════════════════════════════════════════════════════════════════ */ /* EXCEÇÃO REGISTRADA À REGRA 10 (usuário, Alessandro, 01/set/2026) — não é reversão da pesquisa de mercado, é a exceção por escrito que a própria Regra 10 exige quando alguém escolhe fugir do padrão de propósito. Migrou pra 10px (base do shadcn puro) mais cedo neste mesmo dia, depois de medir contra 5 sistemas reais. Revertido pra 6px (a base original do Landbank) depois de VER renderizado ao vivo — Botão e o card "Cenário A" liam como mais arredondado do que o produto quer parecer. Motivo coerente com uma decisão já tomada antes, não isolado: `landbank- design-system.md` já registra que o Badge em pílula total foi rejeitado três vezes por ser "público premium, não consumer" — o raio menor no botão/card segue a MESMA lógica de identidade visual, não é gosto solto. --card-radius (14px) e --card-compacto-radius (8px) — nunca chegaram a ser aplicados a `.shell` — ficam como registro de que o shadcn puro foi considerado e conscientemente não escolhido, não como pendência. Fórmula preservada (--r-m/--r-s numa relação de .67 do zero de --r, --r-xs em .5) — só o número da base voltou. */ --r:6px; --r-g:var(--r); --r-m:calc(var(--r) * .67); --r-s:calc(var(--r) * .67); --r-xs:calc(var(--r) * .5); --r-cheio:999px; --rail:162px; --gut:16px; /* ════════════════════════════════════════════════════════════════ ESPAÇAMENTO — escala Tailwind/shadcn, sem mudança. Confirmada contra Carbon (que abre o passo depois de 16px: 24→32→40→48, depois pula de 16 em 16) em `tokens-espacamento-raio-mercado.md` (usuário, 01/set/ 2026) — a nossa fica linear até o fim, decisão implícita que passa a ser explícita aqui. Se algum dia --space-16 pra cima for usado de verdade, não carrega a lógica de "passo que abre" do Carbon — registrar como pendência quando chegar a hora, não decidir agora sem uso real. ════════════════════════════════════════════════════════════════ */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px; /* ════════════════════════════════════════════════════════════════ CARD — dois padrões, não um. Medido ao vivo contra Stripe/Linear/Attio em `tokens-espacamento-raio-mercado.md`: o único dado que vem de produto de verdade (não marketing) — o card de issue do Linear — usa 8-12px de padding e raio de dois degraus (9px pequeno, 12px painel grande), bem mais compacto que shadcn puro. Landbank é ferramenta densa, não site de vendas — os dois padrões abaixo existem por isso, `--card-compacto-*` pra lista densa, os de cima pra card de destaque. TENSÃO DA BASE FECHADA, PRA O LADO DO LANDBANK (usuário, 01/set/2026): `--r` passou por 10px (shadcn puro) e voltou pra 6px depois de visto renderizado ao vivo — exceção registrada na seção RAIO acima, mesma lógica já usada pra rejeitar pílula total no Badge. --card-radius (14px, a xl que o shadcn usaria pro Card) e --card-compacto-radius (8px) ficam aqui como registro de que o valor do shadcn puro FOI considerado e conscientemente não escolhido — não é pendência, é decisão já tomada. `.shell` (`02-shell.css`) continua em `var(--r-g)`, que agora é 6px de novo. Não reabra esta comparação sem fonte nova que mude o quadro. */ --card-padding:24px; --card-radius:14px; /* xl do shadcn — considerado e rejeitado, ver acima */ --card-gap-grade:24px; /* 16px em grade mais densa (>4 cards visíveis) */ --card-compacto-padding:16px; /* 12px se precisar de mais densidade ainda */ --card-compacto-radius:8px; /* shadcn md — considerado e rejeitado, ver acima */ /* ════════════════════════════════════════════════════════════════ ÍCONE — nomeia a escala de `--is` que já existia espalhada por `i[data-ic]{--is:Npx}` em cada CSS de componente, e fecha o degrau que faltava. Medido contra shadcn/ui, Carbon e mercado real (Stripe/ Linear/Attio) em `tokens-icone-sombra-motion-mercado.md` (usuário, 01/set/2026): ninguém usa um tamanho só — pequeno pra dentro de badge/tag, médio pra botão/menu, grande pra navegação/destaque solto. A nossa escala já cobria pequeno e médio; faltava um grande formalizado — --icon-xl é esse, GENUINAMENTE NOVO. NÃO retrofitado em nenhum ícone existente: conferido (grep no repositório inteiro por `--is:` fora da escala) — os candidatos mais próximos de "navegação solta" são `.navi` (rail, 17px) e `.acao-linha`/`.solta` (17px), mais perto de --icon-lg (16px) que de --icon-xl (20px). Puxar qualquer um deles pra 20px seria mudar tamanho visual sem pedido pra isso, não só nomear o que já existe — por isso o token entra como referência, sem uso ainda. */ --icon-xs:8px; /* ponto, indicador mínimo */ --icon-sm:12px; /* dentro de badge/tag — já é o que `.bdg{--is:12px}` usa */ --icon-md:14px; /* checkbox, radio */ --icon-lg:16px; /* botão, item de menu — padrão de uso mais comum */ --icon-xl:20px; /* NOVO, sem uso ainda — navegação solta, destaque, cabeçalho */ /* ════════════════════════════════════════════════════════════════ DIALOG · paleta de comando (Cmd/Ctrl+K) — NÃO generaliza pro Dialog de conteúdo geral (confirmação, formulário). Medido em Stripe/Linear/Attio (`tokens-mercado-avancado-dataland.md`, 01/set/2026): as três paletas de comando fecham com Esc (3/3) e a maioria fecha clicando fora (2/2 testados), raio converge numa faixa apertada (12-16px). SEM APLICAÇÃO NO PRODUTO: o único Cmd+K deste repositório é `app/src/paginas/Busca.tsx` (`.doc-busca-card`, `Layout.css`), e é cromo da DOCUMENTAÇÃO, não do produto Landbank — exceção já registrada no AGENTS.md pro "cromo" das páginas de doc. Curiosamente `.doc-busca-card` já usa `border-radius:var(--doc-r)` = `--r * 2` = 12px, batendo com o achado de mercado por acaso de fórmula, não por decisão consciente — registrado aqui, não alterado (é token de doc, fora do escopo de `estilo/*.css`). Landbank não tem Cmd+K próprio ainda; estes tokens ficam prontos pro dia em que precisar de um. */ --dialog-cmdk-radius:12px; /* fecha com Esc e com clique fora — Radix Dialog já faz os dois por padrão, sem código extra, contanto que ninguém sobrescreva onEscapeKeyDown/onPointerDownOutside sem motivo (Regra 5). */ /* ════════════════════════════════════════════════════════════════ REGRA DE ALINHAMENTO DO SISTEMA Tudo alinha pela PRIMEIRA LINHA do bloco. Nunca pelo centro do bloco. Porque: a altura do bloco varia com o conteúdo (uma linha tem aviso, a outra não). Centralizar faz o MESMO elemento flutuar em alturas diferentes de linha pra linha, e era isso que quebrava a fila. CONFIRMADO contra mercado (usuário, `tokens-mercado-avancado-dataland.md`, 01/set/2026): comparando indicador de severidade inline em GitHub Advisories, Snyk e OpenCVE — forma, tamanho e peso do selo não convergiram entre as três fontes, mas as três concordam que o selo NUNCA fica centralizado contra um bloco de texto de várias linhas, sempre ancorado na linha do título/topo. `.rst` (`12-v3-terreno.css`, "Pontos de atenção do terreno") já usa `align-items:flex-start` — já seguia essa regra antes da medição confirmar, nenhuma mudança necessária, só a confirmação registrada. --l1 é a altura dessa primeira linha. Todo elemento-líder de coluna se centra dentro de --l1, então os topos batem em todas as linhas. Centro só vale quando o elemento é a linha INTEIRA (alça, divisor). ── --gcol é a grade da fila, compartilhada pelo cabeçalho e pelas linhas. Uma variável só: header e corpo não podem divergir. */ --l1:20px; --gcol:22px minmax(0,1fr) 96px 296px 28px; --ease:cubic-bezier(.23,1,.32,1); /* ════════════════════════════════════════════════════════════════ ESCALA TIPOGRAFICA — nove tamanhos, dois pesos, e mais nada. Antes desta linha, o produto tinha 25 valores de font-size diferentes espalhados pelas telas (de 8,5px a 38px), nenhum deles nomeado. Resultado: "aumenta o titulo" significava caçar numero por numero em varios arquivos, sem garantia de pegar todos. Isso e o oposto do que um token existe pra fazer. A escala vem de handoff/componentes.md e do padrao-visual-proposta.md §7, que a fecharam com fonte primaria (Stripe, Radix, Carbon, Anthropic) e regra: passo de meio pixel nao se percebe, entao e arbitrario e sai. Os valores antigos que nao batem exatamente com um destes 9 nao foram "arredondados" aqui — foram herdados como estao nas telas antigas, e migram pra escala conforme cada tela for revisada. Componente NOVO usa so os tokens abaixo, nunca um px solto. */ /* display · numero-hero do resultado, raríssimo */ --fs-exibicao:40px; /* h1 · titulo de tela */ --fs-titulo-1:32px; /* h2 · titulo de secao */ --fs-titulo-2:24px; /* h3 · titulo de bloco/cartao */ --fs-titulo-3:19px; /* corpo enfatizado, texto de intro */ --fs-destaque:15px; /* corpo padrao — o que body{} ja usava */ --fs-corpo:14px; /* legenda, nota, texto secundario */ --fs-pequeno:13px; /* numero tabular, codigo, dado monoespacado */ --fs-mono:12.5px; /* rotulo em caixa alta, gutter, texto minimo. CORRIGIDO (31/ago/2026): era 11px, subiu pra 12px. As quatro referencias que o paragrafo acima cita foram medidas ponto a ponto (Stripe, Linear, Carbon, Radix Themes, GitHub Primer, Material Design 3): 3 das 4 que este arquivo ja citava como referencia (Carbon, Radix, Primer) usam 12px como piso, so a Material Design 3 bate com 11px. O sistema estava um degrau abaixo da companhia que ele mesmo escolheu como espelho. Resto da escala (13/14/15px) ja batia ponto a ponto com Stripe/Carbon, sem necessidade de mudar. */ --fs-rotulo:12px; /* Dois pesos no sistema. 500 e reservado pra tecla (kbd), nunca pra texto corrido: um terceiro peso no meio de 400 e 600 fica ambiguo de longe. */ --fw-normal:400; --fw-forte:600; --fw-tecla:500; /* ════════════════════════════════════════════════════════════════ PILHA DE FONTE — decisão, enquanto 00-fonte.css é só o recurso. Inter PRIMEIRO, e é aí que estava o defeito: a pilha antiga começava com `-apple-system, BlinkMacSystemFont`, que no Windows resolve pra fonte de sistema antes do Inter ser sequer considerado. Medido, não deduzido — ver o cabeçalho de 00-fonte.css. O resto da pilha continua existindo como rede: se o woff2 falhar em carregar (rede ruim, bloqueio), o texto cai em Segoe UI / SF Pro em vez de Times New Roman, que é o que `sans-serif` sozinho daria em alguns casos. ════════════════════════════════════════════════════════════════ */ --fonte:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; /* Código, nome de token, dado tabular. Uma fonte carregada e não a do sistema porque a do sistema muda por máquina, e aí a mesma tabela de token tem largura diferente pra cada pessoa do time. */ --fonte-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace; /* ════════════════════════════════════════════════════════════════ TRACKING (letter-spacing) — o que faltava pra escala funcionar. Tamanho grande com tracking normal parece frouxo; tamanho pequeno com tracking negativo fecha o texto e reprova legibilidade. Então tracking ANDA COM O TAMANHO, e por isso é token e não gosto de quem escreve a regra. É a coisa que mais separa uma tela que "parece pronta" de uma que parece boa, e era o que estava espalhado à mão (`letter-spacing:-0.02em` solto no CSS da documentação, violando a Regra 3). A escala segue o padrão de Inter/Geist/Linear: negativo forte no display, chegando a zero no corpo, e positivo só em caixa alta — onde a letra precisa de ar pra não virar bloco. ════════════════════════════════════════════════════════════════ */ /* 32-40px · título de tela e display */ --tr-display:-.03em; /* 19-24px · título de seção e de bloco */ --tr-titulo:-.015em; /* corpo: zero. Inter já é desenhada pra ser lida assim. `0em` e não `0`: em CSS os dois são idênticos, mas o exportador de DESIGN.md publica isto como Dimension, e o validador do formato reprova número sem unidade. Custou nada e evita um erro no lint. */ --tr-corpo:0em; /* rótulo em CAIXA ALTA pequeno — precisa de ar, não de aperto */ --tr-rotulo:.06em; /* rótulo de gutter, o menor de todos: mais ar ainda */ --tr-gutter:.12em; } /* ══════════════════════════════════════════════════════════════════ MODO ESCURO — e por que ele é UM bloco só. Só os PAPÉIS mudam. Nenhum componente sabe que existe modo escuro: eles pedem --sup, --tinta, --borda, e a resposta muda aqui. Foi exatamente por isso que a camada de papel foi criada (ver "PAPÉIS" acima) — esta é a primeira vez que ela paga o investimento. ESCOPO: o produto NÃO entra no escuro por acidente. Isto só vale quando alguém marca `data-tema="escuro"` no , e hoje só a página de documentação faz isso. O protótipo continua claro sem tocar em nada. POR QUE UM BLOCO SÓ, e não também `@media (prefers-color-scheme: dark)`: o media query exigiria REPETIR todos os valores abaixo, e duas cópias da mesma decisão é o que a Regra 2 proíbe — mesmo raciocínio do `@theme inline`. Quem lê a preferência do sistema é o JavaScript, uma vez, e escreve o atributo. É como next-themes e o próprio shadcn fazem. PENDÊNCIA DE MARCA, registrada e não escondida: --acao no escuro NÃO é o #3D2177 do manual, porque roxo de 12,5:1 sobre branco fica invisível sobre canvas escuro. O valor abaixo mantém o MATIZ (295) e levanta a luminosidade. É derivação necessária, não escolha estética, mas ainda não passou pelo manual de marca — tratar como proposta. ══════════════════════════════════════════════════════════════════ */ :root{color-scheme:light} :root[data-tema="escuro"]{ color-scheme:dark; /* superfície, em degraus — a "surface ladder". Canvas quase preto e NUNCA preto puro: #000 com texto claro produz halo e cansa em leitura longa, e o produto é feito pra ser lido por hora. */ --mundo:#0A0A0D; --papel:#101014; --sup:#101014; --sup-tinta:var(--tinta); --sup-2:rgba(255,255,255,.055); --sup-2-tinta:var(--t2); --sup-3:rgba(255,255,255,.09); --flutua:#16161C; --flutua-tinta:var(--ink); --shell:rgba(16,16,20,.94); /* grafite invertido. Medido depois de escrito, não estimado: ver a seção "contraste conferido" no CHANGELOG desta entrega. */ --tinta:#F5F5F8; --ink:#E6E6EC; --ink-2:#C2C2CE; --t2:#9C9CAA; --t3:#8A8A98; --t4:#8A8A98; --decor:#35353F; --calada:var(--t3); --forte-neutro:var(--tinta); /* linha: no escuro a hairline é clara e translúcida, não escura. Se ficasse escura ela desapareceria dentro do canvas. */ --linha:rgba(255,255,255,.11); --linha-2:rgba(255,255,255,.06); --linha-3:rgba(255,255,255,.22); --borda:var(--linha); --borda-forte:var(--linha-3); /* marca. Mesmo matiz (295), luminosidade levantada — ver pendência acima. --marca-tinta VIRA ESCURA: o preenchimento agora é claro, então texto branco por cima reprovaria. É o par andando junto, como o comentário de PAPÉIS promete. */ --acao:oklch(.75 .15 295); --acao-2:oklch(.82 .13 295); --acao-fraco:color-mix(in srgb,var(--acao) 14%,transparent); --acao-borda:color-mix(in srgb,var(--acao) 38%,transparent); --marca:var(--acao); --marca-tinta:#14101F; /* veredito. O tom de COMPONENTE (--ok, --at, --no, --info) não muda: ele é preenchimento e rail, e o 600 do registry funciona nas duas superfícies. Só o tom de TEXTO sobe pro 400, porque texto escuro sobre canvas escuro não existe. Os valores são do mesmo registry da migração de 25/ago (Tailwind v4, oklch), não estimados. */ --ok-tx:oklch(.792 .209 151.711); /* green-400 */ --at-tx:oklch(.75 .183 55.934); /* orange-400 */ --no-tx:oklch(.704 .191 22.216); /* red-400 */ --info-tx:oklch(.707 .165 254.624); /* blue-400 */ /* tingimento de fundo: DERIVADO do tom de componente por color-mix sobre o canvas, não um hex novo. No claro esses quatro ainda são hex herdado e estão registrados como pendência; no escuro nascem derivados, que é como os do claro deveriam ter nascido. */ --ok-t:color-mix(in srgb,var(--ok) 16%,var(--mundo)); --at-t:color-mix(in srgb,var(--at) 16%,var(--mundo)); --no-t:color-mix(in srgb,var(--no) 16%,var(--mundo)); --info-t:color-mix(in srgb,var(--info) 16%,var(--mundo)); --off:#8A8A98; --off-t:rgba(255,255,255,.06); /* TINTA SOBRE PREENCHIMENTO CHEIO — inverte, e a primeira versão deste bloco errou aqui. Eu tinha escrito `--cheio-tinta:#fff` com o comentário "continua clara, porque --ok/--at/--no seguem sendo o tom 600". A premissa estava errada: `estilo/31-badge.css` linha 66 define `.bdg-ok{--bd-cheio:var(--ok-tx)}` — o preenchimento sólido usa o tom de TEXTO, não o 600. Como o `-tx` sobe pro tom 400 aqui em cima, o badge sólido virava verde claro com texto branco: MEDIDO em 1,78:1, contra os 4,5:1 exigidos. Não foi pego por leitura, foi pego varrendo todo texto da página com canvas depois de desligar as transições. Ler `getComputedStyle().color` durante uma transição de 0.13s devolve o valor interpolado, e foi isso que produziu uma rodada inteira de falso-positivo antes. Vale pros três consumidores do token, todos com fundo claro no escuro: badge sólido (--bd-cheio = tom -tx), os círculos de estilo/12-v3-terreno.css (fundo --t2, que aqui é cinza claro) e o check de estilo/21-check.css (fundo --ok). */ --cheio-tinta:#0A0A0D; /* O AGENTE DE HOVER INVERTE, e este é o token que mais prova que a camada de papel foi desenhada certo: --sombreia existe pra ser misturado a um preenchimento cheio e gerar o hover dele. No claro isso é escurecer (preto). No escuro, escurecer um preenchimento sobre canvas escuro o faz DESAPARECER — então hover é clarear. Um sistema que tivesse `background:#000` escrito na regra do hover não teria como virar esta chave. */ --sombreia:#fff; /* profundidade: no escuro sombra quase não aparece, então o degrau é feito por hairline + superfície mais clara, não por blur. É o que o Linear documenta e o que o Geist faz. */ --sh-1:0 0 0 1px rgba(255,255,255,.06); --sh-2:0 0 0 1px rgba(255,255,255,.08), 0 8px 24px -8px rgba(0,0,0,.6); --sh-3:0 0 0 1px rgba(255,255,255,.10), 0 16px 48px -12px rgba(0,0,0,.75); --sh-acao:0 2px 10px color-mix(in srgb,var(--acao) 30%,transparent); } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ font-family:var(--fonte); background:var(--mundo);color:var(--tinta);overflow:hidden; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; font-size:var(--fs-corpo);line-height:1.55;text-wrap:pretty; /* Inter tem os dois desligados por padrão e os dois importam aqui: `cv11` desambigua o 1 do l e do I, e o produto é cheio de número e de nome de token; `ss03` dá o cedilha desenhado pro português em vez do composto. Sem isto, "111" e "Illl" ficam quase iguais numa coluna de dado — que é o pior lugar possível pra ambiguidade. */ font-feature-settings:'cv11','ss03'; } button,input,textarea{font:inherit;color:inherit;background:none;border:none;outline:none} button{cursor:pointer;transition:background .14s var(--ease),color .14s var(--ease), box-shadow .16s var(--ease),transform .12s var(--ease)} button:active{transform:scale(.975)} h1,h2,h3{text-wrap:balance} /* foco: halo translúcido de 3px, não retângulo duro de 2px. Um outline sólido dentro de um componente com preenchimento (o composer, um chip) lê como erro. Aprendido do shadcn: focus-visible:ring-[3px] ring-ring/50. */ :focus-visible{outline:var(--focus-ring-width) solid var(--anel);outline-offset:1px;border-radius:var(--r-xs)} /* campo de texto tem foco próprio — o anel global desenhava um retângulo roxo dentro do composer */ textarea:focus-visible,input:focus-visible{outline:none} /* `tnum` precisa vir JUNTO com cv11/ss03 e não sozinho: font-feature-settings não acumula, ele substitui. A versão anterior desta regra declarava só "tnum", o que apagava as features do body dentro de todo número tabular — ou seja, a coluna de dado era exatamente onde o 1 voltava a ser ambíguo. */ .num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum','cv11','ss03'} /* achado na revisao de legibilidade de ponta a ponta (26/ago/2026): 10px abaixo do piso — utilitario de rotulo em maiusculas usado em todo o produto ("Premissa", "Onde você parou", "Usado neste cálculo" etc), texto de leitura real, não decorativo. */ .rot{font-size:var(--fs-rotulo);font-weight:650;text-transform:uppercase;letter-spacing:var(--tr-gutter);color:var(--t4)} /* ícone Tabler hidratado */ i[data-ic]{display:block;flex:none;width:var(--is,16px);height:var(--is,16px)} i[data-ic] svg{display:block;width:100%;height:100%}