/** * Tokens de design — GV Auditoria * * Nenhum componente declara cor literal. Tudo passa por token, para que * ajuste de identidade visual seja alteração em um arquivo só. * * Paleta e tipografia seguem o manual de identidade do Grupo Vilarouca * (`docs/gv-frontend.md`) — azul-marinho #074866 (Pantone 2210 C), laranja * terracota #E05E3B (7579 C, só CTA/destaque) e creme #F0E6D6 (7527 C). * Os nomes de variável abaixo são os que o resto do app já usa (papel, não * marca) — os valores é que agora vêm do manual. Onde o manual só define um * degradê de 4-5 tons e este app precisa de mais passos (--azul-300, * --neutro-300), o valor foi interpolado dentro da mesma família de cor, não * inventado fora dela. */ :root { /* --- marca (azul-marinho institucional) -------------------- */ --azul-900: #074866; /* topo, sidebar, títulos — Pantone 2210 C */ --azul-700: #0a5d83; --azul-500: #0d72a0; /* ação primária */ --azul-300: #68a6c3; /* interpolado entre azul-500 e azul-100 */ --azul-100: #d7e6ee; /* fundo de destaque */ /* --- neutros (creme/quente, como no manual — não cinza puro) --- */ --neutro-0: #FFFFFF; --neutro-50: #FAF8F4; --neutro-100: #F1EFE9; --neutro-200: #E3E0D8; --neutro-300: #CCC8BF; /* interpolado entre neutro-200 e neutro-500 */ --neutro-500: #B4B0A6; --neutro-700: #6F6C64; --neutro-900: #33312C; /* --- semântica de auditoria (verde/âmbar/vermelho do manual) --- */ --conforme: #2E7D54; --falta: #C0392B; --sobra: #D99A2B; --info: #0a5d83; --atencao: #D99A2B; /* --- paleta categórica de gráficos (Fase 8+, dashboard executivo) --- 8 hues em ORDEM FIXA — a ordem é o mecanismo de segurança contra daltonismo, nunca cosmética (nunca reordenar por gráfico, nunca pular um slot). Validada com `dataviz/scripts/validate_palette.js`: - todos os 8, par ADJACENTE (uso em barra/linha/pilha, onde só vizinhos se tocam): protanopia/deuteranopia ΔE ≥ 8 e leitura normal ΔE ≥ 15 em todo par vizinho, sobre fundo branco; - os 3 primeiros (azul/vermelho/âmbar), "todos os pares" simultâneos (uso em rosca/pizza, onde qualquer fatia pode ficar do lado de qualquer outra) — mesmos limiares, mas testado par a par entre os três, não só vizinho a vizinho. Acima de 3 categorias visíveis ao mesmo tempo (ex. a rosca de status de auditoria, 5 grupos), a cor deixa de ser suficiente sozinha — por isso todo gráfico com identidade por cor também rotula direto na legenda (nunca só a cor carrega o significado). `--serie-3`/`--serie-6` ficam com contraste abaixo de 3:1 sobre branco por serem hues mais claros (âmbar, verde-água) — mitigado do mesmo jeito: legenda/rótulo sempre visível, nunca só a cor. */ --serie-1: #0d72a0; /* azul — mesma cor da ação primária do sistema */ --serie-2: #c0392b; /* vermelho — mesmo tom de --falta */ --serie-3: #d99a2b; /* âmbar — mesmo tom de --sobra */ --serie-4: #2e7d54; /* verde — mesmo tom de --conforme */ --serie-5: #7b5ea7; /* violeta */ --serie-6: #1baf7a; /* verde-água */ --serie-7: #4a3aa7; /* índigo */ --serie-8: #e05e3b; /* laranja — mesmo tom de --laranja (marca/CTA) */ --serie-5-100: #ece7f3; /* tint do violeta (selo de ícone em Meu Desempenho) */ /* --- criticidade (parametrizável no banco; estes são os padrões) --- Rampa de severidade verde→âmbar→laranja-da-marca→vermelho — a única cor fora do trio semântico do manual é a laranja em --crit-alta, e ela já é a cor oficial de destaque (não uma cor nova). */ --crit-baixa: #2E7D54; --crit-media: #D99A2B; --crit-alta: #E05E3B; --crit-critica: #C0392B; /* --- fundos pastel para selos/badges (tint dos semânticos acima) --- Mesmo par cor-de-texto + fundo-tint usado em mais de uma tela (Central, Prioridades) — centralizado aqui para não divergir por arquivo. */ --falta-100: #f8e1de; /* fundo do selo crítico; texto = --crit-critica/--falta */ --atencao-100: #fbf0d8; /* fundo do selo médio; texto = --atencao-texto */ --atencao-texto: #9a6c10; /* --atencao (#D99A2B) não passa AA como texto sobre fundo claro */ --conforme-100: #e2f1ea; /* fundo do estado "tudo em dia"; texto = --conforme */ /* Texto sobre os fundos tint acima (selos) — tons escuros que fecham AA. */ --conforme-texto: #22613F; --falta-texto: #9E2B20; --azul-50: #EEF5F9; /* hover de linha clicável */ --linha-hover: #FBF8F3; /* hover de linha de tabela comum */ /* --- superfícies ------------------------------------------ */ /* Fundo do app: o creme do manual (#F0E6D6) suavizado para tela — o creme puro, atrás de horas de tabela, cansa e reduz o contraste do texto secundário. Cards continuam brancos (--surface) sobre ele. --texto-3 sobre este fundo: ~4.6:1 (AA). */ --ground: #F8F4EE; --surface: var(--neutro-0); --surface-2: var(--neutro-100); --linha: var(--neutro-200); --linha-2: var(--neutro-300); --texto: #053246; /* azul-900 do manual — texto principal é tinta azul, não preto */ --texto-2: var(--neutro-700); /* NÃO usar --neutro-500 aqui: dá ~2.2:1 sobre fundo claro, bem abaixo do mínimo WCAG AA (4.5:1) para texto normal — inutilizava rótulo/subtexto em toda a UI. #726F66 é o tom mais claro que ainda passa AA sobre --surface/--ground (~5.0/4.7:1); fica próximo de --texto-2 de propósito — não existe tom visivelmente "mais claro" que passe AA em fundo claro, então a hierarquia entre os dois vem de peso/tamanho de fonte, não só de cor. Sobre --surface-2 (mais escuro) isto ainda não fecha AA — nesses pontos específicos (cabeçalho de tabela etc.) usar --texto-2 direto. */ --texto-3: #726F66; /* --- marca (laranja terracota — só CTA/destaque, nunca fundo de tela) --- */ --laranja: #E05E3B; /* Pantone 7579 C */ --laranja-700: #c44a2a; --laranja-600: #d4502f; --laranja-100: #f8ddd3; --laranja-50: #FDF1E7; /* fundo de leitura "desconhecida" na contagem */ --podio-prata: #8a8f98; /* 2º lugar no pódio de ranking */ --podio-bronze: #a9714a; /* 3º lugar */ --creme: #F0E6D6; /* Pantone 7527 C */ /* --- tipografia ------------------------------------------- */ --fonte: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fonte-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace; --txt-xs: 0.75rem; --txt-sm: 0.875rem; --txt-md: 1rem; --txt-lg: 1.125rem; --txt-xl: 1.375rem; --txt-2xl: 1.75rem; --txt-3xl: 2.25rem; /* --- espaçamento ------------------------------------------ */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; /* --- forma ------------------------------------------------ */ --raio-sm: 4px; --raio: 6px; /* botões, campos, selos retangulares */ --raio-lg: 8px; /* cartões, modais, drawers */ /* Sombra mínima: cartão se define por borda + branco sobre creme; sombra só para o que FLUTUA (menu, modal, drawer, toast). */ --sombra: 0 1px 2px rgba(7, 72, 102, .06); --sombra-lg: 0 2px 6px rgba(7, 72, 102, .08), 0 18px 40px -20px rgba(7, 72, 102, .35); /* --- controles (botão, campo, select) — uma altura só no sistema todo --- */ --controle-h: 40px; --controle-h-sm: 32px; /* --- papéis de marca / ação (Brand Kit) ------------------------------- Regra do manual: azul domina, creme acompanha, laranja destaca. - primária institucional (salvar/confirmar em modal e formulário) = azul - CTA (UMA por tela: a ação principal do cabeçalho) = laranja - destrutiva = vermelho semântico, nunca o laranja da marca */ --gv-primary: var(--azul-900); --gv-accent: var(--laranja); --gv-cream: var(--creme); --acao-primaria: var(--azul-900); --acao-primaria-hover: var(--azul-700); /* Branco sobre #E05E3B mede 3,6:1 (abaixo de AA para texto de botão); o degrau --laranja-700 da mesma família mede 4,8:1 — mesma decisão já tomada na contagem por foto (pages/contagem-foto.css). */ --acao-cta: var(--laranja-700); --acao-cta-hover: #A93D22; --perigo: #B3261E; --perigo-hover: #8F1D17; --foco: var(--azul-500); --foco-anel: 0 0 0 3px rgba(13, 114, 160, .28); /* --- navegação lateral (sobre o azul-marinho) ------------------------ */ --nav-fundo: var(--azul-900); --nav-texto: rgba(255, 255, 255, .76); --nav-texto-fraco: rgba(255, 255, 255, .56); --nav-hover: rgba(255, 255, 255, .08); --nav-ativo: var(--azul-700); --nav-largura: 16.5rem; /* cabe "Prioridades de hoje" + contador sem truncar */ /* --- operação em campo ------------------------------------ */ --toque-min: 48px; /* alvo mínimo de toque na tela de contagem */ --header-h: 56px; /* comporta o símbolo no tamanho mínimo do manual (38px) com folga */ --bottom-nav-h: 60px; /* --- estados sobre fundo escuro (indicador de sincronização, câmera) --- Pastel saturado o bastante para ler sobre --azul-900/preto; não são tint dos semânticos acima porque contraste sobre fundo escuro pede tom mais claro do que contraste sobre fundo claro exige. */ --sinc-ok: #7FD8B4; /* sincronizado; também usado no acerto da leitura por câmera */ --sinc-atencao: #FFD98A; /* enviando */ --sinc-alerta: #FFC9A3; /* offline / erro */ --sinc-bloqueado: #FFB1A8; /* bloqueado */ --negro: #000; /* preto puro — só backdrop/overlay da câmera, nunca texto/UI */ /* --- camadas ---------------------------------------------- */ --z-dropdown: 100; --z-header: 200; --z-drawer: 300; --z-modal: 400; --z-toast: 500; }