/* ============================================================================ tokens.css — as variaveis, e nada alem delas. HELIX, 27/08/2026. Este arquivo substituiu a paleta neutra quente extraida de docs/mockup/fintel-fluxo.html pela rampa de marca de docs/mockup/helix.html. Nao reinterprete valor daqui: se um tom precisa mudar, muda no mockup e no token, nunca no componente. TRES CAMADAS, E A ORDEM IMPORTA: 1. primitivas --b-50 .. --b-950 a rampa da marca, derivada de #4b075c. PROIBIDO usar direto em componente. 2. forma --font --r-* --sh-* nao mudam com o tema 3. semanticas --c-* --h* --s* e so isto que view e componente consomem O 800 e a identidade. Os outros dez degraus existem para que o roxo funcione em texto, em fundo e em superficie de dado sem virar borrao. O tema vem do atributo data-t no , renderizado no primeiro byte pelo servidor a partir do cookie (POST /tema). Sem localStorage, sem flash de tema errado. O nome do atributo e `data-t` e nao `data-tema`: e o que _Layout.cshtml e tema.js ja usam, e renomear seria churn sem ganho. ============================================================================ */ /* ---------------------------------------------------------------------------- Fonte servida pela propria aplicacao (00-MESTRE 9.5): ambiente de prefeitura frequentemente bloqueia saida para a internet, entao o CDN do Google nao e opcao — nem para esta fonte, que veio de la. UMA familia, variavel, dois subconjuntos. `latin` cobre todo o portugues (U+00C0-00FF pega a e o c); `latin-ext` entra pelos nomes proprios que chegam por e-mail de fora. Vietnamita e cirilico ficaram de fora: nao tem uso aqui e eram metade do peso. 48 KB no total, contra os 5 arquivos que sairam. Plus Jakarta Sans, SIL Open Font License 1.1 — ver OFL.txt ao lado dos .woff2, que e o que a licenca exige de quem redistribui. A MONOESPACADA SAIU. Ate 27/08/2026 codigo de chamado, CNPJ, CPF, contrato e versao vinham em IBM Plex Mono, por forca do 9.1 regra 4. Agora vem em peso e cor (.mono, em base.css), com `tabular-nums` cuidando do alinhamento. O 9.1 foi atualizado no mesmo commit — se voce esta lendo uma versao dele que ainda pede monoespacada, ela e mais velha que este arquivo. ---------------------------------------------------------------------------- */ @font-face{ font-family:'Plus Jakarta Sans'; src:url('/fontes/plus-jakarta-sans-latin.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215, U+FEFF,U+FFFD; } @font-face{ font-family:'Plus Jakarta Sans'; src:url('/fontes/plus-jakarta-sans-latin-ext.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF, U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB, U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ---------------------------------------------------------------------------- 1. PRIMITIVAS — a rampa da marca. Nenhum componente cita estas. ---------------------------------------------------------------------------- */ :root{ --b-950:#24032c; --b-900:#35043f; --b-800:#4b075c; --b-700:#5f1073; --b-600:#78228e; --b-500:#933fa9; --b-400:#b06dc4; --b-300:#cb9dd9; --b-200:#e3c8ec; --b-100:#f2e6f6; --b-50:#faf5fb; /* ---------------------------------------------------------------------------- 2. FORMA — o que nao muda com o tema. ---------------------------------------------------------------------------- */ --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; /* O Helix e mais arredondado que a paleta anterior, e a diferenca e grande o bastante para ser decisao e nao ajuste: cartao a 16, indicador a 14, chip de icone a 10, e pill de 999px em botao e chip. */ --r-xs:6px; --r-sm:10px; --r:14px; --r-lg:16px; --r-pill:999px; /* Dimensoes do shell. Continuam as de hoje: a Fase 1 e camada de token, e a sidebar de 248px chega na Fase 2, junto com o grid que a comporta. */ --rail:56px; --ficha:346px; --top:48px; --bar:46px; } /* ---------------------------------------------------------------------------- 3. SEMANTICAS — o que a view consome. ONDE ESTE ARQUIVO DIVERGE DO BRIEFING, E POR QUE. Cinco valores da paleta entregue reprovam em WCAG AA como texto, medidos por TestesDeContrasteDosTokens (que existe desde 24/08 justamente por causa de um caso destes). Foram corrigidos pela luminosidade, MANTENDO matiz e saturacao — nenhuma matiz nova entrou, e a rampa da marca continua sendo a unica fonte de cor. O antes -> depois esta em cada linha. O caso mais grave era --c-ink-3 #a49da8, a 2,32:1 contra o canvas. E a cor do cabecalho de tabela e do microcopy que explica as regras — o texto mais importante da interface seria o mais dificil de ler, que e exatamente o defeito que aquele teste foi escrito para interceptar. A correcao dele empurrava --c-ink-3 para cima de --c-ink-2 e a escala deixava de ser escala. A saida foi DESLOCAR A ESCALA UM DEGRAU: o --c-ink-2 entregue virou --c-ink-3, e um degrau novo e mais escuro assumiu o --c-ink-2. Dois dos tres valores entregues sobreviveram; so um foi inventado, e o que reprovava saiu. ---------------------------------------------------------------------------- */ html[data-t="claro"]{ --c-canvas:#f3eff3; --c-app:#ffffff; --c-card:#ffffff; --c-sunken:#f8f5f8; --c-line:#ebe5ec; --c-line-2:#ded4e0; /* CONTORNO DE CONTROLE — campo, select, area de texto. `--c-line` e `--c-line-2` sao regua e divisoria: 1,24:1 e 1,44:1 contra o cartao. Serve para separar bloco, e NAO serve para dizer "aqui ha um campo": campo cheio se le pelo texto, campo VAZIO so tem a borda. A queixa foi literal — "nao estou vendo campo para registro do comentario" — e o campo estava la, com 944x96. Este alcanca os 3:1 que a WCAG 1.4.11 pede para limite de componente. */ /* Cinza NEUTRO, e nao com vies de plum. #948a99 alcancava os 3:1 e lia como rosa a 1px de espessura: a queixa foi "campo de digitacao do comentario com erro", e o campo nao tinha erro nenhum — era a borda parecendo vermelha. Contorno de campo e o unico lugar do sistema onde o vies da marca atrapalha, porque ele compete com o vermelho de invalido, que precisa ser lido de relance. */ --c-campo-bd:#8e8e93; /* --c-ink-2 #544c58 e o degrau novo (7,23:1). --c-ink-3 #6e6473 era o --c-ink-2 entregue (4,94:1); o --c-ink-3 entregue, #a49da8, saiu por 2,32:1. Distancia entre os dois ultimos degraus: 1,46x, acima do minimo de 1,15. */ --c-ink:#1c1520; --c-ink-2:#544c58; --c-ink-3:#6e6473; --c-brand:var(--b-800); --c-brand-alt:var(--b-600); --c-on-brand:#ffffff; --c-soft:var(--b-100); /* As tres cores de significado desceram de luminosidade ate passarem tambem SOBRE O PROPRIO FUNDO — que e onde elas de fato aparecem, e onde reprovavam por mais folga que contra o cartao. --c-ok #10a95f -> #0c7e47 2,78 -> 4,51 --c-warn #b7791f -> #966319 3,31 -> 4,51 --c-bad #e0484d -> #d4242a 3,53 -> 4,50 A superficie que manda e --c-canvas, e nao o cartao branco: e a mais escura das quatro, e portanto a que exige o tom mais fundo. Os *-bd nao vieram no briefing e sao necessarios: a caixa de alerta precisa de uma borda entre o fundo e o texto. Sao objeto grafico, nao texto. */ --c-ok:#0c7e47; --c-ok-bg:#e8f8ef; --c-ok-bd:#bde5cd; --c-warn:#966319; --c-warn-bg:#fdf3e3; --c-warn-bd:#eedcba; --c-bad:#d4242a; --c-bad-bg:#fdecec; --c-bad-bd:#f4c9c9; /* Escala do mapa de calor. SEQUENCIAL: intensidade, uma matiz so, claro para escuro. Nao serve para categoria — ver a rampa de serie abaixo. REESPACADA EM 28/08/2026, e o motivo foi medido na tela. A entrega original era h1=--b-100, h2=--b-200, h3=--b-400, h4=--b-600, h5=--b-800, e os degraus ficavam a dL* de 2,2 · 8,8 · 27,6 · 24,2 · 14,5 do vizinho. O primeiro passo e o que importa e o que estava pior: "nenhum chamado nesta hora" e "um chamado nesta hora" eram o MESMO tom, e o mapa escondia justamente o buraco que ele existe para mostrar. Depois vinha um salto de 27, que exagera o meio. Agora: 11,0 · 13,1 · 14,5 · 14,0 · 18,4. Todo passo acima de 10, e nenhum acima de 19. Continua saindo INTEIRA das primitivas da marca — o que mudou foi quais degraus, e nao a fonte da cor. h0 e o proprio canvas de proposito: celula vazia deve ler como ausencia, e nao como o primeiro tom de alguma coisa. Travado por TestesDeContrasteDosTokens. */ --h0:#f3eff3; --h1:var(--b-200); --h2:var(--b-300); --h3:var(--b-400); --h4:var(--b-500); --h5:var(--b-700); /* Rampa de serie — D-112, de 25/08/2026, preservada e so retingida no viés plum das demais superficies. CATEGORICA NAO, ORDINAL: tres degraus para a unica dimensao do modelo que tem ordem natural, o nivel, N1 < N2 < N3. Ela NAO se confunde com --h0..--h5, que e mapa de calor: usar a escala de intensidade em dado nominal — cliente, modulo, pessoa, desfecho — inventa uma ordem que nao existe, e e pior que nao ter cor nenhuma. Medidos contra --c-card, e nao escolhidos no olho: 3,04 / 6,86 / 15,28, com dL* de 23 e 24 entre degraus. O primeiro esta no limite de 3:1 do WCAG 1.4.11 para objeto grafico — clarear um tom "para ficar mais leve" tira a rampa da norma. Travado por TestesDeContrasteDosTokens. */ --s1:#9a919e; --s2:#5f5863; --s3:#282429; --ring:rgba(28,21,32,.07); --sh-app:0 1px 2px rgba(28,21,32,.04),0 24px 48px -28px rgba(36,3,44,.20); --sh-card:0 1px 2px rgba(28,21,32,.05); --sh-pop:0 4px 14px -4px rgba(28,21,32,.16),0 1px 2px rgba(28,21,32,.07); --sh-modal:0 18px 44px -14px rgba(36,3,44,.28),0 2px 6px rgba(28,21,32,.09); } html[data-t="escuro"]{ --c-canvas:#121016; --c-app:#1a171f; --c-card:#1f1b25; --c-sunken:#272231; --c-line:#2e2839; --c-line-2:#3d3549; --c-campo-bd:#7b7b81; /* Mesmo deslocamento do claro, na direcao oposta: --c-ink-2 #b7afbc e o degrau novo (8,88:1), --c-ink-3 #a49aab era o --c-ink-2 entregue (7,01:1), e o --c-ink-3 entregue, #776d80, saiu por 3,15:1 contra --c-sunken. Distancia entre os dois ultimos: 1,27x. */ --c-ink:#f4f1f6; --c-ink-2:#b7afbc; --c-ink-3:#a49aab; /* No escuro a marca clareia, e e por isso que --c-on-brand existe: texto branco sobre #b878cf da 1,9:1 e some. NUNCA escreva color:#fff sobre --c-brand. */ --c-brand:#b878cf; --c-brand-alt:#cfa2df; --c-on-brand:#1c0824; --c-soft:#33203d; /* As de significado passam como entregues no escuro — 7,32 / 7,63 / 5,84 contra --c-card. So os *-bd foram acrescentados. */ --c-ok:#35c17f; --c-ok-bg:#14301f; --c-ok-bd:#22523a; --c-warn:#e0a33f; --c-warn-bg:#33270f; --c-warn-bd:#574122; --c-bad:#f0706f; --c-bad-bg:#3a1a1c; --c-bad-bd:#5e2d2f; /* Mesma reespacada do claro, na direcao oposta. A entrega original tinha o primeiro passo a dL* de 1,5 — invisivel. Agora: 9,4 · 8,2 · 10,2 · 14,1 · 14,5. Os degraus sao as primitivas da marca, subindo; h0 e a superficie afundada. */ --h0:#272231; --h1:var(--b-700); --h2:var(--b-600); --h3:var(--b-500); --h4:var(--b-400); --h5:var(--b-300); /* Escolhida contra --c-card #1f1b25, e nao invertida a partir do claro: inverter daria degraus que passam no papel e somem na tela. 3,06 / 6,95 / 13,85, com dL* de 24 e 24. Mesma direcao de leitura do claro — N1 e o degrau de menor contraste, N3 o de maior. */ --s1:#6d6673; --s2:#aaa4ae; --s3:#e9e8ea; --ring:rgba(255,255,255,.08); --sh-app:0 24px 48px -30px rgba(0,0,0,.80); --sh-card:none; --sh-pop:0 4px 14px -4px rgba(0,0,0,.60),0 1px 2px rgba(0,0,0,.40); --sh-modal:0 18px 44px -14px rgba(0,0,0,.80),0 2px 6px rgba(0,0,0,.50); } /* --------------------------------------------------------------------------- Sobre midia — texto que NAO fica sobre superficie do tema. A capa da autenticacao poe texto sobre uma foto SORTEADA. Nao ha tema que descreva esse fundo, entao estas nao invertem: sao as mesmas nos dois temas. Trocar de cor no claro daria branco sobre branco no dia em que a foto sorteada for clara — que e exatamente o caso que o scrim existe para cobrir. Medido contra o pior caso possivel (foto BRANCA, brightness .44, com o scrim por cima): 14,3 / 10,4 / 6,2. Sem o scrim eram 4,95 / 3,93 / 2,50, e duas das tres reprovavam. A conferencia esta em /design-system. --c-scrim e a unica razao de os numeros acima serem previsiveis: sem ele o contraste depende da foto do dia, e foto do dia nao e criterio de aceite. */ :root{ --c-sobre-midia:#ffffff; --c-sobre-midia-2:rgba(255,255,255,.88); --c-sobre-midia-3:rgba(255,255,255,.72); --c-scrim:rgba(24,3,28,.74); /* A marca sobre o quadrado branco da capa. NAO usa --c-brand: no tema escuro ele clareia para #b878cf, e #b878cf sobre branco da 3,0:1 — o mesmo erro do `color:#fff sobre --c-brand`, so que espelhado. */ --c-sobre-midia-marca:#4b075c; /* Fundo do QR: leitor de autenticador espera escuro-sobre-claro, e boa parte nao le o negativo. Branco nos dois temas, por isso vive aqui e nao no tema. */ --c-leito-qr:#ffffff; } /* Papel nao tem tema. O que sai na impressora e preto no branco, e um valor de tema escuro na impressora gasta toner e nao se le. */ @media print{ :root{--c-tinta:#000000; --c-tinta-fraca:#666666; --c-papel:#ffffff} } @media (max-width:1120px){ :root{--ficha:306px} }