/** * @file * O vocabulário visual do Perfekto10 — a fonte única de cor, forma e tipo. * * ESTE ARQUIVO SÓ DECLARA TOKENS. Nenhuma regra de componente mora aqui, e essa * restrição é o que o torna seguro: sem seletor de componente, não há nada com * que colidir, e o arquivo pode ser carregado em qualquer ponto da cascata. * * ------------------------------------------------------------------------ * POR QUE OS TOKENS PODEM MORAR SÓ NO TEMA * ------------------------------------------------------------------------ * A cascata real do sistema é adversa: numa página qualquer os módulos entram * nas folhas 16–22, o tema em 30–32 (Bootstrap, Paper Dashboard, style.css) e * MAIS módulos em 33–44. Um módulo não pode contar nem com vencer nem com * perder — foi assim que `.pfkt-chip` do tema apagou o selo da Reorganização. * * Com `var()` isso não acontece: a variável não se resolve na ordem das folhas, * se resolve no valor computado do elemento. Verificado — uma regra na folha 17 * usando `var(--pfkt-ink)` recebe o valor declarado na folha 32, sem fallback. * Consequência prática: nenhum módulo precisa declarar dependência deste * arquivo, e nenhum `.libraries.yml` precisa mudar. * * Duas regras que seguem daí, e que valem para qualquer coisa nova: * * 1. COMPONENTE COMPARTILHADO VAI NO TEMA, nunca num módulo. O tema carrega * depois da maioria dos módulos; um componente definido no módulo perde a * disputa em silêncio. * 2. MÓDULO CONSOME TOKEN, não literal. Cor nova num módulo é sinal de que * falta um token aqui — não de que o módulo precisa de uma cor sua. * * ------------------------------------------------------------------------ * OS CONTRASTES SÃO MEDIDOS, NÃO ESTIMADOS * ------------------------------------------------------------------------ * Cada valor abaixo traz a razão de contraste pela fórmula da WCAG 2.1. O * mínimo AA é 4,5:1 para texto normal e 3:1 para texto grande (>=18,66px, ou * >=14px em peso >=700). Quem conferir de novo: `tests/e2e/design-fingerprint.js` * mede tudo isso no DOM real, tela por tela. * * A rampa neutra é QUENTE porque o produto é quente — a barra lateral é * `#66615B`, o cabeçalho de tabela e o H1 de Serviços já vivem nessa família. * A Reorganização nasceu com uma rampa fria; converge para cá. */ :root { /* --------------------------------------------------------------------- Superfícies --------------------------------------------------------------------- */ --pfkt-surface: #ffffff; /* O chão claro DENTRO da superfície branca: faixa de cabeçalho de tabela, painel de filtros, item em hover, botão desabilitado. Já foi o cinza FRIO `#f6f7f9`, que contradizia o cabeçalho deste arquivo ("a rampa neutra é QUENTE porque o produto é quente"). Encostou no quente em 09/08/2026, e o ganho maior nem foi de temperatura: com o cabeçalho de tabela citando --pfkt-ink-legacy sobre este fundo, 21 medições de contraste que reprovavam passaram a 5,33:1. HOUVE UM `--pfkt-ground-2` (#f0eeea), e ele saiu no mesmo dia. Os dois estavam a 1,007:1 um do outro — a mesma cor com dois nomes, e o olho só começa a separar por volta de 1,05. Dois tokens indistinguíveis são piores que um: quem escolhe entre eles escolhe no escuro, e a diferença que o nome promete não existe na tela. Os cinco consumidores passaram para cá. O valor #f0eeea não se perdeu: ele continua em --pfkt-neutral-soft, que o usa com papel declarado (o fundo do selo "nenhum estado", medido contra --pfkt-neutral). Um valor com uma intenção, não com duas. */ --pfkt-ground: #f0efeb; /* O fundo REAL da área de trabalho — é o `$default-body-bg` do Paper Dashboard, e quem o pinta não é o `body` (que não tem fundo) e sim `.main-panel`. A navbar opaca usa o mesmo valor, então este token cobre as duas superfícies de chrome do sistema. É o chão da PÁGINA; o `ground` acima é o chão de dentro do cartão. */ --pfkt-panel: #f4f3ef; /* --------------------------------------------------------------------- Tinta — do mais escuro ao mais claro, com o contraste sobre --pfkt-surface A ink-4 é o único degrau que NÃO passa AA como texto normal. Existe porque a base já a usa em toda parte, e apagá-la de uma vez seria a Fase 3 inteira num commit. Enquanto durar: serve para texto GRANDE, ícone e regra de apoio — nunca para texto corrido. Ela JÁ FOI a tinta do cabeçalho de tabela e do rótulo do painel de filtros, e era daí que vinha o grosso das reprovações de contraste do produto: 3,79 sobre o fundo antigo, 3,53 sobre o de hoje. Cabeçalho em caixa alta a 10,9px em peso 700 NÃO é "texto grande" pela WCAG (o piso é 14px em negrito) — o uso violava o contrato escrito aqui em cima. Os dois migraram para --pfkt-ink-legacy. Ao ver ink-4 pintando texto, desconfie. --------------------------------------------------------------------- */ --pfkt-ink: #37322c; /* 12,69:1 — texto principal, títulos */ --pfkt-ink-2: #5f584e; /* 7,02:1 — texto secundário, legendas */ --pfkt-ink-3: #726a5f; /* 5,33:1 — separadores, texto de apoio */ --pfkt-ink-4: #857d72; /* 4,06:1 — SÓ texto grande / não-texto */ /* O degrau que não cabe na numeração. É o `$font-color` do Paper Dashboard — a tinta padrão do corpo, que TAMBÉM pinta a barra lateral. Batizá-lo de "sidebar" seria mentir sobre 83 das suas 133 ocorrências servidas, que são `color:` em texto; o fundo é a minoria. Não entra na série porque a série não o comporta: ele dá 6,13:1, entre o ink-2 (7,02) e o ink-3 (5,33), e inserir no meio renumeraria tokens já em uso. `ink-5` seria pior — a numeração vai clareando, e ele é mais escuro que o ink-4. Mesmo status do ink-4: existe porque a base o usa em toda parte, e o nome anuncia o destino. A Fase 3 o funde em --pfkt-ink-2 (6,13 → 7,02, escurece de leve) e apaga esta linha. */ --pfkt-ink-legacy: #66615b; /* 6,13:1 — transitório, ver acima */ /* --------------------------------------------------------------------- Linhas --------------------------------------------------------------------- */ --pfkt-line: #e4e7eb; --pfkt-line-2: #cec8bf; /* --------------------------------------------------------------------- Marca / ação O AZUL PETRÓLEO no lugar do teal (decidido em 07/08/2026, com a tela na mesa). O teal #51cbce nunca foi a marca — é o `primary` default do Paper Dashboard, que ninguém trocou. A cor dominante do logotipo é #c95616. A troca resolve sozinha o problema que o teal criava: com preenchimento ESCURO a tinta volta a ser BRANCA, e some o quase-preto que pesava em cima do claro. Era 1,95:1 em toda tela do produto; passa a 5,77:1. O laranja abaixo continua sendo a marca. Este par é AÇÃO — o que se clica — e é por isso que pode ser outra cor sem que o produto perca identidade. Voltar atrás, se um dia for o caso, é este bloco e mais nada. */ --pfkt-brand: #2f6d84; /* preenchimento — 5,77:1 com --pfkt-brand-ink */ --pfkt-brand-ink: #ffffff; --pfkt-brand-deep: #24596d; /* 7,71:1 sobre --pfkt-surface — hover, link, foco */ --pfkt-brand-soft: #e8f2f5; /* 6,77:1 com --pfkt-brand-deep — realce de marca */ /* O LARANJA é a segunda cor de marca, e por muito tempo não teve nome. É o item ativo da barra lateral, o CTA do cartão da conta, a tag de crédito, a ação secundária do histórico de consumo. Como não tinha nome, cada tela escolheu o seu: #f96332, #ef8157, #ef6c3b, #c25b33, #a94d29 — cinco laranjas para uma intenção só. `highlight` é o preenchimento (é a cor que se reconhece de longe) e `highlight-deep` é a tinta, porque o laranja de marca NÃO passa como texto: #ef6c3b dá 3,05:1 sobre branco. Sobre o preenchimento, branco também não passa (3,05:1) — daí `highlight-ink` ser tinta escura, como no teal. */ --pfkt-highlight: #ef6c3b; --pfkt-highlight-ink: #331a10; /* 5,31:1 sobre --pfkt-highlight */ --pfkt-highlight-deep: #9c4523; /* 6,38:1 sobre --pfkt-surface — texto e link */ --pfkt-highlight-soft: #fff2ec; /* 5,83:1 com --pfkt-highlight-deep */ /* --------------------------------------------------------------------- Estado — o par tinta/fundo de cada um passa AA São tintas suaves de propósito. O padrão oposto (branco sobre cor cheia) é o que faz o selo "Aceito" de Serviços sair em 2,46:1 a 10px. --------------------------------------------------------------------- */ --pfkt-ok: #1c6b45; --pfkt-ok-soft: #e6f1ea; /* 5,60:1 com --pfkt-ok */ --pfkt-ok-line: #bcdfcd; --pfkt-warn: #7a4a05; --pfkt-warn-soft: #f8eed9; /* 6,50:1 com --pfkt-warn */ --pfkt-warn-line: #e8d3a4; /* O vermelho tem DOIS trabalhos, e por muito tempo um token só tentou fazer os dois — foi assim que o contador de não-lidas da navbar, que é sinal, acabou pintado com a tinta escura de TEXTO e deixou de saltar aos olhos. `--pfkt-stop` é o PREENCHIMENTO: o contador, o selo "atrasada", a faixa de severidade alta. Ele existe para ser visto de longe, e por isso é vivo. `--pfkt-stop-deep` é a TINTA de texto sobre fundo claro, que precisa ser escura para se ler. Mesma estrutura de --pfkt-brand e --pfkt-highlight. Que o token único estava errado dava para ver antes de qualquer opinião: três telas o declaravam com três valores diferentes (#7d332a, #dc3545, #a8443a), cada uma puxando para o lado do trabalho que precisava fazer. */ --pfkt-stop: #d32f2f; /* preenchimento — 4,98:1 com --pfkt-stop-ink */ --pfkt-stop-deep: #a4262c; /* 7,26:1 sobre --pfkt-surface — texto e borda */ --pfkt-stop-soft: #f8eae7; /* 6,19:1 com --pfkt-stop-deep */ --pfkt-stop-line: #e4c6c1; /* "Nenhum estado" também é estado — é o selo do que ainda não aconteceu ("Nunca reorganizado"). Sem este par, cada tela inventa o seu cinza. */ --pfkt-neutral: #554e45; --pfkt-neutral-soft: #f0eeea; /* 7,07:1 com --pfkt-neutral */ /* Informativo: o que está DISPONÍVEL, sem ser bom nem ruim (uma oferta aberta, uma etapa que ainda dá para fazer). Precisa ser lido como "não é a marca" — por isso azul, e não mais um teal que se confunde com --pfkt-brand. É o token menos assentado do conjunto: hoje um único componente o usa (o selo "Disponível" da fila do digitador). Se uma segunda tela precisar de informativo com outra intenção, revise aqui antes de dobrar o valor lá. */ --pfkt-info: #1f5f8b; /* 6,84:1 sobre --pfkt-surface */ --pfkt-info-soft: #e9f1f7; /* 5,99:1 com --pfkt-info */ --pfkt-info-line: #c2d8e9; /* a borda que faltava ao par, para o toast */ /* Tinta de LEITURA sobre o fundo do estado, quando o texto é uma frase e não um rótulo. A tinta do estado (--pfkt-warn) é marca: boa para a palavra "atenção", pesada para o parágrafo que vem depois. */ --pfkt-warn-ink: #46361c; /* 10,10:1 sobre --pfkt-warn-soft */ --pfkt-stop-ink: #ffffff; /* 8,83:1 sobre --pfkt-stop (preenchimento cheio) */ /* --------------------------------------------------------------------- Tabelas — a faixa do cabeçalho e os três estados de linha COMO ESTAS CORES SÃO PINTADAS, porque muda o que se pode escrever aqui. A zebra, o hover e a seleção do DataTables NÃO são `background-color`: são `box-shadow: inset 0 0 0 9999px ` aplicado em cada CÉLULA. O fundo do `tr` e do `td` fica transparente de propósito — é assim que o plugin consegue empilhar seleção sobre zebra. Consequência prática, e é boa: um valor TRANSLÚCIDO se compõe com o que está atrás (é o que a zebra faz hoje — preto a 5% sobre o branco do cartão), e um valor OPACO cobre. Os dois funcionam; escolha conforme a intenção. `rgba()`, `hsl()` e hex de 8 dígitos são todos válidos. POR QUE ESTES TOKENS EXISTEM. Antes, quem quisesse trocar a cor de uma linha tinha de descobrir que ela vinha de uma variável do VENDOR (`--dt-row-stripe`, um TRIPLETE RGB sem parênteses, não uma cor), copiada num `:root` do style.css, e depois brigar com um segundo mecanismo que pintava a mesma linha por `background-color !important`. A seleção estava com os dois ao mesmo tempo, e o resultado é que linha ímpar e linha par selecionadas ficavam de cores diferentes. --------------------------------------------------------------------- */ --pfkt-table-head-bg: var(--pfkt-ground); --pfkt-table-head-ink: var(--pfkt-ink-legacy); /* Zebra: só as ímpares recebem. Já foi preto a 5%, que era neutro-FRIO num produto quente; hoje é da família quente do --pfkt-ground. Composta sobre o branco do cartão, a linha ímpar renderiza #f6f6f4 — o que dá 1,08:1 contra a linha par (era 1,12:1 com o preto). Zebra não é texto e nenhum mínimo da WCAG se aplica, mas ela ficou cerca de um terço mais fraca do que já era sutil: se um dia a listagem parecer "sem zebra", é aqui que se mexe, subindo a opacidade. */ --pfkt-table-stripe: rgb(242 241 239 / 67%); /* Hover: vale só nas tabelas que trazem `table-hover` no — hoje as do modal de período e a de sobreaviso; as listagens não têm. Continua no preto translúcido, então numa linha ímpar o hover troca uma faixa quente por uma fria. */ --pfkt-table-hover: rgba(0, 0, 0, 0.075); /* Seleção: o âmbar herdado. Não vem de nenhum token de marca — é candidato natural a --pfkt-highlight-soft quando você for decidir. */ --pfkt-table-selected: rgba(241, 187, 124, 0.53); --pfkt-table-selected-ink: #000000; /* --------------------------------------------------------------------- Forma Três raios, não trinta. O inventário de 07/08/2026 achou 57 valores distintos de `border-radius` no CSS nosso; a maior parte é ruído de quem escolheu na hora. `control` existe separado de `surface` porque input com 12px fica bojudo e com 999px fica pílula — não é indecisão, é outra função. --------------------------------------------------------------------- */ --pfkt-radius-surface: 12px; --pfkt-radius-control: 8px; --pfkt-radius-pill: 999px; /* --------------------------------------------------------------------- Tipo — famílias A monoespaçada é para DADO CITADO (valor de parâmetro, identificador), não para data nem contagem: número que alinha em coluna resolve-se com `font-variant-numeric: tabular-nums`, sem trocar de fonte. `--pfkt-font-mono` é o ÚNICO nome desta família. Houve um segundo, `--pfkt-mono`, declarado no escopo do modal de dividir período com valor idêntico — mesmo defeito que o `--pfkt-ground-2` teve nas cores. Dois nomes para a mesma coisa não é redundância inofensiva: é a garantia de que um dia os dois vão divergir e ninguém vai saber qual está certo. --------------------------------------------------------------------- */ --pfkt-font: Montserrat, "Helvetica Neue", Arial, sans-serif; --pfkt-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; /* --------------------------------------------------------------------- Tipo — escala de tamanho e peso Posta em 10/08/2026, e a escala NÃO foi inventada: ela é o que o sistema JÁ usa. O `design-fingerprint` mediu 29 tamanhos computados nas telas, e quatro deles cobrem metade dos elementos — 14px (122), 12px (60), 11px (47), 12,5px (40). São esses os degraus de texto abaixo; os de título vêm dos que já estão em uso no H1 de página, nos cartões e nos modais. Inventar uma escala nova (1.125 de razão, oito degraus, nomes de camiseta) obrigaria a mexer em todo arquivo de uma vez para caber nela. Adotar a que existe deixa cada troca de literal por token sair com DIFF VAZIO, que é o que separa arrumação de redesenho. Os nomes são NUMÉRICOS, e isso é decisão tomada ao acrescentar o degrau de 13px que faltava. Nome semântico (`sm`, `md`, `lg`) promete uma hierarquia de intenção: que `md` seja "o tamanho do texto médio" em algum lugar decidido. Aqui não há essa decisão — há nove tamanhos que existem porque alguém digitou um número, e batizá-los de pequeno/médio/grande seria inventar um desenho que ninguém fez e amarrar os arquivos a ele. Quando a escala for DESENHADA, os nomes semânticos entram por cima destes. Ninguém consome estes tokens ainda. Eles entram arquivo a arquivo — é a Fase 5 de docs/tipografia.md, a mais longa e a menos urgente. Os pesos são TRÊS, e é decisão: o sistema tem hoje sete valores computados, e dois deles — 500 e 800 — aparecem uma única vez cada no produto inteiro. Peso que aparece uma vez não é degrau de escala, é acidente. --------------------------------------------------------------------- */ --pfkt-txt-10: 10px; /* selo pequeno, contador, rótulo de gráfico */ --pfkt-txt-11: 11px; /* selo, trilha, legenda de apoio */ --pfkt-txt-12: 12px; /* rótulo de tabela, meta */ --pfkt-txt-12-5: 12.5px; /* botão do sistema, texto de cartão */ --pfkt-txt-13: 13px; /* rótulo de formulário em modal */ --pfkt-txt-14: 14px; /* corpo — o degrau mais usado */ /* O corpo do toast, e só. Não é um degrau que a escala pediu: é o tamanho que a mensagem já tinha na landing e que o app logado tinha perdido para 14px. Uma mensagem que some sozinha em 4 a 15 segundos não pode ser o texto mais discreto da tela. Se a Fase 5 desenhar a escala e este degrau não sobreviver, o toast desce para o 14. */ --pfkt-txt-15: 15px; /* corpo do toast */ --pfkt-txt-16: 16px; /* destaque dentro de cartão */ --pfkt-txt-18: 18px; /* título de seção */ --pfkt-txt-22: 22px; /* título de painel */ --pfkt-txt-titulo: 1.55rem; /* o H1 de página (24,8px) */ --pfkt-peso-normal: 400; --pfkt-peso-medio: 600; --pfkt-peso-forte: 700; }