/* ========================================================================== SICOM Expert — Design Tokens v2 "Registro Auditável" ========================================================================== ─── RELAÇÃO COM app.css (leia antes de mexer) ───────────────────────────── Este projeto teve DUAS frentes de trabalho evoluindo o CSS em paralelo, e cada uma criou seu próprio `:root`. O resultado foi 28 tokens com nomes iguais e valores DIFERENTES entre este arquivo e `app.css`. Como os dois declaravam `:root`, quem carregasse por último venceria e o outro viraria decoração — pior: a medição de contraste deixaria de valer para o que a tela realmente mostra. A divergência foi RESOLVIDA por medição, não por escolha. `scripts/reconciliar_tokens.py` avaliou os dois conjuntos contra os mesmos pares e limiares. Antes da reconciliação: app.css ............ 30 pares atendidos, 10 falhas (limiar AAA) tokens-v2.css ...... 40 pares atendidos, 0 falhas Os valores deste arquivo foram adotados em `app.css` (`scripts/aplicar_reconciliacao.py`, 23 trocas de valor). Hoje os dois conjuntos são IDÊNTICOS nos pares medidos: 40 atendidos, 0 falhas em ambos. ─── REGRA DE MANUTENÇÃO ────────────────────────────────────────────────── Os valores de COR aqui e em `app.css` precisam permanecer iguais. Ao mudar um, mude o outro — ou melhor, rode: python scripts/reconciliar_tokens.py --resumo Este arquivo carrega DEPOIS de `app.css`, então em caso de divergência ele vence. É proposital: é aqui que os valores medidos moram. ─── O QUE SÓ EXISTE AQUI ───────────────────────────────────────────────── `app.css` tem os tokens que as telas de hoje consomem. Este arquivo acrescenta a camada que elas ainda não usam — e que é a razão de ele existir: * densidade (3 modos) * movimento (curvas e durações) * tipografia (escala modular) * elevação nomeada * camadas (z-index com nome) * anel de foco de duas cores * destaque (norma oficial) * borda de controle (1.4.11) * espaçamento base 4px * medida de leitura Ordem de carregamento: app.css -> tokens-v2.css ─── Fonte de verdade dos números ────────────────────────────────────────── Toda razão de contraste comentada aqui foi MEDIDA com `python scripts/verificar_contraste_aaa.py`, não estimada. Onde o valor deveria ser diferente para fechar AAA, o comentário diz o motivo e o valor anterior. ─── Limiares WCAG 2.1 que perseguimos ───────────────────────────────────── AAA texto normal ......... >= 7.0:1 AAA texto grande (>=18pt ou >=14pt bold) ... >= 4.5:1 AA componente/ícone/borda com significado . >= 3.0:1 (1.4.11) AAA foco visível ......... >= 3.0:1 contra o entorno (2.4.11/2.4.13) ========================================================================== */ :root { /* ====================================================================== 1. COR — primitivos ====================================================================== Nomes por PAPEL, não por aparência. "azul-700" envelhece mal quando o valor muda; "acao" não. ====================================================================== */ /* 1.1 Tinta e papel (a base de tudo) */ --tinta-1000: #0a1a2f; /* texto de maior peso, nunca puro preto */ --tinta-900: #1b2735; /* texto padrão do corpo */ --tinta-700: #3f4d5c; /* texto secundário */ /* Texto de apoio: MEDIDO. O tom mais claro (#5c6b79) dá 5.48:1 sobre papel e 4.92:1 sobre #f0f3f6 — passa AA mas REPROVA AAA (7:1), e "ajuda de campo" é texto pequeno. #404d58 fecha 8.68:1 e 7.79:1. */ --tinta-500: #404d58; --tinta-300: #93a1ae; /* desabilitado, placeholder (isento: 1.4.3) */ --tinta-200: #c9d2da; --tinta-100: #e2e8ee; --tinta-050: #f0f3f6; --papel: #ffffff; --papel-alt: #f7f9fb; /* 1.2 Ação (azul institucional). Escurecido em relação à v1 para fechar AAA no rótulo do botão: v1: --azul-700 #17518c sobre #ffffff = 8.10:1 (já passava) v1: rótulo branco sobre --azul-600 #1c66b0 = 5.87:1 -> REPROVA AAA v2: rótulo branco sobre --acao #14477a = 9.62:1 -> PASSA */ --acao-900: #0b2545; --acao-800: #123a63; --acao-700: #17518c; --acao-600: #1c66b0; --acao: #14477a; /* superfície de ação sólida */ --acao-hover: #0f3a66; --acao-ativo: #0b2b4c; --acao-suave: #e8f0f9; --acao-suave-borda: #b9d2ec; /* 1.3 Feedback. Os tons v1 de "ok" e "atencao" REPROVAVAM AAA sobre o próprio fundo claro (4.70:1 e 4.54:1) — e selo é texto pequeno, logo o limiar é 7:1, não 4.5. Os valores abaixo foram MEDIDOS e fecham >= 7:1 (relatório em scripts/verificar_contraste_aaa.py). NOTA SOBRE AS BORDAS DE SELO: `--*-borda` existe só como refinamento óptico. Ela NÃO atende 3:1 contra o próprio fundo e isso é intencional — a informação semântica é carregada pelo TEXTO (que atende 7:1) e pelo RÓTULO escrito ("Erro", "Atenção"). O critério 1.4.11 não se aplica a elemento cuja presença não é necessária para entender o significado, e usar só cor para transmitir estado seria falha de 1.4.1 de qualquer forma. */ --sucesso: #0f5533; /* sobre --sucesso-fundo = 7.82:1 */ --sucesso-fundo: #e6f4ec; --sucesso-borda: #9ed3b6; --atencao: #6f4700; /* sobre --atencao-fundo = 7.40:1 */ --atencao-fundo: #fdf3e0; --atencao-borda: #e8c98a; --perigo: #9e1b14; /* sobre --perigo-fundo = 7.44:1 */ --perigo-fundo: #fdecea; --perigo-borda: #e9a9a3; --info: #123a63; /* sobre --info-fundo = 10.08:1 */ --info-fundo: #e8f0f9; --info-borda: #b9d2ec; --neutro: #3d4a53; /* sobre --neutro-fundo = 7.39:1 */ --neutro-fundo: #e2e8ee; /* 1.4 Acento de dado (o amarelo do SICOM). Usado só onde significa "isto vem da regra oficial": código de erro ME132, trecho de evidência, âncora de citação. Nunca decorativo. Sobre fundo escuro apenas (é uma tinta clara). */ --destaque: #ffd166; --destaque-tinta: #2b1d00; /* texto sobre --destaque = 11.4:1 */ /* ====================================================================== 2. COR — semânticos (o que os componentes usam) Tema escuro sobrescreve APENAS este bloco. ====================================================================== */ --fundo-pagina: var(--tinta-050); --superficie: var(--papel); --superficie-alt: var(--tinta-050); --superficie-suave: var(--acao-suave); --superficie-elevada: var(--papel); --texto: var(--tinta-900); --texto-medio: var(--tinta-700); --texto-fraco: var(--tinta-500); --texto-inverso: var(--papel); --borda: var(--tinta-100); --borda-forte: var(--tinta-200); --borda-controle: #7d8b98; /* >=3:1 sobre papel: limite de input visível (1.4.11) */ --link: var(--acao-700); --link-forte: var(--acao-900); --link-visitado: #5a3f8a; --acao-texto: var(--papel); --foco: var(--acao-600); --foco-largura: 3px; --foco-offset: 2px; /* Anel duplo de foco: um aro CLARO por fora e um ESCURO por dentro, com afastamento do elemento. Motivo medido: NENHUMA tinta fecha 3:1 contra --acao #14477a (preto puro dá 2.21:1), então um anel colado no botão primário seria invisível. Com afastamento, o aro encontra o FUNDO da página — e aí tanto o claro quanto o escuro passam. Esta é a técnica "two-color focus indicator" da WCAG 2.4.13 (Focus Appearance). */ --foco-aro-claro: #ffffff; --foco-aro-escuro: #0a1a2f; /* Topo (faixa institucional). Tinta CLARA sobre azul escuro. No tema escuro estes tokens também mudam (ver bloco do tema escuro): `--texto-inverso` NÃO serve aqui, porque no escuro ele é escuro — foi exatamente esse descuido que deixou o cabeçalho ilegível na primeira medição. Tokens de topo são explícitos justamente para não dependerem da inversão geral. */ --topo-fundo: #0b2545; --topo-texto: #ffffff; /* 15.39:1 sobre --topo-fundo */ --topo-texto-suave: #c3d6ec; /* 10.37:1 sobre --topo-fundo */ --topo-borda: #1b3a5e; /* ====================================================================== 3. TIPOGRAFIA ====================================================================== Estratégia: uma serifada de texto para LEITURA (parecer, objeto, descrição do campo) e uma sans de interface para CONTROLE (rótulo, botão, tabela). É a distinção de documento técnico — o mesmo princípio de um parecer jurídico com formulário anexo. Escala: modular razão 1.25 (terça menor), base 16px, ancorada em 4px. Números tabulares OBRIGATÓRIOS em tabela, valor monetário, processo e código: sem isso, coluna de valor não alinha e a leitura de planilha quebra. ====================================================================== */ --fonte-interface: "Inter var", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fonte-documento: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif; --fonte-mono: "JetBrains Mono", "Cascadia Code", ui-monospace, "SFMono-Regular", Consolas, monospace; --texto-2xs: 0.694rem; /* 11.1px — só micro-rótulo, nunca corpo */ --texto-xs: 0.800rem; /* 12.8px — selo, nota de rodapé de tabela */ --texto-sm: 0.875rem; /* 14.0px — texto de apoio, célula densa */ --texto-md: 1.000rem; /* 16.0px — CORPO. Nunca abaixo disso em formulário */ --texto-lg: 1.250rem; /* 20.0px — subtítulo de bloco */ --texto-xl: 1.563rem; /* 25.0px — título de seção */ --texto-2xl: 1.953rem; /* 31.3px — título de página */ --texto-3xl: 2.441rem; /* 39.1px — número de painel */ --peso-regular: 400; --peso-medio: 500; --peso-forte: 600; --peso-titulo: 650; --altura-linha-apertada: 1.15; /* título */ --altura-linha-padrao: 1.55; /* corpo */ --altura-linha-ampla: 1.70; /* texto corrido longo: parecer, objeto */ --rastreio-apertado: -0.011em; --rastreio-padrao: 0; --rastreio-amplo: 0.02em; --rastreio-caixa-alta: 0.06em; /* rótulo em CAIXA ALTA (não use em corpo) */ --medida-leitura: 68ch; /* largura máxima de texto corrido */ /* ====================================================================== 4. ESPAÇO — base 4px ====================================================================== Nome por passo, não por pixel: permite mudar a escala sem renomear. ====================================================================== */ --esp-0: 0; --esp-1: 0.25rem; /* 4px — separação entre rótulo e ajuda */ --esp-2: 0.5rem; /* 8px — padding interno de selo */ --esp-3: 0.75rem; /* 12px — gutter de célula de tabela densa */ --esp-4: 1rem; /* 16px — padding padrão de superfície */ --esp-5: 1.25rem; /* 20px */ --esp-6: 1.5rem; /* 24px — entre campos */ --esp-8: 2rem; /* 32px — entre seções */ --esp-10: 2.5rem; /* 40px */ --esp-12: 3rem; /* 48px — respiro de topo de página */ /* ====================================================================== 5. FORMA — raio, borda, elevação ====================================================================== Esta é a decisão visual que define a personalidade: **quase reto**. Raio 2–4px. Motivo: o produto é um registro contábil; canto arredondado comunica consumo, não conformidade. A "ousadia" aqui não é forma chamativa, é densidade legível com hierarquia clara. Elevação também é contida: sombra afirma camada, não decora. Somente elementos que realmente flutuam (menu, diálogo, aviso fixo) recebem sombra; cartão e tabela são separados por borda. ====================================================================== */ --raio-nenhum: 0; --raio-sm: 2px; /* selo, célula */ --raio-md: 4px; /* botão, input, cartão */ --raio-lg: 6px; /* diálogo */ --raio-completo: 999px; /* só avatar/pílula de contagem */ --borda-largura-fina: 1px; --borda-largura-forte: 2px; --borda-largura-foco: var(--foco-largura); /* Sombras com dois componentes (contato + difusão): leem melhor que blur único */ --elev-0: none; --elev-1: 0 1px 2px rgba(10, 26, 47, 0.06), 0 1px 1px rgba(10, 26, 47, 0.04); --elev-2: 0 2px 4px rgba(10, 26, 47, 0.08), 0 1px 2px rgba(10, 26, 47, 0.06); --elev-3: 0 8px 16px rgba(10, 26, 47, 0.10), 0 2px 4px rgba(10, 26, 47, 0.06); --elev-4: 0 16px 32px rgba(10, 26, 47, 0.14), 0 4px 8px rgba(10, 26, 47, 0.08); /* ====================================================================== 6. CAMADAS (z-index com nome — nunca número solto no componente) ====================================================================== */ --camada-base: 0; --camada-aderente: 100; /* cabeçalho de tabela grudado */ --camada-indice: 200; /* índice lateral de formulário */ --camada-menu: 300; --camada-aviso: 400; /* faixa de mensagem fixa */ --camada-veu: 500; /* fundo escurecido de diálogo */ --camada-dialogo: 600; /* ====================================================================== 7. MOVIMENTO ====================================================================== Princípio: o movimento explica ORIGEM e CONSEQUÊNCIA, não enfeita. Respeita `prefers-reduced-motion` (ver bloco no fim do arquivo). Curvas: --mov-suave desacelera no fim — entrada de superfície --mov-padrao equilíbrio — maioria das transições --mov-acento sai rápido, chega devagar — aparece algo importante --mov-saida acelera no fim — algo indo embora ====================================================================== */ --mov-suave: cubic-bezier(0.16, 1, 0.30, 1); --mov-padrao: cubic-bezier(0.20, 0, 0.20, 1); --mov-acento: cubic-bezier(0.05, 0.70, 0.10, 1); --mov-saida: cubic-bezier(0.40, 0, 1, 1); --dur-instantaneo: 90ms; /* mudança de cor em hover */ --dur-rapido: 150ms; /* foco, selo, checkbox */ --dur-padrao: 220ms; /* expandir linha, trocar aba, toast entra */ --dur-lento: 320ms; /* diálogo, painel lateral */ --dur-deliberado: 480ms; /* realce de âncora "onde estou", 1x por navegação */ /* ====================================================================== 8. DENSIDADE ====================================================================== Três modos reais. Servidor público alterna entre monitor grande (varredura de lista) e notebook com tela baixa (edição de formulário). Densidade é preferência do usuário, persistida. ====================================================================== */ --densidade-linha: 34px; /* confortável (padrão) */ --densidade-linha-compacta: 26px; --densidade-campo: 40px; --densidade-campo-compacta: 34px; /* Alvo de toque: WCAG 2.5.5 nível AAA exige 44x44px. Em tabela densa isso é inviável sem destruir a densidade — então a garantia é dada por um alvo ampliado invisível (::after) em vez de aumentar a linha. Ver app.css. */ --alvo-toque-minimo: 44px; /* ====================================================================== 9. LARGURAS DE LEIAUTE ====================================================================== */ --largura-conteudo: 1180px; --largura-formulario: 820px; --largura-indice: 240px; --largura-menu: 248px; --altura-topo: 60px; } /* ========================================================================== TEMA ESCURO ========================================================================== Não é inversão: é reponderação. Em ambiente de baixa luz, o contraste alto demais cansa e a superfície clara "queima". Aqui o texto cai de #e6ebf1 para tom levemente quente e as bordas ganham presença, porque no escuro a separação por borda fraca desaparece. ========================================================================== */ @media (prefers-color-scheme: dark) { :root { --tinta-1000: #f2f6fa; --tinta-900: #e6ebf1; --tinta-700: #c3ccd6; /* MEDIDO: o tom v1 (#9aa7b5) dava 6.68:1 sobre superficie, reprovando AAA. #b0bcc8 fecha 8.48:1 sobre superficie e 7.40:1 sobre superficie-alt. */ --tinta-500: #b0bcc8; --tinta-300: #6f7c8a; --tinta-200: #2b3440; --tinta-100: #232b36; --tinta-050: #111720; --papel: #1a2029; --papel-alt: #1f2630; --fundo-pagina: #111720; --superficie: #1a2029; --superficie-alt: #232b36; --superficie-suave: #16304d; --superficie-elevada: #1f2630; --texto: #e6ebf1; --texto-medio: #c3ccd6; /* Derivado de --tinta-500, e NÃO um literal: foi um literal fixo aqui (#9aa7b5) que manteve o texto de apoio em 6.68:1 e reprovou AAA mesmo depois de eu corrigir o primitivo. Token semântico deve sempre apontar para o primitivo, senão existem duas fontes de verdade. */ --texto-fraco: var(--tinta-500); /* = #b0bcc8 -> 8.48:1 */ --texto-inverso: #10161e; --borda: #232b36; --borda-forte: #2b3440; /* MEDIDO: #5b6774 dava 2.84:1 sobre superficie (reprova o 3:1 de 1.4.11, que exige que o LIMITE do controle seja perceptivel). #616e7c fecha 3.14:1 sobre superficie e 3.45:1 sobre o fundo da pagina. */ --borda-controle: #616e7c; --link: #8ec5ff; --link-forte: #b7dcff; --link-visitado: #c9b6f0; /* Botoes no tema escuro. MEDICAO QUE MUDOU O DESENHO: nao existe azul mais CLARO que mantenha rotulo branco em 7:1 -- o melhor possivel (#1f5c94) da 6.96:1. Clarear no hover, que e' o instinto, e' portanto inalcancavel em AAA aqui. Solucao: inverter a convencao e ESCURECER no hover (padrao legitimo em UI escura). Os tres estados fecham AAA: base #1d5589 -> 7.74:1 hover #17456f -> 9.36:1 ativo #123a5e -> 11.09:1 O feedback de interacao continua existindo: o botao muda de cor. Trocar "clareia" por "escurece" nao custa acessibilidade nem confunde. */ --acao: #1d5589; --acao-hover: #17456f; --acao-ativo: #123a5e; --acao-suave: #16304d; --acao-suave-borda: #2c5480; --acao-texto: #ffffff; --foco: #8ec5ff; /* No escuro os fundos de feedback são escurecidos e o texto clareado: manter o fundo claro obrigaria texto escuro e criaria "buracos" na tela. */ --sucesso: #8ee0b0; --sucesso-fundo: #14301f; --sucesso-borda: #245c3c; --atencao: #f3ce85; --atencao-fundo: #35270a; --atencao-borda: #6b5216; --perigo: #ffb0a8; --perigo-fundo: #3a1614; --perigo-borda: #6f2721; --info: #a8cdf0; --info-fundo: #16304d; --info-borda: #2c5480; --neutro: #c3ccd6; --neutro-fundo: #2b3440; --destaque: #ffd166; --destaque-tinta: #2b1d00; --foco-aro-claro: #0a1420; --foco-aro-escuro: #ffffff; /* Topo no escuro: mantém a faixa azul profunda (identidade institucional) e a tinta clara. Sem esta sobrescrita, o cabeçalho herdaria `--texto-inverso` escuro sobre fundo escuro = 1.18:1, ilegível. */ --topo-fundo: #0d1420; --topo-texto: #ffffff; /* 18.45:1 */ --topo-texto-suave: #b7c8dc; /* 10.82:1 */ --topo-borda: #26313f; /* Sombra no escuro precisa ser mais opaca para ser percebida */ --elev-1: 0 1px 2px rgba(0, 0, 0, 0.35); --elev-2: 0 2px 4px rgba(0, 0, 0, 0.40); --elev-3: 0 8px 16px rgba(0, 0, 0, 0.45); --elev-4: 0 16px 32px rgba(0, 0, 0, 0.55); } } /* ========================================================================== ALTO CONTRASTE FORÇADO ========================================================================== `prefers-contrast: more` e o modo de contraste do Windows. Aqui o objetivo não é estética: é garantir que borda de controle e foco continuem perceptíveis quando o usuário pediu contraste máximo. ========================================================================== */ @media (prefers-contrast: more) { :root { --borda: #000000; --borda-forte: #000000; --borda-controle: #000000; --texto-fraco: var(--tinta-900); --foco-largura: 4px; --elev-1: none; --elev-2: none; --elev-3: none; --elev-4: none; } } @media (prefers-color-scheme: dark) and (prefers-contrast: more) { :root { --borda: #ffffff; --borda-forte: #ffffff; --borda-controle: #ffffff; --texto-fraco: var(--tinta-900); } } /* ========================================================================== MOVIMENTO REDUZIDO ========================================================================== Não basta zerar a duração: transição de 0ms ainda dispara evento e pode causar mudança abrupta de layout. Aqui reduzimos a duração E removemos deslocamento, mantendo apenas mudança de opacidade/cor, que é o que a preferência permite (vestibular, não visual). ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dur-instantaneo: 0ms; --dur-rapido: 0ms; --dur-padrao: 0ms; --dur-lento: 0ms; --dur-deliberado: 0ms; } } /* ========================================================================== ESCALA DE TEXTO DO SISTEMA ========================================================================== Toda a escala tipográfica é declarada em `rem`, com base em 16px. Isso faz a interface acompanhar o tamanho de fonte definido pelo usuário no navegador ou no sistema operacional, sem nenhuma regra adicional — requisito do critério 1.4.4 (Redimensionar texto) e parte do AAA. Regra de manutenção: NUNCA declare `font-size` em `px`, nem `height` fixa em elemento que contenha texto (use `min-height`). ========================================================================== */