/* ===================================================================== WorthCut — tokens da identidade visual Fonte ÚNICA de cor, tipografia e forma do painel. Componente nenhum escreve hex; tudo sai daqui. Racional e regras: docs/IDENTIDADE.md. Tema: claro por padrão (oficina é ambiente iluminado). O escuro entra pela preferência do sistema e pode ser forçado com data-tema no : | Os números em comentário são contraste WCAG MEDIDO contra a superfície do próprio tema — não estimativa. Mudou um valor, remede. ===================================================================== */ :root { /* ---------- neutros (viés de azul, escolhidos — não cinza puro) ---- */ --wc-fundo: #F9FBFD; /* chão da página */ --wc-sup: #FFFFFF; /* cartão, campo, barra */ --wc-sup2: #F4F7FB; /* superfície recuada, chapa do plano */ --wc-linha: #E9EEF5; /* hairline */ --wc-linha-forte: #D6DFEA; /* borda de campo, divisor forte */ --wc-tinta: #16212E; /* 16,27:1 */ --wc-tinta-2: #4A5A6E; /* 7,05:1 */ --wc-tinta-3: #5F7185; /* 5,02:1 — esmaecida, ainda AA */ /* ---------- marca ------------------------------------------------- */ --wc-marca: #2670B6; /* 5,15:1 — o azul do logo, intocado */ --wc-acao: #1C5991; /* 7,27:1 — link e texto sobre branco */ --wc-marca-tint: #EAF2FB; --wc-botao-fundo: #2670B6; --wc-botao-tinta: #FFFFFF; /* 5,15:1 sobre o botão */ /* ---------- séries de dados --------------------------------------- * * Validadas em 4 tipos de daltonismo, todos os pares, nos DOIS temas. * Pior par ΔE 10,7 (claro) e 9,2 (escuro). Um 4º material NÃO ganha * cor nova: vira "outros" com hachura a 45°. */ --wc-serie-1: #2670B6; /* = marca. O logo aparece no gráfico */ --wc-serie-2: #C2691A; --wc-serie-3: #16643F; --wc-serie-outros: #94A5A1; /* ---------- estado e severidade ----------------------------------- * * Nunca comunicados só por cor: sempre com ícone e rótulo junto. */ --wc-erro: #B3261E; /* 6,54:1 */ --wc-erro-tint: #FDF0EF; --wc-aviso: #C2691A; /* faixa e ícone (>= 3:1) */ --wc-aviso-texto: #92500B; /* 6,22:1 — quando precisar ser texto */ --wc-aviso-tint: #FDF5EA; --wc-ok: #16643F; /* 7,17:1 — concluído, executado */ --wc-andamento: #2670B6; /* executando = a ação da marca */ /* ---------- cores por peça (P2.3b) ------------------------------- * * Cada CÓDIGO de peça recebe uma cor estável (hash djb2 → índice), * para o operador achar "todas as Laterais" de relance numa chapa * cheia. Dez cores, não quinze: acima disso apareciam pares a ΔE 0,5 * em deuteranopia — duas peças diferentes ficando idênticas. Colisão * é aceita (>10 códigos repetem cor); o RÓTULO é a verdade, a cor é * redundância de leitura (regra §5: nada dito só por cor). * * Saturação do fundo escolhida por medição: a máxima que ainda mantém * o rótulo em tinta única com AA. Claro 66 % (rótulo 4,58:1, fundos a * ΔE 5,3), escuro 54 % (4,56:1, ΔE 4,7). */ --wc-peca-1: #2670B6; --wc-peca-1-fundo: #70A1CF; --wc-peca-2: #C2691A; --wc-peca-2-fundo: #D79C68; --wc-peca-3: #16643F; --wc-peca-3-fundo: #659980; --wc-peca-4: #8B2A8F; --wc-peca-4-fundo: #B272B5; --wc-peca-5: #B3261E; --wc-peca-5-fundo: #CD706A; --wc-peca-6: #0F6F7A; --wc-peca-6-fundo: #61A0A7; --wc-peca-7: #5A4FCF; --wc-peca-7-fundo: #928BDF; --wc-peca-8: #A81E63; --wc-peca-8-fundo: #C66A98; --wc-peca-9: #4F7A16; --wc-peca-9-fundo: #8BA765; --wc-peca-10: #455A75; --wc-peca-10-fundo: #8492A4; /* ---------- papéis no desenho da chapa ---------------------------- * * Aqui cor é INFORMAÇÃO. Rótulo sempre na cor da borda, sobre o * preenchimento — todos medidos >= 4,5:1. */ --wc-peca-fundo: #EAF3FC; --wc-peca-linha: #1C5991; --wc-filler-fundo: #FDF2E3; --wc-filler-linha: #C2691A; --wc-retalho-fundo: #E9F5EF; --wc-retalho-linha: #16643F; --wc-refugo-fundo: #F4F7FB; --wc-refugo-linha: #DCE4EE; --wc-corte: #16212E; /* traço e chip numerado da sequência */ /* ---------- elevação ---------------------------------------------- * * No claro quem separa é a sombra; no escuro, a borda (ver abaixo). */ --wc-sombra: 0 1px 2px rgba(22,33,46,.035), 0 14px 32px -22px rgba(22,33,46,.30); --wc-sombra-alta: 0 2px 4px rgba(22,33,46,.04), 0 22px 46px -26px rgba(22,33,46,.34); /* ---------- tipografia -------------------------------------------- * * Face do sistema: nunca falha, nunca pisca com fallback. Medida, * UC, tempo e id SEMPRE em mono com numeral tabular. */ --wc-fonte: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --wc-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "DejaVu Sans Mono", monospace; --wc-txt-micro: 11px; /* rótulo mono maiúsculo, tracking .09em */ --wc-txt-apoio: 13px; --wc-txt-menor: 14px; --wc-txt-corpo: 16px; --wc-txt-sub: 20px; --wc-txt-secao: 26px; --wc-txt-titulo: 34px; --wc-peso-normal: 400; --wc-peso-medio: 550; --wc-peso-forte: 650; --wc-peso-maximo: 700; --wc-tracking-titulo: -0.02em; --wc-tracking-micro: 0.09em; /* ---------- espaço e forma ---------------------------------------- * * O KERF (2px) é a assinatura: vão entre superfícies irmãs — barras * do gráfico, segmentos do rateio, peças do símbolo. */ --wc-kerf: 2px; --wc-e-1: 4px; --wc-e-2: 8px; --wc-e-3: 12px; --wc-e-4: 18px; /* folga interna padrão do cartão */ --wc-e-5: 28px; --wc-e-6: 48px; --wc-raio: 12px; --wc-raio-p: 8px; --wc-raio-pilula: 99px; --wc-largura-leitura: 70ch; --wc-largura-folha: 1120px; /* ---------- movimento --------------------------------------------- */ --wc-transicao: 120ms ease; --wc-pulso: 1.6s ease-in-out infinite; } /* ===================================================================== TEMA ESCURO — azul-noite Quase-preto com viés de azul, herdado do próprio logo: o mesmo hue da marca puxa os neutros, então o azul #4694E0 pousa em casa em vez de ser aplicado sobre cinza. Escolha do PCP em 2026-07-31, depois de comparar com uma rampa cinza (estilo VS Code) — enterrada. Consequência: no escuro a SOMBRA não separa nada (sombra é ausência de luz, e ali já não há luz). Quem desenha os limites é a hairline. ===================================================================== */ /* Escuro pela preferência do sistema, exceto se o usuário forçou claro. O bloco [data-tema="escuro"] mais abaixo tem a mesma especificidade e vem depois — por isso forçar escuro funciona mesmo com o SO em claro. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --wc-fundo: #0C1421; --wc-sup: #121C2B; --wc-sup2: #182436; --wc-linha: #253243; /* 1,32:1 — a hairline separa aqui */ --wc-linha-forte: #35455A; --wc-tinta: #E7EDF5; /* 14,53:1 */ --wc-tinta-2: #A3B2C4; /* 7,93:1 */ --wc-tinta-3: #7C8A9C; /* 4,87:1 */ --wc-marca: #4694E0; /* 5,36:1 no cartão · 5,78:1 no fundo */ --wc-acao: #4694E0; --wc-marca-tint: #132741; --wc-botao-fundo: #4694E0; --wc-botao-tinta: #0A1220; /* 5,87:1 sobre o botão */ --wc-serie-1: #4694E0; --wc-serie-2: #C97A20; /* 5,13:1 */ --wc-serie-3: #2E9E72; /* 5,09:1 */ --wc-serie-outros: #6E807C; --wc-erro: #F0766A; /* 6,12:1 */ --wc-erro-tint: #2A1614; --wc-aviso: #C97A20; /* 5,13:1 */ --wc-aviso-texto: #D68F35; /* 6,39:1 */ --wc-aviso-tint: #231B0D; --wc-ok: #2E9E72; --wc-andamento: #4694E0; /* Aqui os preenchimentos quase empatam em luminosidade com a chapa (1,02–1,04:1): quem separa peça de chapa é a BORDA, medida em 4,65–4,89:1. Não afine essas bordas. */ --wc-peca-1: #4694E0; --wc-peca-1-fundo: #2E5D8D; --wc-peca-2: #D8862B; --wc-peca-2-fundo: #7D552B; --wc-peca-3: #2E9E72; --wc-peca-3-fundo: #216251; --wc-peca-4: #C273C8; --wc-peca-4-fundo: #714B80; --wc-peca-5: #F0766A; --wc-peca-5-fundo: #8A4D4D; --wc-peca-6: #3FA8B4; --wc-peca-6-fundo: #2A6875; --wc-peca-7: #8F86EE; --wc-peca-7-fundo: #565594; --wc-peca-8: #E2669B; --wc-peca-8-fundo: #824467; --wc-peca-9: #8FBE45; --wc-peca-9-fundo: #567339; --wc-peca-10: #8AA0BC; --wc-peca-10-fundo: #536379; --wc-peca-fundo: #132741; --wc-peca-linha: #4694E0; --wc-filler-fundo: #2B2010; --wc-filler-linha: #C97A20; --wc-retalho-fundo: #102A22; --wc-retalho-linha: #2E9E72; --wc-refugo-fundo: #182436; --wc-refugo-linha: #2E3C4F; --wc-corte: #E7EDF5; /* 13,26:1 sobre a chapa */ --wc-sombra: 0 1px 2px rgba(0,0,0,.30), 0 14px 32px -22px rgba(0,0,0,.70); --wc-sombra-alta: 0 2px 4px rgba(0,0,0,.34), 0 22px 46px -26px rgba(0,0,0,.80); } } /* Forçado pelo usuário: precisa ganhar da media query nos dois sentidos */ :root[data-tema="escuro"] { --wc-fundo: #0C1421; --wc-sup: #121C2B; --wc-sup2: #182436; --wc-linha: #253243; --wc-linha-forte: #35455A; --wc-tinta: #E7EDF5; --wc-tinta-2: #A3B2C4; --wc-tinta-3: #7C8A9C; --wc-marca: #4694E0; --wc-acao: #4694E0; --wc-marca-tint: #132741; --wc-botao-fundo: #4694E0; --wc-botao-tinta: #0A1220; --wc-serie-1: #4694E0; --wc-serie-2: #C97A20; --wc-serie-3: #2E9E72; --wc-serie-outros: #6E807C; --wc-erro: #F0766A; --wc-erro-tint: #2A1614; --wc-aviso: #C97A20; --wc-aviso-texto: #D68F35; --wc-aviso-tint: #231B0D; --wc-ok: #2E9E72; --wc-andamento: #4694E0; --wc-peca-1: #4694E0; --wc-peca-1-fundo: #2E5D8D; --wc-peca-2: #D8862B; --wc-peca-2-fundo: #7D552B; --wc-peca-3: #2E9E72; --wc-peca-3-fundo: #216251; --wc-peca-4: #C273C8; --wc-peca-4-fundo: #714B80; --wc-peca-5: #F0766A; --wc-peca-5-fundo: #8A4D4D; --wc-peca-6: #3FA8B4; --wc-peca-6-fundo: #2A6875; --wc-peca-7: #8F86EE; --wc-peca-7-fundo: #565594; --wc-peca-8: #E2669B; --wc-peca-8-fundo: #824467; --wc-peca-9: #8FBE45; --wc-peca-9-fundo: #567339; --wc-peca-10: #8AA0BC; --wc-peca-10-fundo: #536379; --wc-peca-fundo: #132741; --wc-peca-linha: #4694E0; --wc-filler-fundo: #2B2010; --wc-filler-linha: #C97A20; --wc-retalho-fundo: #102A22; --wc-retalho-linha: #2E9E72; --wc-refugo-fundo: #182436; --wc-refugo-linha: #2E3C4F; --wc-corte: #E7EDF5; --wc-sombra: 0 1px 2px rgba(0,0,0,.30), 0 14px 32px -22px rgba(0,0,0,.70); --wc-sombra-alta: 0 2px 4px rgba(0,0,0,.34), 0 22px 46px -26px rgba(0,0,0,.80); } /* ===================================================================== Base mínima. O resto é responsabilidade dos componentes. ===================================================================== */ html { color-scheme: light dark; } :root[data-tema="claro"] { color-scheme: light; } :root[data-tema="escuro"] { color-scheme: dark; } body { margin: 0; background: var(--wc-fundo); color: var(--wc-tinta); font-family: var(--wc-fonte); font-size: var(--wc-txt-corpo); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Todo número que entra em coluna usa isto — valor que muda enquanto o job roda não pode fazer a linha dançar. */ .wc-num { font-family: var(--wc-mono); font-variant-numeric: tabular-nums; } .wc-rotulo { font-family: var(--wc-mono); font-size: var(--wc-txt-micro); font-weight: var(--wc-peso-forte); letter-spacing: var(--wc-tracking-micro); text-transform: uppercase; color: var(--wc-tinta-3); } /* O logo é SVG de cor única: a cor vem daqui. O `color: inherit` no svg é OBRIGATÓRIO — os arquivos trazem color="#2670B6" na raiz para renderizarem azuis quando abertos sozinhos, e esse atributo de apresentação venceria a herança. Uma regra CSS ganha dele; sem esta linha o logo ignora o tema escuro. */ .wc-logo { color: var(--wc-marca); } .wc-logo svg { display: block; height: 100%; width: auto; color: inherit; } :focus-visible { outline: 2px solid var(--wc-marca); outline-offset: 2px; border-radius: var(--wc-e-1); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }