/* UIX01 / HANDOFF-056 Fase 1 — design system: tokens de cor, tipografia e geometria. Paleta do mockup "CRM Eternali — UI v2" com os ajustes de contraste da DEC-0023 §D3. GATE (HANDOFF-056 §4): tudo aqui vive sob `:root[data-uix01-tokens]`. O atributo só é posto no quando a flag UIX01_TOKENS_ENABLED está ON. Com a flag OFF o seletor não casa, NADA deste arquivo se aplica e o app fica idêntico ao de hoje. O escopo `:root[attr]` (0,2,0) também vence o `:root` (0,1,0) do base.css independentemente da ordem dos — por isso a paleta legada não precisa sair de lá, e o rollback é só desligar a flag. TEMA: claro é o padrão (DEC-0022 §D3). O escuro entra por `data-theme="dark"` no e redefine SÓ os `--u-*`; os aliases legados no fim do bloco claro leem `var(--u-*)` e acompanham sozinhos, porque custom property resolve no uso. CONTRASTE (WCAG 2.1, medido par a par sobre fundo E superfície): claro texto 11,86 · secundário 4,54/4,83 · verde-texto 4,54/4,83 âmbar 4,71/5,01 (e 4,54 sobre o próprio fundo âmbar) · vermelho 5,28/5,62 escuro texto 15,18 · secundário 7,79/7,08 (terciário removido na F4, ver abaixo) verde 7,11/6,46 · âmbar 8,17/7,42 · vermelho 7,26/6,59 🔴 `--u-texto-3` FOI REMOVIDO NA FASE 4 (UIX01/HANDOFF-056). Histórico e motivo: O terciário claro era `#9AA095`, 2,52:1, abaixo do mínimo DE PROPÓSITO (DEC-0023 §D3): levá-lo a 4,5:1 daria `#6F736B`, indistinguível do secundário, e a hierarquia de três níveis morreria. Em troca valia a regra vinculante “o terciário nunca carrega informação” — só decorativo ou redundante. A F3 tirou o último consumidor (cabeçalho de coluna, 2,68 medido) e a F4 recebeu a tarefa de dar-lhe uso legítimo ou removê-lo. Não há uso legítimo possível, e o motivo não é falta de imaginação — é aritmético: o gate visual da fase mede TODO nó de texto visível contra o fundo pintado e exige ZERO reprovações com as flags ON. Um token de 2,52 aplicado a qualquer texto reprova nesse gate, no tema claro. Logo "usar o terciário em texto" e "passar no critério de aceite desta fase" são mutuamente exclusivos. Um token que a paleta promete, ninguém consome e nada pode consumir sem reprovar é dívida, não paleta. A aplicação usa dois níveis de texto; a paleta passa a declarar dois. Quem precisar de apoio legível usa o SECUNDÁRIO; sobre TINTE, usa `--u-tinte-ink`. ↩ Para reverter (decisão do owner, §5 item 7 do plano de ataque): repor `--u-texto-3: #9AA095` no bloco claro e `#828B7F` no escuro. Nenhuma regra de CSS depende dele hoje, então repor não quebra nada — e continuar sem ele também não. */ :root[data-uix01-tokens] { /* ---- superfícies e linhas ---- */ --u-fundo: #F7F8F6; --u-superficie: #FFFFFF; --u-linha: #E4E7E1; --u-linha-forte: #D8DCD3; --u-hover: #EFF1ED; /* ---- texto (três níveis) ---- */ --u-texto: #333333; --u-texto-2: #6D7467; /* DEC-0023: era #6E7568 (4,47) */ /* ---- verde: DOIS tokens, não um (DEC-0023 §D3) ---- TEXTO usa o ajustado; SUPERFÍCIE PREENCHIDA (botão, barra, indicador) mantém a cor da marca. Fundir os dois faz o texto reprovar OU a marca desbotar. */ --u-verde-texto: #5A7C25; /* DEC-0023: era #5D8026 (4,30) quando texto */ --u-verde-marca: #5D8026; /* inalterado — só superfície não textual */ --u-verde-fundo: #EEF2E6; --u-verde-ink: #46621C; /* texto sobre --u-verde-fundo (6,11) */ /* Tinta que vai SOBRE qualquer superficie de estado PREENCHIDA (verde da marca, erro, ambar). No claro essas tres sao escuras e a tinta e branca; no escuro as tres clareiam juntas e a tinta escurece. Medido no escuro com branco: 2,48 no verde, 2,43 no erro, 2,16 no ambar — todas ilegiveis. */ --u-marca-ink: #FFFFFF; /* ---- estados ---- */ --u-ambar: #976516; /* DEC-0023: era #B0761A (3,49) */ /* Texto de apoio sobre um TINTE, nao sobre a pagina. O secundario esta no limite (4,54 sobre o fundo) e reprova sobre qualquer tinte mais escuro que ele — medido em 4,25 no badge INFO e no `.step.block`. */ --u-tinte-ink: #575D53; --u-ambar-fundo: #FBF3E3; /* ---- par NEUTRO (UIX01/F3) — o estado "aguardando" e a origem "sugestao do sistema". Existe porque o AZUL NAO ENTRA NA PALETA (resolucao do PMO, 27/08): a identidade tem dois matizes com significado (verde = feito, ambar = agora) e uma escala neutra; um terceiro matiz para um estado so custa mais do que informa. ⚠️ O par do mockup para "aguardando" (#8A9086 sobre #F1F3EE) mede 2,93 e REPROVA — dai a tinta propria, e nao o terciario nem o secundario. ⚠️ O tinte mede 1,12 contra a superficie branca: quem o usar como fundo de chip leva `1px solid var(--u-linha-forte)`, senao o chip some. O verde e o ambar nao precisam (2,0 e 1,7 contra a superficie, com tinta forte por cima). */ --u-neutro-fundo: #F1F3EE; --u-neutro-ink: #5B6357; /* 5,58 sobre o proprio tinte · 6,24 sobre a superficie */ --u-erro: #C62828; /* o mockup não define vermelho — ver relatório F1 */ --u-erro-fundo: #FDECEA; --u-info: #6D7467; /* Faixa INVERTIDA (banner, barra do visualizador de documento). São regiões que existem para contrastar com a página — mas contraste não é cor fixa: no claro a faixa é escura, no escuro ela CLAREIA. Sem isto elas ficariam escuras nos dois temas, que é exatamente o defeito que a DEC-0024 corrigiu na barra lateral. */ --u-inverso: #2E352B; --u-inverso-ink: #ECEFE9; /* ---- tipografia (HANDOFF-056 §2) ---- Declarados para a Fase 2 consumir; o `body` NÃO é trocado nesta fase — mudar a face muda a métrica de todas as telas, e isso é redesenho. Sem @import externo: o app é servido do próprio host e não tem dependência de rede para fonte. */ --u-fonte: 'IBM Plex Sans', system-ui, 'Segoe UI', Arial, sans-serif; --u-fonte-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; /* ---- geometria (HANDOFF-056 §2 e §5) ---- */ --u-raio-controle: 8px; --u-raio-cartao: 10px; --u-altura-controle: 38px; --u-altura-campo: 48px; --u-alvo-toque: 44px; /* mínimo do §5 — a nav atual tem ~33px */ /* ================================================================ ALIASES LEGADOS — os 12 nomes de base.css:2-6 passam a APONTAR para os tokens. É o que faz as telas mudarem de paleta sem uma única edição. A limpeza destes nomes é da Fase 4; até lá os dois vocabulários coexistem. ================================================================ */ --bg: var(--u-fundo); --panel: var(--u-superficie); --line: var(--u-linha); --ink: var(--u-texto); --muted: var(--u-texto-2); /* corrige a dívida do #777 (4,14:1) */ /* --ok aponta para a tinta ESCURA, nao para o verde de texto: ele aparece tanto sobre a pagina quanto sobre o proprio tinte verde (badge, step, banner), e o verde de texto reprovava no segundo caso (4,25). A tinta passa nos dois (6,52 sobre o fundo · 6,11 sobre o tinte). Superficie preenchida nao usa isto — usa --u-verde-marca. */ --ok: var(--u-verde-ink); --warn: var(--u-ambar); --block: var(--u-erro); --info: var(--u-info); --accent: var(--u-verde-texto); /* 13 usos são COR DE TEXTO; as superfícies preenchidas apontam para --u-verde-marca */ /* UIX01/F2 — a barra lateral perdeu os tokens proprios (--u-sidebar-*). Enquanto ela existir como caminho de rollback, segue a paleta de PAGINA como qualquer outra superficie (DEC-0024: nenhuma regiao com cor fixa). Com a flag de shell ON ela nem e desenhada; com a de tokens OFF valem os valores do base.css. */ --sidebar: var(--u-superficie); --sidebar-ink: var(--u-texto-2); /* ================================================================ AS SEIS VARIÁVEIS QUE ERAM CONSUMIDAS SEM SEREM DECLARADAS. Funcionavam pelo fallback embutido em cada chamada (9 call sites, vários em estilo inline de JS). Declará-las aqui as liga aos tokens de uma vez — que é o desejado — e SÓ com a flag ON; com a flag OFF cada chamada volta ao seu fallback. ⚠️ `--verde` é o botão preenchido de pedido.css:258 ⇒ MARCA, não texto. ================================================================ */ --verde: var(--u-verde-marca); --ok-bg: var(--u-verde-fundo); --warn-bg: var(--u-ambar-fundo); --border: var(--u-linha); --hover: var(--u-hover); --danger: var(--u-erro); } /* ---------------------------------------------------------------- */ /* TEMA ESCURO — paleta própria do mockup, não inversão automática */ /* (HANDOFF-056 §5). Redefine só os `--u-*`; os aliases acompanham. */ /* ---------------------------------------------------------------- */ :root[data-uix01-tokens][data-theme="dark"] { --u-fundo: #161A14; --u-superficie: #1E231C; --u-linha: #2E352B; --u-linha-forte: #3A4236; --u-hover: #252B23; --u-texto: #ECEFE9; --u-texto-2: #A7AFA1; --u-verde-texto: #8FB04A; --u-verde-marca: #8FB04A; /* no escuro texto e marca coincidem (7,11/6,46) */ --u-verde-fundo: #26301B; --u-verde-ink: #B6D07A; /* No escuro a marca clareia, entao a tinta sobre ela ESCURECE: branco sobre #8FB04A da 2,48:1 e o botao primario ficaria ilegivel. */ --u-marca-ink: #161A14; --u-tinte-ink: #A7AFA1; /* no escuro o secundario ja passa sobre o tinte (6,41) */ --u-ambar: #D9A94E; --u-ambar-fundo: #302716; --u-erro: #F08A80; --u-erro-fundo: #2E1A18; --u-info: #A7AFA1; --u-inverso: #ECEFE9; --u-inverso-ink: #161A14; /* UIX01/F3 — par NEUTRO (ver o bloco claro). */ --u-neutro-fundo: #2A3127; --u-neutro-ink: #B4BCAE; /* 6,86 sobre o proprio tinte · 8,19 sobre a superficie */ }