/* tokens.css — BANCADA ui/v2 · identidade V1 Devoluto aprovada pelo dono em 25/08/2026 ~10h50 BRT * (FOLHA-VISUAL.md §F1). TODA cor do produto passa por aqui. Nenhum outro arquivo declara cor * literal — o teste `test_tokens_css_e_o_unico_lugar_com_cor` reprova qualquer `#hex`/`rgb()` * fora daqui, e essa disciplina continua VIVA na bancada. * * Valores extraídos de `despachos/design-system-25-08/maquetes/maquete-v1-devoluto.html` * (l.19-94). Contrastes medidos por script WCAG 2.x e registrados em `maquetes/RELATORIO-v1.md`. * * TRÊS CAMADAS NOMEADAS (FORM-1 §2, hierarquia ref→sys→component do shadcn/M3): * 1. PRIMITIVO — o valor cru. Ninguém consome primitivo direto num componente. * 2. SEMÂNTICO — o PAPEL do valor (superfície, texto, filete, marca, ação, estado). * 3. COMPONENTE — a medida de uma peça concreta (largura da barra, altura do KPI…). * * DUAS REGRAS INVIOLÁVEIS (MATRIZ-E2 §Convergências 2 e 3, medidas duas vezes por caminhos * independentes): * A. O canal de MARCA (ouro) é SEPARADO do canal de ESTADO (semáforo). O ouro #C9A24B é * filete, marcador, ícone e ponto de gráfico — nunca significado de estado. "Atenção/ * processando" tem hue próprio — âmbar #B07A00 desde 27/08 (F-52, ordem do dono: o rust * #A24E0B anterior era laranja e colava no vermelho; a troca e o preço estão comentados * na CAMADA 1, em --p-amarelo-*). * B. Dourado NUNCA é texto sobre claro (#C9A24B sobre creme = 2,07:1, reprovado). Sobre claro, * dourado de texto é --ouro-ink #8A6215 (4,73:1). Sobre o navy do chrome, #C9A24B é * 7,07:1 e pode ser texto. */ /* ═══════════ CAMADA 1 — PRIMITIVO (valor cru; não consumir direto) ═══════════ */ :root { /* navy — o chrome */ --p-navy-900: #08181E; --p-navy-800: #0B1F26; --p-navy-700: #123340; --p-navy-600: #17414F; --p-navy-500: #1E5262; /* creme — o miolo */ --p-creme-050: #FFFDF7; --p-creme-100: #F3EEE3; --p-creme-200: #F1EBDE; --p-creme-300: #E6DECB; --p-creme-400: #DCD5C4; --p-creme-600: #8E846D; /* tinta */ --p-tinta-900: #0B1F26; --p-tinta-700: #3D4A54; --p-tinta-500: #55646A; --p-tinta-300: #9FB0B5; /* ouro de marca */ --p-ouro-500: #C9A24B; --p-ouro-300: #E3C583; --p-ouro-800: #8A6215; /* petróleo — a ação */ --p-petroleo-800: #0E4C5C; --p-petroleo-700: #0B3D4A; --p-petroleo-500: #14566E; --p-petroleo-100: #DEE9EE; /* canal de ESTADO — hues próprios; nenhum deles é o ouro de marca. Contrastes medidos (RELATORIO-v1.md §1) sobre creme #F3EEE3 E sobre o próprio tint: */ --p-verde-700: #186340; --p-verde-100: #DFEDE4; /* 6,26 · ok */ --p-tijolo-700: #9A3025; --p-tijolo-100: #F5E1DC; /* 6,43 · negativo */ --p-violeta-700: #5B3E8E; --p-violeta-100: #E9E3F3; /* 7,19 · terceiro */ --p-grafite-700: #55646A; --p-grafite-100: #EDE7DA; /* 5,31 · n/a */ /* F-52 (27/08, ordem do dono ~10h44 BRT) — O AMARELO ERA LARANJA. O rust #A24E0B que ocupava este lugar tinha ΔE00 = 15,0 contra o tijolo #9A3025: dois laranjas queimados lado a lado, e o dono não conseguia ler "atenção" contra "negativo" na mesma tela (`/biblioteca`: 23 linhas amarelas × 20 vermelhas). O rust NÃO era acidente — era a fuga do OUTRO lado. Amarelo escuro o bastante para ser TEXTO sobre creme (4,5:1) cai inevitavelmente em cima do ouro de texto --p-ouro-800 #8A6215 (que é, ele mesmo, um amarelo escuro): ΔE00 = 3,4, indistinguível. As duas restrições da regra A brigam entre si, e o dono decidiu qual ganha: distância do VERMELHO. A saída é a mesma que a marca já usa (--marca × --marca-texto): DOIS valores por papel. 500 = traço/preenchimento (faixa da linha, ponto do crachá, fio do KPI, borda) e TEXTO no tema escuro. 3,22:1 sobre creme (piso 3:1 de componente não-textual, WCAG 1.4.11) · 4,85:1 sobre o navy #08181E do tema escuro · ΔE00 32,8 do tijolo (era 15,0) · ΔE00 12,7 do ouro #C9A24B — separado a olho. 700 = TEXTO sobre claro (crachá/chip, sempre sobre o tint 100). 5,12:1 sobre creme · 5,17:1 sobre o próprio tint. Ressalva medida e declarada: ΔE00 3,4 do ouro de texto — o que o separa aqui é o CONTEXTO (ele só aparece dentro de pílula de tint amarelo; ouro de texto nunca tem pílula). Números em RELATORIO-F52 §4. Medidos por `ferramentas/cor_f52.py` (WCAG 2.x + ΔE2000), 27/08 11h2x BRT. */ --p-amarelo-500: #B07A00; --p-amarelo-100: #FAEFCE; --p-amarelo-700: #8A5A00; /* acentos de dado — só ponto de gráfico, fio de KPI e ícone fantasma. Nunca texto. */ --p-dado-azul: #4E93B5; --p-dado-laranja: #D9772F; --p-dado-violeta: #8E76BE; --p-verde-500: #2A8A5E; /* véus e sombras (rgba é cor: mora aqui como todo o resto) */ --p-veu-creme-05: rgba(243, 238, 227, .05); --p-veu-creme-16: rgba(243, 238, 227, .16); --p-veu-creme-30: rgba(243, 238, 227, .30); --p-veu-navy-42: rgba(11, 31, 38, .42); --p-veu-navy-55: rgba(11, 31, 38, .55); /* MOBILE-3 (26/08): parada OPACA de máscara. Em `mask-image` o que importa é o canal alfa — `transparent` esconde, opaco mostra —, e a tinta escolhida nunca é pintada. Mesmo assim `#000` é literal de cor e o `test_tokens_css_e_o_unico_lugar_com_cor` reprova (reprovou: o esmaecimento de borda do stepper caiu aqui na 1ª tentativa). Nome pelo PAPEL, para ninguém confundir com preto de texto — este produto não tem preto de texto. */ --p-mascara-opaca: #000; --p-lav-azul: rgba(78, 147, 181, .20); --p-lav-ouro: rgba(201, 162, 75, .20); --p-lav-laranja: rgba(217, 119, 47, .20); --p-lav-violeta: rgba(142, 118, 190, .20); --p-halo-ouro: rgba(201, 162, 75, .22); --p-branco: #FFFFFF; /* escala de espaço — 4px, emprestada do Tailwind v4 sem depender dele (FORM-1 §2) */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px; /* raio — 6 cartão · 10 painel · 14 modal. O 5px único da v1 é duro demais frente às referências (RELATORIO-v1 §4, hipótese do briefing adotada sem ressalva). */ --r-cartao: 6px; --r-painel: 10px; --r-modal: 14px; --r-pilula: 999px; /* elevação */ --sombra-1: 0 1px 2px rgba(11, 31, 38, .07); --sombra-2: 0 2px 6px rgba(11, 31, 38, .09), 0 1px 2px rgba(11, 31, 38, .06); --sombra-3: 0 10px 30px rgba(11, 31, 38, .20); /* motion — easing única da casa, já compartilhada por builder e hub (MATRIZ-E2 §4) */ --mola: cubic-bezier(.22, 1, .36, 1); --t: 160ms; /* tipografia — self-host em /static/fonts (@font-face no topo do app.css) */ --f-titulo: "Fraunces", "Iowan Old Style", Georgia, serif; --f-corpo: "Hanken Grotesk", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; --f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; } /* ═══════════ CAMADA 2 — SEMÂNTICO (o papel do valor) ═══════════ */ :root { /* superfícies */ --sup-chrome: var(--p-navy-800); --sup-chrome-2: var(--p-navy-700); --sup-chrome-3: var(--p-navy-600); --sup-chrome-borda: var(--p-navy-900); --sup-fundo: var(--p-creme-100); --sup-papel: var(--p-creme-050); --sup-papel-2: var(--p-creme-200); /* texto */ --txt-1: var(--p-tinta-900); /* 14,66:1 sobre creme */ --txt-2: var(--p-tinta-700); /* 7,87:1 */ --txt-3: var(--p-tinta-500); /* 5,31:1 */ --txt-chrome: var(--p-creme-100); /* 14,66:1 sobre navy */ --txt-chrome-2: var(--p-tinta-300); /* 7,55:1 sobre navy */ --txt-sobre-cor: var(--p-branco); /* tinta sobre chip de estado sólido */ /* filetes */ --fio: var(--p-creme-400); --fio-forte: var(--p-creme-600); --fio-chrome: var(--p-veu-creme-16); --fio-chrome-forte: var(--p-veu-creme-30); /* MARCA — só ornamento, ícone e detalhe. Nunca estado; nunca texto sobre claro. */ --marca: var(--p-ouro-500); --marca-clara: var(--p-ouro-300); --marca-texto: var(--p-ouro-800); /* 4,73:1 sobre creme — texto de marca, este sim */ --marca-halo: var(--p-halo-ouro); /* AÇÃO */ --acao: var(--p-petroleo-700); --acao-forte: var(--p-petroleo-800); --acao-txt: var(--p-creme-100); /* 10,19:1 sobre petróleo */ --acao-suave: var(--p-petroleo-100); /* ESTADO — canal independente do canal de marca (regra A) */ --est-neutro: var(--p-petroleo-500); --est-neutro-tint: var(--p-petroleo-100); /* F-52: dois papéis, como --marca × --marca-texto. `--est-processando` é o valor DEFAULT (traço/preenchimento e texto no escuro); quem pinta TEXTO sobre claro usa `-txt`. */ --est-processando: var(--p-amarelo-500); --est-processando-tint: var(--p-amarelo-100); --est-processando-txt: var(--p-amarelo-700); --est-ok: var(--p-verde-700); --est-ok-tint: var(--p-verde-100); --est-ok-2: var(--p-verde-500); --est-negativo: var(--p-tijolo-700); --est-negativo-tint: var(--p-tijolo-100); --est-terceiro: var(--p-violeta-700); --est-terceiro-tint: var(--p-violeta-100); --est-na: var(--p-grafite-700); --est-na-tint: var(--p-grafite-100); /* dado — cor de série, jamais de texto */ --dado-1: var(--p-dado-azul); --dado-2: var(--marca); --dado-3: var(--p-dado-laranja); --dado-4: var(--p-dado-violeta); --foco: var(--p-petroleo-700); --backdrop: var(--p-veu-navy-42); } /* ═══════════ CAMADA 3 — COMPONENTE (medida de peça concreta) ═══════════ */ :root { /* shell — janela real do dono é 1536×756 (memória `builder-janela-real-1536`) */ --barra-larg: 248px; --barra-larg-colapsada: 62px; /* só ícones + tooltip */ --topo-alt: 52px; --coluna-larg: 320px; /* KPI família única: navy + lavagem radial + fio de 3px na cor da métrica */ --kpi-fio: 3px; --kpi-alt: 118px; /* superfícies de conteúdo */ --cartao-pad: 14px 16px; --tabela-linha: 44px; --passo-diam: 30px; --medida-leitura: 72ch; --toque-min: 44px; /* alvo de toque mínimo (mobile-first herdado da v1) */ } /* ═══════════════════════════════════════════════════════════════════════════════ COMPATIBILIDADE — os nomes da v1 apontam para a camada semântica nova. Existe porque a bancada é uma CÓPIA: 20 telas herdadas consomem estes nomes e todas continuam vestidas sem port tela a tela. À medida que uma tela é portada para o vocabulário novo, o nome antigo some dela — e quando ninguém mais o consumir, sai daqui. Duas mudanças de SIGNIFICADO acontecem nesta ponte, e são a decisão aprovada, não deriva: · --warn deixa de ser o ouro #8A6215 e passa a ser o rust --est-processando (regra A); · --raio passa de 5px para 6px (--r-cartao). ═══════════════════════════════════════════════════════════════════════════════ */ :root { /* chrome */ --nav: var(--sup-chrome); --nav-2: var(--sup-chrome-2); --nav-3: var(--sup-chrome-3); --nav-ink: var(--txt-chrome); --nav-muted: var(--txt-chrome-2); --nav-line: var(--fio-chrome); --nav-line-forte: var(--fio-chrome-forte); --ouro: var(--marca); --ouro-2: var(--marca-clara); /* miolo */ --bg: var(--sup-fundo); --panel: var(--sup-papel); --panel-2: var(--sup-papel-2); --ink: var(--txt-1); --ink-2: var(--txt-2); --muted: var(--txt-3); --line: var(--fio); --line-forte: var(--fio-forte); /* o teste `test_paleta_navy_creme_dourado_esta_nos_tokens` cobra este par literal, e ele é a regra B escrita em código: dourado de TEXTO sobre claro é o escuro, nunca #C9A24B. */ --ouro-ink: #8A6215; --accent: var(--acao); --accent-ink: var(--acao-txt); --accent-tint: var(--acao-suave); /* semáforo herdado */ --ok: var(--est-ok); --ok-tint: var(--est-ok-tint); --warn: var(--est-processando); --warn-tint: var(--est-processando-tint); --warn-txt: var(--est-processando-txt); --bad: var(--est-negativo); --bad-tint: var(--est-negativo-tint); --na: var(--est-na); --na-tint: var(--est-na-tint); --sombra: var(--sombra-1); --sombra-modal: var(--sombra-3); /* tipografia herdada — agora aponta para as famílias self-host */ --sans: var(--f-corpo); --serif: var(--f-titulo); --mono: var(--f-mono); /* medidas herdadas */ --larg-sidebar: var(--barra-larg); --alt-topbar: var(--topo-alt); --alt-trilha: 34px; --raio: var(--r-cartao); --gap: var(--e-4); } /* ═══════════ MOBILE-1 cluster B (26/08) — escala tipográfica própria ≤640px ═══════════ * RELATORIO-MOBILE-AUDIT.md: "todas as telas têm nó <14px; menor global 8,5px". Rótulo de * reflow (`th`, `p.rot`, `.secao-rotulo`, badges, legendas) a 9,5-11,5px e corpo denso de * tabela a 12,5/13px ficam ILEGÍVEIS no dedo — o mesmo texto que no desktop tem contraste de * tamanho contra o resto da tela, no celular é a ÚNICA densidade que existe. * Tokens, não literal, porque a MESMA classe (`.rot`, `.legenda`, `.pe`…) se repete em * dezenas de componentes/arquivos — mudar um valor aqui muda todo mundo de uma vez, e a * próxima tela nova herda a régua automaticamente. Escopo: SÓ ≤639.98px — desktop intocado * (cada arquivo consumidor mantém sua declaração fora de qualquer `@media` para o desktop; a * versão ≤639.98px é que passa a referenciar var()). */ @media (max-width: 639.98px) { :root { --fs-rotulo-m: 12px; /* rótulo/sobrancelha/eyebrow: th, .rot, .legenda, badge, faceta-rot */ --fs-corpo-m: 14px; /* corpo denso de tabela/dado (.p1/.p2/td, valores de célula) */ --fs-campo-m: 16px; /* campo de formulário — abaixo disso o Safari iOS dá auto-zoom */ } }