/* ========================================================================== Tokens de tema — cores, espaçamento e raio compartilhados (Shell + módulos) ========================================================================== Introduzido em 27/07/2026 pra suportar alternância claro/escuro (pedido do Sylvio, motivado por uma tela de referência da própria CDC). Decisão registrada em docs/adr/0019-tokens-css-tema-claro-escuro.md. ORIGEM DOS VALORES DO TEMA CLARO — não são estimados de captura de tela. Foram extraídos LITERALMENTE do CSS servido pela aplicação de referência da própria CDC ("Duplicatas CDC", https://cdc-diario-pagamentos-production.up.railway.app/), lendo as custom properties declaradas no `:root` dela em 27/07/2026. Aquela aplicação já usa exatamente este sistema de tokens — os NOMES abaixo (`--color-bg`, `--color-surface`, `--color-ink`, ...) são os nomes dela, preservados de propósito. Motivo: se a CDC mandar mais telas ou CSS daquele sistema no futuro, o código cai aqui dentro sem tradução de nome nenhuma, e as duas aplicações ficam visualmente coerentes de verdade, não só "parecidas". O tema escuro é o que o sistema já usava até aqui (valores extraídos do próprio código existente, não aproximados), remapeado pra estes mesmos nomes de token. Uso: qualquer CSS novo ou existente referencia `var(--color-...)`, nunca mais o hex literal. A troca de tema acontece só trocando o atributo `data-tema` na tag — nenhum arquivo de tela precisa saber qual tema está ativo. ATENÇÃO — a aplicação de referência é tema claro apenas; ela não tem modo escuro. Os valores escuros abaixo são NOSSOS (o visual atual do sistema), não vieram dela. ========================================================================== */ /* ========================================================================== TEMA CLARO — padrão, espelha a aplicação de referência da CDC ========================================================================== */ :root, :root[data-tema="claro"] { /* ---- Fonte ---- Barlow é da IDENTIDADE do tema claro (é o que a referência da CDC usa), não uma preferência geral do sistema — por isso mora aqui dentro, e não na seção "comum aos dois temas" lá embaixo. BUG REAL, corrigido 27/07/2026 (achado pelo Sylvio comparando a tela, "ficou mais feio"): eu tinha colocado --font-ui/--font-data no :root comum. Como o tema ainda está travado em escuro nesta fase (ver App.razor), o único efeito visível da fonte ter "vazado" pro comum foi trocar Segoe UI por Barlow no tema escuro sem trocar mais nada — violando o princípio da fase 1 de ficar visualmente neutra no escuro. Bug de escopo de token, não de gosto: cada fonte tem que morar dentro do tema a que pertence, como qualquer cor. */ --font-ui: "Barlow", "Aptos", "Segoe UI", Helvetica, Arial, sans-serif; --font-data: "Barlow", "Aptos", "Segoe UI", Helvetica, Arial, sans-serif; /* ---- Identidade visual CDC ---- */ --color-cdc-blue: #1e7bbc; --color-cdc-blue-deep: #155f96; --color-cdc-blue-soft: #e8f4fb; --color-cdc-cyan: #13d4c3; --color-cdc-cyan-strong: #00a999; --color-cdc-teal: #008c88; --color-brand-navy: #052a3d; --color-brand-panel: #07384f; --brand-gradient: linear-gradient(142deg, #052a3d 0%, #0a5e8f 48%, #008c88 100%); /* ---- Cor de ação primária ---- Convenção pra texto SOBRE fundo --color-primary/-strong (botão primário, etc): usar var(--color-bg), não var(--color-ink-forte). Não é gosto — é a única combinação que dá contraste correto nos dois temas, e a matemática não é intuitiva: --color-primary é ESCURO no tema claro (teal #0a7988) e CLARO no tema escuro (verde #10b981), ou seja, o brilho do botão se inverte entre os temas. --color-bg por acaso inverte na mesma direção necessária (claro no tema claro, escuro no tema escuro), então funciona nos dois sem token dedicado. --color-ink-forte faz o oposto (contrasta com o FUNDO DA PÁGINA, não com o botão) — usá-lo aqui foi um bug real, achado pelo Sylvio em captura de tela (27/07/2026): texto quase preto sobre botão teal escuro no tema claro, ilegível. Corrigido em AdminModulos.razor.css (.admin-btn-primary) trocando pra --color-bg, igual aos outros 8 botões primários do módulo Vendas, que já faziam certo. Contraste verificado (WCAG): 4.64:1 e 7.95:1 nos dois temas — ambos acima do mínimo AA (4.5:1) pro texto deste botão. */ --color-primary: #0a7988; --color-primary-strong: #075464; --color-primary-soft: #e2f6f7; /* ---- Fundos e superfícies ---- */ --color-bg: #eef5f8; --color-bg-strong: #dfeef4; --color-surface: #ffffff; --color-surface-subtle: #f6fbfd; --color-surface-panel: #e7f4f8; /* ---- Texto ---- `--color-ink-forte` não existe na referência: lá título e corpo usam o mesmo `--color-ink`. Nosso código distingue os dois (#f1f5f9 em título, #e2e8f0 no corpo), então o token existe pros dois temas — no claro ele coincide com `--color-ink`, no escuro é mais brilhante. `--color-disabled` também é nosso: a referência resolve desabilitado com `opacity`, nosso código usa cor própria. */ --color-ink: #18232d; --color-ink-forte: #18232d; --color-ink-soft: #344454; --color-muted: #536575; --color-subtle: #687887; --color-disabled: #94a3b8; /* ---- Bordas e foco ---- */ --color-border: #c8dbe6; --color-border-soft: #e0ebf1; --color-focus: #1e7bbc; /* ---- Esqueleto de carregamento ---- */ --color-skeleton: #d9e7ee; --color-skeleton-highlight: #f2f8fa; /* ---- Estados semânticos (badges, alertas) ---- */ --success-bg: #e5f5eb; --success-border: #b7dfc6; --warning-bg: #fff4d7; --warning-wash: #fffaf0; --warning-text: #734900; --warning-border: #edcf8c; --danger-bg: #fff1f0; --danger-text: #8f1d16; --danger-border: #efb1ab; --info-bg: #e9f4ff; --info-text: #155a8a; --info-border: #b9d8ef; --violet-bg: #f0edf5; --violet-text: #60457a; /* ---- Sombras e véu de modal ---- O `--color-backdrop` vem da referência (`.modal-backdrop`). Precisa ser token e não `rgba()` literal: o véu do tema escuro é quase preto (72% de opacidade) e no claro pesaria demais — a referência usa 42% sobre um azul-ardósia, bem mais leve. */ --shadow-popover: 0 18px 48px #0f172a2e; --shadow-modal: 0 24px 56px #0f172a38; --color-backdrop: rgba(15, 23, 42, .42); /* ---- Tokens abaixo NÃO estavam no :root da referência: foram lidos do estilo computado dos componentes reais da tela de Estoque (27/07/2026), porque lá aparecem só como valor literal. Nomeados por nós seguindo a convenção deles. ---- */ --color-table-head-bg: #0d4f70; /* cabeçalho de tabela — azul petróleo, texto branco */ --color-table-head-ink: #ffffff; --color-cell-ink: #172532; /* texto de célula: levemente mais escuro que --color-ink */ /* ---- Escala do mapa coroplético (tela Localidades) ---- A ORDEM INVERTE entre os temas, e isso não é detalhe: numa escala coroplética o valor mais alto tem que ser o mais CONTRASTANTE com o fundo. No tema escuro, isso é o verde mais claro; no claro, o mais escuro. Manter a mesma ordem nos dois faria a faixa "Acima de P75" — justamente a informação mais importante do mapa — quase sumir contra o branco. Antes de virar token (27/07/2026) esta escala existia DUAS vezes: em `Localidades.razor.cs` (`CoresFaixas`, pra legenda) e em `localidadesMapa.js` (pra pintar o SVG), com um comentário em cada pedindo "manter em sincronia se a paleta mudar". Agora os dois leem daqui, e a duplicação some. */ --mapa-faixa-1: #d1fae5; /* até P25 — mais claro */ --mapa-faixa-2: #6ee7b7; --mapa-faixa-3: #10b981; --mapa-faixa-4: #047857; /* acima de P75 — mais escuro/saturado */ --mapa-sem-dado: #e2e8f0; --mapa-contorno: #ffffff; /* ---- Cores de canal (tela Canais de Venda, etapa 11) ---- São cor DE DADO, não de interface: a mesma cor identifica um canal na coluna da matriz, no segmento do "Mix por canal", no segmento da barra empilhada e na legenda — quatro lugares que precisam concordar. Por isso viram token, e não hex literal repetido (mesma razão da escala do mapa acima, que já custou uma duplicação entre C# e JS). A família importa mais que o tom exato: verde = venda ATIVA, azul = venda PASSIVA, cinza = não informado. É o corte central da tela, e tem que continuar legível de relance mesmo pra quem não lê a legenda. Os valores do tema ESCURO são os literais do protótipo. Os do CLARO são mais escuros/saturados de propósito: os do protótipo foram escolhidos contra um fundo #020617 e, sobre superfície branca, um segmento de 12px de altura em #6ee7b7 praticamente some. 5 tokens de canal (4 até 11/08/2026, mais `--canal-site`): Balcão/Visita foi removido, e os três canais de portal (PortalCdc/LojaOnline/ PortalCliente) somam numa única coluna "Portais" na exibição — a matriz nunca mais desenha as três cores separadas, então os três tokens somem daqui também. `--canal-portais` reaproveita o hex que era de `--canal-portal-cdc`: ele já era idêntico a `--grupo-passiva` nos dois temas (não é coincidência — o portal "principal" já tinha sido escolhido pra bater com a cor de grupo), então herdar esse valor mantém a legenda idêntica ao que já era exibido antes do agrupamento. */ --canal-telefone: #059669; --canal-whatsapp: #047857; --canal-email: #065f46; /* Site — token novo em 12/08/2026, com a coluna Site. Cyan em vez do sky de `--canal-portais`: as duas sao de venda PASSIVA e precisam ler como parentes, mas nao podem ser confundidas de relance na legenda, no mix e nas barras empilhadas. Escolhido aqui e nao no prototipo porque esta mudanca nao passou pelo Claude Design (decisao do Sylvio, 11/08/2026) — se a CDC quiser outro tom, muda-se so este par. */ --canal-site: #0e7490; --canal-portais: #0284c7; --canal-nao-informado: #94a3b8; /* Cor de GRUPO (venda ativa / passiva / não informado) — separada da cor de canal de propósito, apesar de hoje coincidir com dois deles. Sem esta separação, a fatia "Venda ativa" da barra de proporção fica visualmente idêntica ao segmento WhatsApp da legenda logo abaixo, e mudar a paleta de UM canal mudaria o significado do resumo — que é o insight central da tela, não um canal a mais. Achado 🔵 do revisor-sonar (31/07/2026). */ --grupo-ativa: #047857; --grupo-passiva: #0284c7; --grupo-nao-informado: #94a3b8; --color-kpi-highlight-bg: #e8f4fb; /* cartão KPI em destaque (ex.: "Liberadas") */ --color-kpi-highlight-border: #9bcbe2; --neutral-bg: #eef2f7; /* badge neutro (ex.: prioridade "Normal") */ --neutral-text: #455565; --success-text: #17603a; /* faltava par do --success-bg já existente */ } /* ========================================================================== TEMA ESCURO — visual que o sistema já tinha, remapeado nos mesmos nomes ========================================================================== Só os tokens que mudam entre temas são redeclarados aqui; espaçamento, raio e z-index são iguais nos dois e ficam na seção comum abaixo. Fonte NÃO é comum — cada tema tem a sua (ver comentário no bloco do tema claro, acima). ========================================================================== */ :root[data-tema="escuro"] { /* Fonte do sistema, a mesma de antes da migração (era literal em app.css: `-apple-system, "Segoe UI", Roboto, sans-serif`). Barlow é identidade do tema CLARO (da referência CDC), não do escuro — o escuro fica com a fonte que sempre teve. */ --font-ui: -apple-system, "Segoe UI", Roboto, sans-serif; --font-data: -apple-system, "Segoe UI", Roboto, sans-serif; /* Identidade CDC: mantida — é a marca, não muda com o tema. Só o gradiente ganha versão mais profunda pra não "brilhar" no escuro. */ --brand-gradient: linear-gradient(142deg, #020617 0%, #052a3d 48%, #075464 100%); /* Verde do sistema atual assume o papel de ação primária no escuro (é o que já destacava item de menu ativo e botão primário hoje). */ --color-primary: #10b981; --color-primary-strong: #059669; --color-primary-soft: rgba(16, 185, 129, 0.15); --color-bg: #020617; --color-bg-strong: #0b1220; --color-surface: #0f172a; --color-surface-subtle: #0b1424; --color-surface-panel: #111827; /* ATENÇÃO à inversão de sentido entre os temas: no claro, "ink-soft" é MAIS claro que "ink" (texto secundário sobre fundo branco). No escuro, texto secundário é mais ESCURO que o principal. Por isso ink-soft aqui não é o #f1f5f9 que hoje usamos em títulos — aquele é mais forte que o corpo, e mapeia pra --color-ink-forte abaixo. Trocar um pelo outro na migração produz título apagado e rótulo brilhante, que é o erro mais fácil de cometer aqui. */ --color-ink: #e2e8f0; /* corpo de texto, células de tabela */ --color-ink-forte: #f1f5f9; /* títulos — no claro cai em --color-ink */ --color-ink-soft: #cbd5e1; /* rótulo de formulário */ --color-muted: #94a3b8; --color-subtle: #64748b; --color-disabled: #475569; --color-border: #1e293b; --color-border-soft: #334155; --color-focus: #34d399; --color-skeleton: #1e293b; --color-skeleton-highlight: #334155; --success-bg: rgba(16, 185, 129, 0.15); --success-border: #065f46; --warning-bg: rgba(251, 191, 36, 0.14); --warning-wash: rgba(251, 191, 36, 0.1); --warning-text: #fde68a; --warning-border: rgba(251, 191, 36, 0.35); --danger-bg: #3f1d1d; --danger-text: #fecaca; --danger-border: #7f1d1d; --info-bg: rgba(56, 189, 248, 0.14); --info-text: #38bdf8; --info-border: rgba(56, 189, 248, 0.45); --violet-bg: rgba(148, 163, 184, 0.1); --violet-text: #cbd5e1; --shadow-popover: 0 18px 48px rgba(0, 0, 0, 0.6); --shadow-modal: 0 24px 56px rgba(0, 0, 0, 0.6); --color-backdrop: rgba(2, 6, 23, .72); /* Escala do mapa — ordem INVERTIDA em relação ao tema claro (ver comentário lá): aqui o valor mais alto é o verde mais CLARO, que é o que mais contrasta com o fundo escuro. Valores idênticos aos que estavam fixos em Localidades.razor.cs e localidadesMapa.js. */ --mapa-faixa-1: #064e3b; /* até P25 — mais escuro */ --mapa-faixa-2: #047857; --mapa-faixa-3: #10b981; --mapa-faixa-4: #6ee7b7; /* acima de P75 — mais claro */ --mapa-sem-dado: #1e293b; --mapa-contorno: #020617; /* Cores de canal — estes são os literais do protótipo "CDC Vendas - Canais de Venda (standalone).html", desenhado sobre fundo escuro. 4 tokens, não 7 — ver comentário completo no bloco do tema claro. `--canal-portais` herda o hex que era de `--canal-portal-cdc`, que já era idêntico a `--grupo-passiva` neste tema. */ --canal-telefone: #34d399; --canal-whatsapp: #10b981; --canal-email: #047857; /* Site — ver comentario no bloco do tema claro. */ --canal-site: #22d3ee; --canal-portais: #38bdf8; --canal-nao-informado: #475569; /* Cor de grupo — ver comentário no bloco do tema claro. */ --grupo-ativa: #10b981; --grupo-passiva: #38bdf8; --grupo-nao-informado: #475569; --color-table-head-bg: #0b1220; --color-table-head-ink: #64748b; --color-cell-ink: #e2e8f0; --color-kpi-highlight-bg: rgba(16, 185, 129, 0.12); --color-kpi-highlight-border: #065f46; --neutral-bg: rgba(148, 163, 184, 0.1); --neutral-text: #cbd5e1; --success-text: #a7f3d0; } /* ========================================================================== RECEITAS DE COMPONENTE — medidas lidas da tela real da referência ========================================================================== Não são tokens, são o "gabarito" pra quem for estilizar tela nova. Todos os valores foram lidos do estilo computado da tela de Estoque da CDC em 27/07/2026, não estimados de captura. Cartão KPI ........ bg var(--color-surface); borda 1px solid var(--color-border); raio 8px (--radius-md); padding 16px (--space-4); valor em 21.6px/700; rótulo pequeno acima; legenda discreta abaixo em var(--color-muted). Variante em destaque: bg var(--color-kpi-highlight-bg), borda var(--color-kpi-highlight-border). Tabela ............ cabeçalho: bg var(--color-table-head-bg), texto var(--color-table-head-ink), 10.88px/700; célula: texto var(--color-cell-ink), 12.48px/400; sem borda visível entre linhas (contraste vem do fundo branco da superfície). Badge (pill) ...... raio 999px (--radius-pill), 10.56px/700. sucesso → bg var(--success-bg) / texto var(--success-text) perigo → bg var(--danger-bg) / texto var(--danger-text) neutro → bg var(--neutral-bg) / texto var(--neutral-text) Fundo de página ... var(--color-bg); o conteúdo fica sobre superfície branca (var(--color-surface)) com cantos arredondados. Barra lateral ..... faixa estreita com var(--brand-gradient) e ícones brancos — é o gradiente de marca, não cor chapada. ========================================================================== */ /* ========================================================================== COMUM AOS DOIS TEMAS — espaçamento, raio, z-index ========================================================================== Valores idênticos aos da aplicação de referência da CDC. Ter estes tokens (e não só cor) é o que permite que as duas aplicações tenham o mesmo "ritmo" visual — cartão com o mesmo raio, respiro com a mesma medida. Fonte NÃO está aqui — cada tema declara a sua (--font-ui/--font-data nos blocos claro/escuro acima). Foi um bug real ter ficado aqui: fonte é identidade visual de tema, não uma constante de sistema como raio ou espaçamento. Ver comentário no bloco do tema claro para o histórico. Sobre Barlow (usada só no tema claro): a referência usa "Barlow" (Google Fonts) com fallback pra Aptos/Segoe UI. Hospedada localmente (não CDN do Google — LGPD/rede corporativa, ver docs/adr/0019-tema-claro-escuro-com-tokens-css.md, item 4), via css/fontes.css (link em App.razor) + arquivos .woff2 em wwwroot/fontes/. Sem esses dois, cai no fallback e a tela fica parecida mas não igual. ========================================================================== */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --z-popover: 20; --z-action: 30; --z-modal: 50; --z-fullscreen: 60; }