/* * tema.css -- SÓ TOKENS (W8). Nenhuma regra de componente vive aqui. * * Referência: DESIGN SYSTEM OFICIAL DA EXPERTISE (daumcheck/design/), importado * em 25/08/2026. Substitui o tema-PE do deck (#44B69C + Arial Narrow), que * morreu. Fundo claro off-white -- decisão do dono do produto no eixo 1 da calibração. * * COMO ESTE ARQUIVO FUNCIONA: ele não escolhe cor nenhuma. Ele TRADUZ os * tokens oficiais (em inglês, genéricos) para os nomes semânticos que os * componentes usam (`--dc-*`, em português). Duas gramáticas, uma camada de * tradução -- por isso a troca de referência inteira coube num arquivo só, e * `app.css`, os HTML e os módulos ES não mudaram uma linha. * * A regra que isso preserva: mudança de marca entra por `design/`, é copiada * verbatim para `expertise-tokens.css`, e reaparece aqui como remapeamento. * Ninguém caça hexadecimal em componente. `_integra_t6.py` falha se a cópia * divergir do original. * * CONTRASTE (WCAG 2.1, calculado em `epis/marco/_contraste.py`, não estimado * -- recalculado em 25/08, depois de o degrau ocre entrar): * texto sobre fundo ..................... 13.57:1 * texto sobre superfície ................ 14.42:1 * texto sobre superfície-alta ........... 12.61:1 * texto-fraco sobre fundo ................ 7.79:1 * texto-fraco sobre superfície ........... 8.28:1 * acento sobre fundo (link/ação) ......... 8.20:1 * texto-em-acento sobre acento (botão) ... 8.20:1 * texto-em-acento sobre acento-hover ..... 9.81:1 * erro sobre fundo ....................... 5.56:1 * erro sobre superfície .................. 5.91:1 * alerta sobre fundo ..................... 5.01:1 * alerta sobre superfície ................ 5.33:1 * alerta sobre o wash do card (12%) ...... 4.53:1 <- o par que decidiu * neutro sobre fundo ..................... 3.39:1 (mín. 3:1, componente) * neutro sobre superfície ................ 3.61:1 (mín. 3:1, componente) * acento sobre superfície (foco) ......... 8.72:1 * * TRÊS COISAS QUE A MEDIÇÃO DECIDIU, e valem registro: * * 1. VERDE TECH NÃO PODE SER INDICADOR. #DBFA3C sobre off-white dá 1.08:1 -- * praticamente invisível. O brandbook o chama de cor de "foco e * microinteração", mas isso vale sobre fundo escuro; no fundo claro que a * o dono do produto escolheu, um contorno de foco em verde tech não existiria para quem * precisa dele. O foco usa o verde escuro (--border-focus do próprio design * system, 8.72:1). O verde tech fica para preenchimento decorativo, onde * não carrega informação -- respeitando também o teto de 10% da proporção. * * 2. O ALERTA DA MARCA NÃO ALCANÇA AA COMO TEXTO -- e o dono do produto aprovou o degrau * DUAS vezes, porque o primeiro não bastou. #B07A14 sobre off-white dá * 3.41:1, abaixo dos 4.5:1 de texto normal. O primeiro degrau (#956711, * 4.55:1, eixo 4 em 25/08 17:54) resolvia sobre a superfície LIMPA -- mas o * card tingido do eixo 3 escurece justo o fundo sob o nome do estado, e ali * ele caía para 4.14:1. A colisão foi medida antes de landar * (`epis/marco/_dbg_wash.py`), virou pergunta fechada, e ela respondeu em * 25/08 18:40: escurecer mais um degrau. #8C6110 -- mesmo matiz e saturação, * 4.53:1 sobre o próprio wash, 5.33:1 sobre a superfície limpa. É a escala * que o design system já usa em green-dark-600/700. #B07A14 segue sendo a * cor da marca FORA da interface. * * 3. `--gray-dark` seria o neutro óbvio, mas mede 2.64:1 sobre o off-white -- * abaixo dos 3:1 de componente. `--text-subtle` é token oficial, um passo * mais escuro, e passa (3.39:1). Trocado por medição, não por gosto. * * O CARD TINGIDO ESTÁ NO AR (eixo 3, opção C), e a intensidade do wash é * token: `--dc-wash-estado`, 12% -- que é onde o 4.53:1 dela foi medido, * dentro da faixa "~10-12%" que o dono do produto aprovou. Os 5 estados × 5 pares foram * remedidos nas duas pontas da faixa em `epis/marco/_dbg_card_tingido.py`: * nenhum abaixo do mínimo, e o pior de todos é justamente o nome do estado * ocre, com os tais 4.53:1. * * QUAL ESTADO É OCRE -- e isto mudou de dono: o mock que o dono do produto aprovou nos eixos * 3 e 4 pinta de ocre o "NÃO CONFERIDO" (`.cartao--pendente`), enquanto quem * usava ocre aqui era o `.cartao--parcial`. A tela segue o mock; o Parcial * passou para o neutro. Está declarado no aceite visual do dono do produto -- inverter é * trocar duas linhas, e nenhum contraste cai se ela inverter. */ /* Os tokens oficiais entram por no HTML, ANTES deste arquivo -- não por * @import. Duas razões: @import serializa o download (o navegador só descobre o * segundo arquivo depois de baixar o primeiro), e o teste do builder das telas * exige que este arquivo tenha UM bloco só, o :root. O teste está certo: é o * que impede que "tema.css" volte a ter regra de componente dentro. Cedi ao * teste em vez de afrouxá-lo. (É também por isso que o @font-face do Exo mora * em `app.css`: ele é um segundo bloco, e não é token.) */ :root { /* ------------------------------------------------------------- cor Tradução dos aliases semânticos oficiais. */ --dc-cor-fundo: var(--bg); /* off-white #F6F5EE */ --dc-cor-superficie: var(--surface); /* papel do card */ --dc-cor-superficie-alta: var(--surface-2); /* faixa, selo apagado */ --dc-cor-borda: var(--divider); /* decorativa */ --dc-cor-borda-foco: var(--border-focus); /* verde escuro: ver nota 1 */ --dc-cor-acento: var(--brand); /* verde escuro -- ação */ --dc-cor-acento-hover: var(--brand-hover); --dc-cor-acento-secundario: var(--brand-active); --dc-cor-texto: var(--text); /* chumbo */ --dc-cor-texto-em-acento: var(--text-on-brand); --dc-cor-texto-fraco: var(--text-muted); --dc-cor-neutro: var(--text-subtle); /* ver nota 3 */ --dc-cor-erro: var(--negative); /* tijolo dessaturado */ /* O ÚNICO hexadecimal cru deste arquivo, e ele é assim de propósito: o degrau não existe como token oficial. `expertise-tokens.css` é cópia verbatim do design system e não se edita; #B07A14 segue sendo a cor da marca FORA da interface. Isto é extensão, não correção. Ver nota 2. */ --dc-cor-alerta: #8C6110; /* ------------------------------------------------ estado no card (eixo 3) Opção C, decisão do dono do produto: o card mostra o estado tingindo o fundo inteiro de leve e pondo a BORDA na cor -- sem filete lateral, sem selo. Estes três tokens são o contrato dessa forma: o componente escreve a regra uma vez e cada estado só reaponta a cor, então acrescentar estado não é reescrever card. O default é o neutro de propósito: card cujo estado não se reconhece (W10) não pode herdar a cor de nenhum estado que se reconhece. `--dc-cor-estado-nome` existe separado porque a cor que serve de wash nem sempre serve de texto -- no neutro ela não serve (3.39:1). */ --dc-cor-estado: var(--dc-cor-neutro); --dc-cor-estado-nome: var(--dc-cor-texto-fraco); --dc-wash-estado: 12%; /* -------------------------------------------------------- tipografia Exo é a principal; Verdana é a auxiliar oficial e cobre o que o @font-face não alcançar. Sem webfont remota: o W9 proíbe rede para fora, então o TTF é servido pelo próprio servidor (web/static/fonts/). */ --dc-fonte: var(--font-primary); /* TAMANHOS EM REM -- decisão do dono do produto, 25/08 17:58 ("sim"). Os tokens oficiais são em px, e px ignora o zoom de fonte do navegador: quem aumenta a fonte do sistema não vê efeito nenhum. Aqui eles são REDECLARADOS em rem sobre a base de 16px, que é o padrão do navegador -- 1rem = 16px enquanto ninguém mexe, e escala junto quando alguém mexe. O risco disto é drift silencioso: se o design system mudar um px, este arquivo passa a mentir. Por isso `_integra_t6.py` recalcula px/16 e falha se algum valor daqui divergir do oficial. */ --dc-fs-h1: 2.25rem; /* oficial 36px */ --dc-fs-h3: 1.25rem; /* oficial 20px */ --dc-fs-body-lg: 1.0625rem; /* oficial 17px */ --dc-fs-body: 1rem; /* oficial 16px */ --dc-fs-body-sm: 0.875rem; /* oficial 14px */ --dc-fs-caption: 0.75rem; /* oficial 12px */ --dc-texto-display: var(--fw-bold) var(--dc-fs-h1) / var(--lh-snug) var(--dc-fonte); --dc-texto-titulo: var(--fw-semibold) var(--dc-fs-h3) / var(--lh-snug) var(--dc-fonte); --dc-texto-subtitulo: var(--fw-semibold) var(--dc-fs-body-lg) / var(--lh-snug) var(--dc-fonte); --dc-texto-corpo: var(--fw-regular) var(--dc-fs-body) / var(--lh-body) var(--dc-fonte); --dc-texto-pequeno: var(--fw-regular) var(--dc-fs-body-sm) / var(--lh-body) var(--dc-fonte); --dc-texto-micro: var(--fw-medium) var(--dc-fs-caption) / var(--lh-snug) var(--dc-fonte); /* PESO E ALTURA DE LINHA, à parte (tarefa T3, spec daumcheck-ui-reskin, design.md §3) -- as combinações `--dc-texto-*` acima já bastam para a maioria dos textos, mas alguns componentes da pele nova (rótulo de campo, aviso discreto, contador de seleção) pedem peso Medium com `--dc-fs-body-sm`, uma combinação que nenhum `--dc-texto-*` cobre. Em vez de inventar mais uma combinação fixa (`--dc-texto-rotulo` e por aí vai, a cada componente novo), esta camada expõe peso e altura de linha soltos -- `dc.css` só usa ESTES nomes, nunca `--fw-*`/`--lh-*` crus (regra mecânica: nenhum `var(--` em `dc.css` fora de `--dc-*`). */ --dc-peso-regular: var(--fw-regular); --dc-peso-medio: var(--fw-medium); --dc-peso-semibold: var(--fw-semibold); --dc-peso-bold: var(--fw-bold); --dc-lh-justo: var(--lh-snug); --dc-lh-corpo: var(--lh-body); --dc-largura-leitura: 65ch; /* não é token de marca: é medida de legibilidade */ /* -------------------------------------------------------- espaçamento Grade de 8px do design system, em rem. Depois que o degrau de 12px morreu (eixo 5, decisão do dono do produto em 25/08 17:57 -- "os ~10 pontos que usavam 12px colapsam pra 8"), esta escala virou 1:1 com a oficial: --dc-espaco-N é --space-N, sem tabela de tradução na cabeça de ninguém. Manter assim -- degrau fora da grade se reintroduz sozinho quando os nomes desalinham. */ --dc-espaco-1: 0.25rem; /* oficial 4px */ --dc-espaco-2: 0.5rem; /* oficial 8px */ --dc-espaco-3: 1rem; /* oficial 16px */ --dc-espaco-4: 1.5rem; /* oficial 24px */ --dc-espaco-5: 2rem; /* oficial 32px */ --dc-espaco-6: 3rem; /* oficial 48px */ --dc-espaco-7: 4rem; /* oficial 64px */ --dc-espaco-8: 6rem; /* oficial 96px */ /* -------------------------------------------------------------- raio Ficam em px de propósito: raio é propriedade da superfície, não medida de leitura. Em rem, quem aumentasse a fonte ganharia cantos cada vez mais redondos sem ter pedido isso. */ --dc-raio-sm: var(--radius-sm); --dc-raio-md: var(--radius-md); --dc-raio-lg: var(--radius-lg); --dc-raio-pill: var(--radius-pill); /* ------------------------------------------------------------ sombra Sombras leves: o brandbook proíbe sombra pesada, e sobre fundo claro a sombra do tema anterior (preto a 40-45%) viraria mancha. */ --dc-sombra-repouso: var(--shadow-sm); --dc-sombra-elevada: var(--shadow-lg); --dc-sombra-foco: var(--ring); /* anel verde escuro, não verde tech */ /* --------------------------------------------------------- movimento */ --dc-transicao-rapida: var(--dur-fast) var(--ease-standard); --dc-transicao-fase: var(--dur-base) var(--ease-standard); /* ------------------------------------------- eixo neo-brutalista (C8) Emenda de 07/09 (T6, spec daumcheck-ui-reskin, design.md §2 C8): SÓ ACRESCENTA -- nenhum valor acima mudou (D13, prova em test_ui_reskin_telas.py). Nomes fechados; `dc.css` usa só estes (mais os --dc-* de C3). Cada um aponta pra um token oficial de expertise-tokens.css ou é medida do desenho (design.md §7). */ --dc-borda-controle: 2px solid var(--dc-cor-texto); /* N1 -- botão, campo, select, quadrado de seleção */ --dc-borda-controle-tracejada: 2px dashed var(--dc-cor-texto); /* zona de arquivo */ --dc-cor-borda-forte: var(--gray); /* #BFBBAF -- cartão, lista, fantasma */ --dc-borda-cartao: 1px solid var(--dc-cor-borda-forte); --dc-sombra-dura: 4px 4px 0 var(--dc-cor-texto); /* N2 -- só o primário */ --dc-sombra-dura-hover: 5px 5px 0 var(--dc-cor-texto); --dc-raio-controle: 0; /* N3 -- os --dc-raio-* antigos ficam (trilha velha) */ --dc-raio-cartao: 0; --dc-raio-selo: 0; --dc-fs-h2: 1.625rem; /* --fs-h2 26px (o 28 do desenho vai ao degrau) */ --dc-fs-label: 0.8125rem; /* --fs-label 13px */ --dc-lh-apertado: var(--lh-tight); /* 1.1 */ --dc-peso-extrabold: var(--fw-extrabold); /* 800 -- só wordmark */ --dc-espacamento-titulo: -0.02em; --dc-espacamento-rotulo: 0.08em; --dc-espacamento-marca: -0.04em; --dc-cor-destaque: var(--accent); /* Verde Tech -- só onde R32 permite */ --dc-cor-destaque-hover: var(--green-tech-600); /* #B6D420 */ --dc-cor-superficie-hover: var(--green-dark-050); /* #EEF3EC -- hover de secundário e da zona de arquivo */ --dc-cor-superficie-invertida: var(--surface-invert); /* chumbo -- barra de seleção; painel do login (R37); P3 na emenda */ --dc-sombra-selo: 2px 2px 0 var(--dc-cor-acento); /* selo "check" do wordmark (R33) -- verde escuro */ --dc-sombra-selo-hero: 10px 10px 0 var(--dc-cor-acento); /* selo do hero do login (R37) */ --dc-fs-display: 3.5rem; /* --fs-display 56px -- degrau do DS (era o hero do login até T6c) */ --dc-fs-hero: 7rem; /* 112 -- hero do login a partir de 64rem: o mockup manda (decisão 07/09); conserto medido T6c, 08/09 */ --dc-lh-hero: 0.86; /* hero do login */ --dc-espacamento-hero: -0.05em; /* hero do login */ /* ---- emenda G (T17, D-T17.2, [aprovado 08/09 18:09]): sete tokens que só o desenho tem. C8 emendado: a lista fechada ganha estes sete; nenhum valor existente muda. (A nota de --dc-cor-alerta acima, "único hexadecimal cru", passa a ter estes quatro hex como companhia -- decisão do dono do produto, P-2 do pacote de 08/09.) */ --dc-fs-h1-tela: 2.5rem; /* 40 -- h1 das telas (G-a); --dc-fs-h1 (36) fica para h2/login/DS */ --dc-cor-texto-apagado: #6F6A60; /* passo futuro do stepper; "ignorado"; Conferir desabilitado */ --dc-cor-filete: var(--off-white-3); /* #E4E2D6 -- filete do rodapé do cartão; linhas de arquivo; cartão de célula */ --dc-cor-wash-erro: #FBF1EE; /* fundo da linha de arquivo ilegível */ --dc-cor-wash-destaque: #F3FBD0; /* hover da zona de soltar (R32(h)) */ --dc-cor-branco: #FFFFFF; /* miniatura e moldura (Slides/Resultados); hover do cartão de projeto */ --dc-sombra-dura-destaque: 4px 4px 0 var(--dc-cor-destaque); /* só #btn-conferir-slides (R29 emendada, G-j) */ }