:root { /* ═══════════════════════════════════════════════════ NOVOS TOKENS (design system 2026) ═══════════════════════════════════════════════════ */ /* Espaçamento — escala rígida 4/8/12/16/24/32/48/64 */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* Raio — TRÊS valores, e mais nenhum. Eram cinco (6/8/8/10/12), o que fazia input, botão e cartão terem cantos parecidos mas diferentes: o olho lê como descuido, não como escala. */ --raio-sm: 6px; /* etiqueta, campo, botão */ --raio: 6px; /* botão — o mesmo degrau do campo ao lado dele */ --raio-md: 10px; /* cartão, painel, tabela */ --raio-lg: 10px; --raio-xl: 14px; /* contêiner grande */ /* Tipografia — o que abre a hierarquia é o INTERVALO, não texto menor. Decisão do dono em 19/08, corrigindo o próprio brief: ele pedia h2 a 15px, o que teria deixado o título de seção MENOR que o corpo. O salto de 32 para 17 abre a distância do mesmo jeito, e nada encolhe. Antes: 24 / 20 / 15 / 13 / 12 — h1 e h2 perto demais, página plana. */ --fs-display: 32px; --lh-display: 38px; --track-display: -0.021em; --fs-h1: 32px; --lh-h1: 37px; --track-h1: -0.021em; --fs-h2: 17px; --lh-h2: 22px; --track-h2: -0.006em; --fs-body: 15px; --lh-body: 22px; --fs-label: 12px; --lh-label: 15px; --track-label: 0.06em; --fs-metric: 36px; --lh-metric: 36px; --track-metric: -0.02em; --fs-caption: 13px; --lh-caption: 18px; /* Aliases retrocompatíveis (não remover — 15 views dependem) */ --fs-sm: 14px; --fs-md: 15px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px; /* Semânticas (compartilhadas entre temas) */ --info: #3B82F6; /* Marca WhatsApp — usada SÓ no fluxo de conectar instância, onde o verde é marca e não estado. Não use em botão genérico: cor no painel significa confiança da atribuição, e um verde solto quebraria essa leitura. */ --verde: #10B981; --verde-esc: #059669; /* Font stack (Inter carregado via layout; fallback system-ui) */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", monospace; /* Movimento — uma curva só, e ela desacelera no fim. `ease` puro é o padrão do navegador e por isso é o que menos parece escolhido. Serve hover de linha, hover de botão, o balão de ajuda e a troca de tema. Nada além disso: animação decorativa aqui só faz parecer amador. UMA EXCEÇÃO, nomeada em 19/08 pelo dono: o pulso da bolinha `.ponto.on` (ver `app.css`). Ela passa porque não é decorativa — o pulso é o que separa "estava vivo quando a página carregou" de "está vivo agora", e nenhum outro canal diz isso. Toda animação nova precisa passar por essa mesma pergunta: que informação ela carrega que a tela parada não carrega? */ --trans: 140ms cubic-bezier(.2,.6,.3,1); /* A ALTURA DA FAIXA DE TOPO, num lugar só. Ela vale para DUAS coisas que precisam terminar na mesma linha: a linha do grid onde mora a barra de topo, e o bloco do logo na barra lateral. Elas eram declaradas separadamente — 56px no grid, e `padding: 20px` mais a altura da imagem no logo, o que dava 69px. As duas bordas horizontais ficavam 13px fora de esquadro, e o dono viu. */ --altura-topo: 56px; --bord: 1px solid var(--border); } /* ═══════════════════════════════════════════════════ TEMA DARK (default do app) ═══════════════════════════════════════════════════ */ [data-theme="dark"] { /* PALETA DE PLATAFORMA — ordem FIXA, nunca reciclada. EXCEÇÃO ASSUMIDA à regra desta casa de que cor significa ESTADO: aqui cor significa PLATAFORMA. A incerteza sai do canal de cor e vira hachura, justamente para que os dois eixos — de onde veio, e o quanto sabemos — nunca disputem a mesma tinta. Vale nesta tela, não no resto do app. Validada contra o fundo escuro: faixa de luminosidade, piso de croma e separação para daltonismo em todos os pares. O roxo tem contraste 2,83:1 e por isso EXIGE rótulo visível — a legenda é o alívio. A ordem separa o âmbar do verde de propósito: encostados, são o pior par para protanopia. NOTA DA MIGRAÇÃO (05/09): agora por tema porque nunca tinha sido calibrada para o claro (só "validada contra o fundo escuro", como acima já dizia). Os valores do escuro são OS MESMOS de antes -- só a localização mudou. */ --p-google: #D97706; --p-facebook: #3B82F6; --p-instagram: #DB2777; --p-link: #15803D; --p-chatgpt: #7E22CE; --p-nada: #3F3F46; --p-meta: #64748B; /* "OUTROS" (agrupamento por tamanho, 3.3) GANHA TOKEN PRÓPRIO em 06/09, achado da revisão final de branch: a classe `.p-outros` pintava com `--text-tertiary` (#7A8292 aqui), reaproveitando um token de TEXTO como tinta de DADO. Contra `--p-meta` (#64748B, mesmo valor nos dois temas) dava ΔE 7,7 aqui no escuro e contraste 1,23:1 -- perto demais, e no claro (abaixo) a mesma dupla dava 1,04:1, ou seja, a MESMA tinta. Um balde `meta` (rota do `fbclid`) do lado de um balde `outros` ficava ilegível. #7C6F57 mede 3,84:1 contra `--bg-base` aqui (e 4,59:1 no claro) -- folga sobre o piso de 3:1 de WCAG 1.4.11 para elemento gráfico -- e o ΔE contra CADA `--p-*` já existente vai de 28,3 (o par mais próximo, contra `--p-nada`) a 108,2 (o mais distante): bem acima dos ~6,5 de ΔE que esta mesma base já trata como "precisa de rótulo escrito" em `contraste-tema-claro-painel-geral.test.js`, então a cor já se lê sozinha, sem depender só da legenda. */ --p-outros: #7C6F57; /* Superfícies em CAMADAS, e elas clareiam conforme sobem. Inversão simples é o que denuncia dark mode ruim: o fundo não é preto puro (#0A0A0B era quase), o texto não é branco puro, e o campo AFUNDA em vez de ficar mais claro que o painel que o contém. */ --bg-base: #0E1116; /* a aplicação */ --bg-surface: #161A21; /* cartão, tabela, painel */ --bg-afundado: #10141A; /* campo, área inerte — mais escuro que o painel */ --bg-elevated: #1D222B; /* realce: hover de linha e de item de menu */ --border: rgba(255,255,255,.07); --border-hover:rgba(255,255,255,.13); /* O TRAÇO DA HACHURA "SEM ORIGEM" (05/09) -- token PRÓPRIO, calibrado contra `--bg-afundado`, e não mais o genérico `--border-hover`. Genérico media 1,34:1 no claro contra o fundo afundado -- o pior contraste da tela, e o comentário original de app.css já dizia "a proporção é a informação; ela não pode ser invisível". Mesma disciplina de calibração da paleta de confiança (`--conf-sem-*`), sem fundir com ela -- são dois eixos diferentes (plataforma vs. confiança) que passam a seguir a MESMA régua de contraste. */ --traco-sem-origem: rgba(255,255,255,.13); /* Texto */ --text-primary: #E8EAED; --text-secondary: #9BA3AF; /* #6B7280 media 3,61:1 sobre a superfície — reprova o mínimo de 4,5, e é ele que pinta o rótulo dos cartões (12px, não conta como texto grande). Mesmo defeito que o tema claro tinha; clareado até 4,51:1 no mesmo matiz frio. Os dois temas foram medidos no navegador, um a um. */ --text-tertiary: #7A8292; /* Sombra quase não aparece sobre fundo escuro; quem separa aqui é a borda. Por isso as três são mais discretas e a moldura é que carrega a elevação. */ --sombra-sm: 0 1px 2px rgba(0,0,0,.30); --sombra-md: 0 2px 8px rgba(0,0,0,.35); --sombra-lg: 0 12px 32px rgba(0,0,0,.45); /* Accent = TINTA, não matiz. O botão primário é branco sólido no escuro e preto sólido no claro: inconfundível como clicável, e libera o canal de cor inteiro pra significar estado. Ver --conf-* abaixo. REAFIRMADO em 19/08: o brief da reforma visual pedia o laranja da marca aqui, e o dono reverteu o próprio pedido ao ver a colisão — o laranja encostaria em `--p-google` (âmbar, plataforma) e `--conf-fallback` (âmbar, confiança por horário), três âmbares dizendo três coisas na mesma tela. Cor neste produto é DADO; mover cor de dado para acomodar cor de marca inverteria a prioridade. */ --accent: #E8EAED; --accent-fg: #0E1116; /* texto sobre botão accent */ --accent-muted: rgba(232,234,237,0.10); --accent-strong:#FFFFFF; /* ── A MARCA, e ela vive só na MOLDURA ─────────────────────── Regra por zona, decidida em 19/08: laranja manda na moldura (barra lateral e topo, que nunca carregam dado), tinta manda no conteúdo. São exatamente três usos — trilho do item ativo, fundo do item ativo, e o anel de foco — e nenhum outro. O anel de foco não compete com o âmbar de dado: ele é transitório, aparece um por vez, e só existe quando alguém navega por teclado. */ --marca: #FF9333; --marca-fraca: rgba(255,147,51,.14); --marca-linha: rgba(255,147,51,.40); /* ── Confiança da atribuição (os 4 estados) ────────────────── Cada estado tem uma cor e só uma. Nenhuma delas é a cor de ação. */ /* ── A RAMPA DO DADO QUE NÃO É PLATAFORMA (25/08) ──────────── Nasceu para a rosca de sistema operacional e vale para a seção 4 inteira do Relatório ("quem chegou"): aparelho, hora do dia, o tamanho de um anúncio contra o campeão, novo × conhecido. Nenhum deles é uma plataforma, e é exatamente por isso que nenhum deles pode usar a paleta `--p-*`. TEAL porque é a única matiz que NENHUMA plataforma usa: azul é Facebook, rosa é Instagram, âmbar é Google, verde é link, roxo é ChatGPT. Assim a seção ganha cor sem que a cor passe a significar duas coisas em dois lugares -- cor neste produto continua sendo DADO. Contra o verde do link dá ΔE 19,1 em visão normal: não se confundem. ⚠️ CONTRATO: `--so-5` é o passo MAIS FORTE contra a superfície DESTE tema, e o markup dá `--so-5` para a MAIOR fatia, sempre, nos dois temas. Por isso a rampa INVERTE DE SENTIDO aqui: no claro, forte = escuro; no escuro, forte = CLARO. Mantendo a mesma ordem nos dois, a categoria dominante (Android, 58%) saía como a fatia mais APAGADA do gráfico no tema escuro -- defeito visto renderizado, não deduzido. QUEM INVERTE É O TOKEN, NUNCA O MARKUP: com a inversão no HTML, cada tela nova teria de lembrar de fazê-la, e a primeira que esquecesse erraria em silêncio. `tests/unit/rampa-do-sistema.test.js` cobra o contrato. #0F766E (o passo mais fraco aqui) dá 3,19:1 contra `--bg-surface`. */ --so-5: #5EEAD4; --so-4: #2DD4BF; --so-3: #14B8A6; --so-2: #0D9488; --so-1: #0F766E; /* ── A RAMPA DE "JÁ ERA DA CASA" (25/08, ADENDO) ───────────── ⚠️ ELA EXISTE PORQUE A TEAL REPROVOU, e o dono viu antes de mim. Enquanto "já era da casa" foi uma BARRA empilhada, dois passos vizinhos da teal passavam; virando ROSCA, fatia encostada em fatia, eles dão ΔE 7,6 -- o validador chama de "difícil de distinguir mesmo com visão normal". ÍNDIGO, e cada candidato foi medido contra TODAS as cores que já têm dono: laranja ✗ ΔE 1,6 do âmbar do Google -- é praticamente a mesma cor vermelho ✗ ΔE 13,1 do rosa do Instagram índigo ✓ pior caso ΔE 17,9 (do azul do Facebook) ⚠️ MESMO CONTRATO DA TEAL: `--ja-2` é o passo MAIS FORTE contra a superfície DESTE tema, e o markup dá `ja-2` para "Gente nova" nos dois temas. Por isso a rampa inverte aqui: no claro, forte = escuro; no escuro, forte = CLARO. Quem inverte é O TOKEN, nunca o markup. A terceira cor do gráfico é `--p-nada`, e ela NÃO é um passo desta rampa: "não dá para saber" é AUSÊNCIA, e precisa recuar em vez de competir. */ --ja-2: #A5B4FC; --ja-1: #6366F1; --conf-codigo-fg: #34D399; --conf-codigo-bg: rgba(52,211,153,0.14); --conf-manual-fg: #60A5FA; --conf-manual-bg: rgba(96,165,250,0.14); --conf-fallback-fg: #FBBF24; --conf-fallback-bg: rgba(251,191,36,0.14); --conf-sem-fg: #A1A1AA; --conf-sem-bg: rgba(161,161,170,0.12); /* ── Botões de decisão da fila de comprovantes ─────────────── EXCEÇÃO ASSUMIDA à regra do accent (decisão do dono, 13/08): nesta tela verde CONFIRMA e vermelho DESCARTA. Vale só ali -- tokens próprios, e não `--sucesso`/`--critico`, justamente para que a exceção não vaze para o resto do app quando alguém mexer nas cores de estado. Texto escuro sobre o verde/vermelho claro do tema escuro: branco sobre eles mede 2,5:1 e 3,8:1, abaixo do mínimo de 4,5. Assim medem 5,8 e 4,9. */ --dec-ok-bg: #10B981; --dec-ok-fg: #052E21; --dec-no-bg: #EF4444; --dec-no-fg: #2B0707; /* Semânticos muted (badges/banners) */ --danger-muted: rgba(239,68,68,0.12); --warning-muted: rgba(245,158,11,0.12); --info-muted: rgba(59,130,246,0.12); /* Semânticos de estado, por tema: sobre fundo escuro eles precisam de mais luz para alcançar contraste, e sobre fundo claro de mais profundidade. */ --sucesso: #35B37E; --aviso: #E0A106; --critico: #E5646A; /* Aliases retrocompatíveis (views antigas continuam funcionando) */ --bg: var(--bg-base); --bg-alt: var(--bg-surface); --fg: var(--text-primary); --fg-mut: var(--text-secondary); } /* ═══════════════════════════════════════════════════ TEMA LIGHT (mantido, mas dark é o alvo do redesign) ═══════════════════════════════════════════════════ */ [data-theme="light"] { /* MESMA PALETA, calibrada para o claro (05/09). Medido pela fórmula WCAG, não estimado: `--p-google` no valor do escuro (#D97706) dava 2,97:1 contra `--bg-base` -- abaixo do mínimo de 3:1 para elemento gráfico (WCAG 1.4.11). Escurecido 10% (#C36B05) dá 3,61:1. Os outros seis já passavam com folga no valor do escuro (facebook 3,43 é o segundo mais apertado) e ficam iguais -- só o token muda de :root para cá, o valor não muda. */ --p-google: #C36B05; --p-facebook: #3B82F6; --p-instagram: #DB2777; --p-link: #15803D; --p-chatgpt: #7E22CE; --p-nada: #3F3F46; --p-meta: #64748B; /* MESMO TOM do escuro (achado da revisão final, 06/09): #7C6F57 mede 4,59:1 contra `--bg-base` aqui no claro -- já passa o piso de 3:1 sem precisar escurecer feito `--p-google` precisou. Ver o comentário completo (números de ΔE contra os outros seis `--p-*`) no bloco escuro acima. */ --p-outros: #7C6F57; /* O cinza de fundo puxa levemente para o FRIO. Um #FAFAFA neutro sobre um card branco é o começo de qualquer template; a diferença de temperatura é o que faz a figura destacar do fundo. */ --bg-base: #F6F7F9; --bg-surface: #FFFFFF; --bg-afundado: #F1F3F5; --bg-elevated: #EEF0F3; --border: rgba(16,20,28,.08); --border-hover:rgba(16,20,28,.14); /* Mesmo raciocínio do bloco escuro acima -- ver o comentário de lá. Alpha 0,50 sobre `--bg-afundado` (#F1F3F5) dá 3,37:1, recalculado pela fórmula WCAG (não estimado, e corrigido de "3,42:1" da auditoria original -- `tests/unit/contraste-tema-claro-painel-geral.test.js` mede este valor de verdade a cada execução, então o número aqui é só documentação, e precisa bater com o que o teste mede). 0,46 já cruzaria o mínimo de 3:1 (3,03:1); 0,50 dá folga sem escurecer o suficiente para competir com os segmentos coloridos ao lado -- conferido visualmente no Step 15. */ --traco-sem-origem: rgba(16,20,28,.50); --text-primary: #14181F; --text-secondary: #5A6472; /* #8B95A3 media 3,03:1 sobre branco -- reprova o mínimo de 4,5 para texto, e é justamente ele que pinta o rótulo dos cartões ("CONVERSAS RASTREADAS", 12px). Escurecido até 4,51:1, mantendo o mesmo matiz frio. Medido no navegador, não estimado. AJUSTADO DE NOVO em 05/09: o mesmo token pinta o rodapé de mecânica e o cabeçalho de coluna da tela de Usuários, os dois direto sobre `--bg-base` (nunca um cartão branco) -- ali `#6F7782` dava 4,22:1, abaixo do mínimo. `#69717D` dá 4,60:1 contra `--bg-base` e 4,93:1 contra `--bg-surface`, calculado pela fórmula WCAG (não estimado). */ --text-tertiary: #69717D; --sombra-sm: 0 1px 2px rgba(16,20,28,.05); --sombra-md: 0 1px 3px rgba(16,20,28,.06), 0 8px 24px -12px rgba(16,20,28,.12); --sombra-lg: 0 12px 32px -8px rgba(16,20,28,.18); --accent: #14181F; --accent-fg: #FFFFFF; --accent-muted: rgba(20,24,31,0.06); --accent-strong:#000000; /* O laranja do tema claro precisa ser mais fundo que o do escuro: o #F07E13 do brief media 2,54:1 sobre o fundo, e um anel de foco é ELEMENTO DE INTERFACE — o mínimo dele é 3:1, não os 4,5 de texto. #DA7311 dá 3,04:1 e continua o mesmo laranja de marca. `--marca-fraca` e `--marca-linha` seguem o tom original: elas são fundo e borda, não portadoras de contraste. */ --marca: #DA7311; --marca-fraca: rgba(240,126,19,.12); --marca-linha: rgba(240,126,19,.35); /* A RAMPA DO SISTEMA OPERACIONAL, no sentido do tema claro. Mesma matiz e mesmos passos do escuro, na ORDEM CONTRÁRIA: aqui o mais forte contra a superfície branca é o mais ESCURO. Ver o contrato completo no bloco do tema escuro -- `--so-5` é sempre o passo mais forte, e é sempre ele que o markup dá à maior fatia. ⚠️ O PASSO MAIS CLARO NÃO É O DO MOCKUP, e o motivo é medido: o desenho abria em #14B8A6, que dá 2,49:1 contra o branco -- abaixo dos 3:1 que elemento de interface exige, e uma fatia de rosca é elemento. A rampa do claro começa um degrau mais fundo (#0D9488, 3,74:1) e desce daí. É a terceira tentativa desta rampa; as duas primeiras reprovaram no mesmo ponto. */ --so-1: #0D9488; --so-2: #0F766E; --so-3: #115E59; --so-4: #134E4A; --so-5: #0C3F3B; /* A RAMPA DE "JÁ ERA DA CASA", no sentido do tema claro: aqui o mais forte contra a superfície branca é o mais ESCURO. Ver o contrato completo no bloco do tema escuro. ⚠️ `#818CF8` DÁ 2,98:1 CONTRA O BRANCO -- dois centésimos abaixo do piso de 3:1 que elemento de interface exige. É WARN e não FAIL, e a regra da casa já resolve: todo número vai ESCRITO ao lado da cor nesta tela. NÃO subir o tom para fechar a conta -- isso o aproximaria do azul do Facebook, que é exatamente o que a escolha do índigo existe para evitar. */ --ja-1: #818CF8; --ja-2: #4338CA; /* Confiança — mesmos 4 estados, calibrados pro fundo claro (todos ≥ 4.5:1) */ --conf-codigo-fg: #047857; --conf-codigo-bg: rgba(4,120,87,0.10); --conf-manual-fg: #1D4ED8; --conf-manual-bg: rgba(29,78,216,0.10); --conf-fallback-fg: #B45309; --conf-fallback-bg: rgba(180,83,9,0.10); --conf-sem-fg: #52525B; --conf-sem-bg: rgba(82,82,91,0.08); /* Mesma exceção, calibrada para o fundo claro: aqui o texto é BRANCO, e por isso o verde é o #047857 e não o #059669 -- sobre o tom mais claro o branco media 3,8:1. Assim medem 5,5 e 4,8. */ --dec-ok-bg: #047857; --dec-ok-fg: #FFFFFF; --dec-no-bg: #DC2626; --dec-no-fg: #FFFFFF; --danger-muted: rgba(239,68,68,0.10); --warning-muted: rgba(245,158,11,0.10); --info-muted: rgba(59,130,246,0.10); --sucesso: #17784F; --aviso: #B4690E; --critico: #B42318; --bg: var(--bg-base); --bg-alt: var(--bg-surface); --fg: var(--text-primary); --fg-mut: var(--text-secondary); }