/* ========================================================================== TOKENS — o vocabulário visual do Hórus. Este arquivo NÃO estiliza nada. Ele só dá nome aos valores. Quem estiliza é o `componentes.css` e o CSS de cada tela, que devem consumir estes nomes em vez de escrever o valor na mão. --------------------------------------------------------------------------- POR QUE ISSO EXISTE Levantamento feito na main em 28/08/2026: o sistema tinha 4.259 literais de cor espalhados em 615 tons distintos. Não era variação de propósito, eram paletas concorrentes convivendo — o mesmo azul primário aparecia como #007bff (Bootstrap 4), #0d6efd (Bootstrap 5) e #5788fd (marca), e o mesmo verde como #28a745 e #198754. Branco era #fff em 543 lugares e #ffffff em outros 41. A causa é conhecida: o site roda Bootstrap 4, mas muito código foi copiado de material de Bootstrap 5. Como a classe da versão nova não existia aqui, o valor foi transcrito à mão num `style=`. Daí as duas paletas. Trocar um valor abaixo troca o sistema inteiro. É esse o ganho. --------------------------------------------------------------------------- REGRAS DE USO 1. Cor nova no CSS: usar token. Se não existir token para o que você quer, o certo é discutir e criar o token, não escrever o hexadecimal. 2. Os valores das cores semânticas (sucesso/perigo/aviso/info) são os do BOOTSTRAP 4, porque é o Bootstrap que o site carrega de fato — são as cores que `.btn-success`, `.text-danger` etc. já renderizam. Usar o token garante que o CSS escrito à mão bata com o que o Bootstrap desenha. 3. Este arquivo não tem seletor além do `:root`. Se você sentiu vontade de escrever uma regra aqui, ela pertence ao `componentes.css`. ========================================================================== */ :root { /* ------------------------------------------------------------------ COR PRIMÁRIA #5788fd é a cor da marca no sistema — decisão de 28/08/2026, tomada comparando as opções na tela. Antes desta decisão o site usava DOIS azuis primários lado a lado sem querer: `btn-primary` renderizava #007bff (Bootstrap 4) e `botao_acao` era #5788fd (base.css:667). Dois botões vizinhos, cores diferentes. ------------------------------------------------------------------ */ --cor-primaria: #5788fd; --cor-primaria-hover: #3f74f0; --cor-primaria-ativa: #2f63d9; /* fundo bem claro derivado da primária: caixinhas de ícone, destaques, linha selecionada. Já era usado como #EEF3FF antes de ter nome. */ --cor-primaria-suave: #eef3ff; /* ------------------------------------------------------------------ LINK — a primária serve para PREENCHER (texto branco por cima); como TEXTO ela dá 3,31:1 sobre branco, abaixo do mínimo de 4,5:1 exigido para texto. O link usa a primária escura: 5,37:1. (24/09/2026) ------------------------------------------------------------------ */ --cor-link: #2f63d9; /* 5,37:1 sobre branco */ --cor-link-hover: #2551b5; /* 7,18:1 */ /* ------------------------------------------------------------------ CORES SEMÂNTICAS — valores do Bootstrap 4 (ver regra 3 acima) ------------------------------------------------------------------ */ --cor-sucesso: #28a745; --cor-sucesso-suave: #e8f6ec; --cor-sucesso-hover: #218838; /* mesmo escurecido que o Bootstrap usa */ --cor-perigo: #dc3545; --cor-perigo-suave: #fdf0f2; --cor-perigo-hover: #c82333; /* idem */ --cor-aviso: #ffc107; --cor-aviso-suave: #fff8e6; --cor-info: #17a2b8; --cor-info-suave: #e7f6f8; /* Laranja: o degrau entre o aviso e o perigo, para escala de urgência em 4 níveis (prazo de entrega: até 10 / 20 / 30 / mais de 30 dias). Não é intenção de ação: não vira botão, por isso não tem -hover. A cheia dá 4,26:1 sobre branco: serve para borda e ponto, não para texto. */ --cor-laranja: #c75b12; --cor-laranja-suave: #fde9da; /* Texto sobre o fundo suave da mesma família (etiqueta, alerta, célula de status). Escuro o bastante para passar em contraste sobre o pastel; antes cada arquivo escrevia o próprio hexadecimal. */ --cor-sucesso-texto: #1c7430; --cor-perigo-texto: #a71d2a; --cor-aviso-texto: #8a6500; --cor-info-texto: #0f6674; --cor-laranja-texto: #9a4510; /* 5,52:1 sobre a suave */ /* ------------------------------------------------------------------ NEUTROS — a escala de cinzas do Bootstrap 4. Não inventei esta escala: são exatamente os cinzas que o sistema já mais usa (#6c757d aparecia 172 vezes, #212529 96, #dee2e6 61...). Aqui eles só ganharam nome. ------------------------------------------------------------------ */ --cor-texto: #212529; /* texto normal */ /* Degrau entre o texto normal e o suave (cinza-700 do Bootstrap). Usado em texto secundário que ainda precisa de peso — rótulo em negrito dentro de card, valor destacado. Tinha 13 usos escritos à mão no CRM. */ --cor-texto-medio: #495057; --cor-texto-suave: #6c757d; /* legenda, rótulo, texto secundário */ --cor-texto-fraco: #adb5bd; /* placeholder, texto desabilitado */ --cor-borda: #dee2e6; /* borda de card, input, tabela */ --cor-borda-forte: #ced4da; /* borda de input em foco/hover */ --cor-superficie: #ffffff; /* fundo de card, modal, dropdown */ --cor-superficie-alt: #f8f9fa; /* faixa zebrada, cabeçalho de tabela */ --cor-fundo: #f4f6f9; /* fundo da página (o do AdminLTE) */ /* Faixa zebrada da tabela. A primeira tentativa foi #fafbfc e sumia: contra o branco a diferença não se via na tela, e a zebra só existe para ser vista. Este tom separa as linhas sem pesar como o `table-striped` do Bootstrap, que usa rgba(0,0,0,.05). */ --cor-zebra: #f6f8fa; /* Cinza do cabeçalho de tabela. Um degrau acima da zebra, senão a primeira linha se cola nele — os dois ficam no mesmo campo de cinza. */ --cor-tabela-cabecalho: #eceff2; /* Realce de hover neutro: fundo que aparece ao passar o mouse em botão de ícone, item de menu e linha de lista. Precisa ser mais escuro que --cor-superficie-alt, que some contra o branco de um modal. */ --cor-hover-neutro: #eef1f4; /* ------------------------------------------------------------------ PALETA DE AVATAR Oito cores para o avatar de iniciais. A cor sai do NOME da pessoa (`|avatar_cor` no template, `Horus.avatarCor()` no JS), então a mesma pessoa tem sempre a mesma cor, em qualquer tela. A cor NÃO significa nada — não é status, não é papel. Ela existe só para a pessoa ser reconhecível de relance numa lista. Por isso nenhuma delas é a cor da marca nem o vermelho/verde/amarelo de estado: um avatar vermelho não pode parecer erro. Todas foram escolhidas com contraste >= 5.3:1 contra o branco das iniciais (o mínimo da WCAG AA é 4.5:1). ------------------------------------------------------------------ */ --cor-avatar-1: #2f63d9; /* 5.37:1 */ --cor-avatar-2: #1c7430; /* 5.85:1 */ --cor-avatar-3: #a71d2a; /* 7.36:1 */ --cor-avatar-4: #8a6500; /* 5.33:1 */ --cor-avatar-5: #5b3fa8; /* 7.72:1 */ --cor-avatar-6: #0f6674; /* 6.62:1 */ --cor-avatar-7: #a94b1e; /* 5.66:1 */ --cor-avatar-8: #a02553; /* 7.28:1 */ /* ------------------------------------------------------------------ GRÁFICOS (16/10/2026, proposta 1 "Esmeralda" entre 3 protótipos) Nove tons com nome para pintar série de gráfico (barra, linha, fatia). Todos na mesma luminosidade do azul da marca, para nenhuma barra "saltar" ou "afundar", e todos >= 3:1 contra o branco (o mínimo da WCAG para elemento gráfico; texto NÃO vai em cima deles). Antes, o ganho era o --cor-marca-verde (#01582a): escuro demais para preencher barra, e as categorias eram hexadecimais no JS da home. Use pelo PAPEL quando a cor tem significado (-ganho, -perda, -conta, -comparacao); os tons nomeados são a paleta de categorias e o que a pessoa escolhe em Mais opções › Aparência do card. ------------------------------------------------------------------ */ --cor-grafico-esmeralda: #1e9e74; /* 3,39:1 */ --cor-grafico-azul: var(--cor-primaria); /* 3,31:1, a própria marca */ --cor-grafico-vermelho: #e04f5f; /* 3,85:1 */ --cor-grafico-laranja: #cf6a1c; /* 3,66:1 */ --cor-grafico-violeta: #8a63d2; /* 4,38:1 */ --cor-grafico-petroleo: #0b7f99; /* 4,66:1 */ --cor-grafico-rosa: #d24d7a; /* 4,13:1 */ --cor-grafico-ocre: #a16207; /* 4,92:1 */ --cor-grafico-ardosia: #64748b; /* 4,76:1 */ /* Papéis: o que a cor quer dizer. */ --cor-grafico-ganho: var(--cor-grafico-esmeralda); --cor-grafico-perda: var(--cor-grafico-vermelho); --cor-grafico-conta: var(--cor-grafico-azul); --cor-grafico-comparacao: var(--cor-texto-suave); /* vazado, linha do período anterior */ --cor-grafico-comparacao-forte: var(--cor-texto-medio); /* listrado, cheio, segunda medida */ /* Cores da marca Aquarela. O verde é o que está declarado no manifest do PWA e no theme-color; o laranja foi o acento da Logística até 04/09/2026 (leva 18: a cor por módulo acabou). Não são cores de interface — use só quando a marca for o assunto. */ /* Véu: o fundo escurecido atrás de algo que abre por cima da tela inteira (paleta Ctrl+K). Tinta azulada, não preto: combina com a casca. */ --cor-veu: rgba(15, 23, 42, .45); --cor-marca-verde: #01582a; --cor-marca-laranja: #f24f00; /* ------------------------------------------------------------------ CASCA — o menu lateral escuro (09/10/2026, opção B entre 3 protótipos em static/prototipos/casca-layout.html). Era o cinza do AdminLTE (#343a40), o mesmo do cabeçalho e do rodapé: três faixas escuras em volta do conteúdo. O cabeçalho ficou branco, o rodapé saiu, e o menu ganhou um tom de tinta azulada, que conversa com a primária. Texto e ícone são branco translúcido para seguir o fundo. -texto-fraco é o título de seção e o ícone: o mínimo que ainda passa dos 4,5:1. -destaque é a primária clareada para o ícone ativo: a primária pura dá 4,9:1 ali e some no meio dos ícones apagados; esta dá 7,6:1. ------------------------------------------------------------------ */ --cor-casca-fundo: #172131; --cor-casca-texto: rgba(255, 255, 255, .74); /* 9,4:1 sobre o fundo */ --cor-casca-texto-fraco: rgba(255, 255, 255, .50); /* 5,0:1 */ --cor-casca-borda: rgba(255, 255, 255, .10); --cor-casca-hover: rgba(255, 255, 255, .07); --cor-casca-ativo: rgba(87, 136, 253, .22); /* fundo do ativo; branco por cima: 11,6:1 */ --cor-casca-destaque: #8fb0ff; /* ------------------------------------------------------------------ RAIO DE BORDA O sistema usava 3, 4, 5, 6, 8 e 10px sem critério. Consolidei em quatro degraus; 3 e 5 caem no vizinho mais próximo sem ninguém notar. O `lg` é 10px porque é o raio do `botao_acao`, o botão mais nosso. ------------------------------------------------------------------ */ --raio-sm: 4px; --raio-md: 6px; --raio-lg: 8px; --raio-xl: 10px; --raio-pilula: 999px; --raio-circulo: 50%; /* ------------------------------------------------------------------ ESPAÇAMENTO — escala de 4 em 4. Para CSS escrito à mão. No HTML, continue usando os utilitários do Bootstrap (`p-2`, `mr-3`): eles já existem e não vale a pena competir. ------------------------------------------------------------------ */ --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 24px; --esp-6: 32px; --esp-7: 48px; /* ------------------------------------------------------------------ SOMBRA A `md` (0 4px 6px rgba(0,0,0,.1)) já era a sombra mais usada do sistema, com 19 ocorrências copiadas à mão. ATENÇÃO: isto era observação do que existia, não decisão. Em 01/09/2026, comparando as três opções na tela, o CARD ficou com BORDA e sem sombra — o fundo do sistema é cinza e sombra sobre cinza não desenha beirada. Ver "CARD — repintura" no componentes.css. A sombra segue valendo para o que realmente flutua sobre a página: dropdown, folha de baixo, modal. A `--sombra-foco` é o anel de foco do teclado. Ela PRECISA ser derivada da primária: as 16 cópias que existiam no sistema usavam rgba do azul do Bootstrap 5, que não é mais a nossa cor. ------------------------------------------------------------------ */ --sombra-sm: 0 1px 3px rgba(0, 0, 0, .12); --sombra-md: 0 4px 6px rgba(0, 0, 0, .1); --sombra-lg: 0 8px 16px rgba(0, 0, 0, .15); --sombra-foco: 0 0 0 .2rem rgba(87, 136, 253, .35); /* Caixa que flutua sobre a tela inteira (paleta Ctrl+K): mais funda que a -lg e com um contorno de 1px, porque ela fica sobre o --cor-veu. */ --sombra-xl: 0 24px 60px rgba(15, 23, 42, .28), 0 0 0 1px rgba(15, 23, 42, .06); /* ------------------------------------------------------------------ CAMADAS (z-index) Estes são os valores do Bootstrap 4, e é de propósito: o sistema já convive com os componentes dele (modal, dropdown, tooltip). Inventar uma escala própria só criaria uma segunda régua para brigar com a primeira. `--z-acima-de-tudo` existe para não voltarem os `z-index: 9999`, que apareciam 14 vezes. Quem usa 9999 não está escolhendo uma camada, está desistindo de escolher — e a próxima pessoa precisa de 10000. ------------------------------------------------------------------ */ --z-base: 1; --z-dropdown: 1000; --z-sticky: 1020; --z-fixo: 1030; --z-modal-fundo: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-acima-de-tudo: 1080; /* ------------------------------------------------------------------ TIPOGRAFIA — tamanhos para CSS à mão. A família continua vindo do AdminLTE (Source Sans Pro). ------------------------------------------------------------------ */ --fonte-xs: .72rem; --fonte-sm: .82rem; --fonte-md: .9rem; --fonte-lg: 1rem; --fonte-xl: 1.25rem; --peso-normal: 400; --peso-medio: 600; --peso-forte: 700; /* ------------------------------------------------------------------ CELULAR O corte é 767.98px (o `md` do Bootstrap): 24 dos @media do sistema já usam esse valor. NÃO dá para tokenizar o breakpoint — `@media` não lê custom property —, então ele fica escrito na mão mesmo; o que está aqui é o resto. O alvo de toque de 48px é o mínimo confortável para o dedo. O `mobile_kit.css` já usa 46-48px nos rodapés de filtro e de modal; o token dá nome a isso para o próximo componente não chutar outro valor. `--top-bars-offset` NÃO fica aqui: é publicado em tempo de execução pelo `base.js` (barra de ambiente, impersonação) e lido pelo `header_fixo_mobile.css`. Tokenizar seria congelar um valor que muda. ------------------------------------------------------------------ */ --mob-alvo-toque: 48px; --mob-alvo-toque-min: 44px; /* mínimo absoluto, para ícone em barra */ /* Altura de uma barra FIXA no rodapé da tela (16/10/2026). Quem flutua no canto de baixo (a fila de envios à Senior, .hrs-fila-ancora) sobe isso para não cobrir a barra. Zero por padrão; a tela que tem barra fixa embaixo redefine, no próprio CSS mobile, só onde a barra existe: .com-nav-fixa { --hrs-recuo-rodape: 64px; } */ --hrs-recuo-rodape: 0px; /* ------------------------------------------------------------------ MOVIMENTO ------------------------------------------------------------------ */ --transicao-rapida: .15s ease-in-out; --transicao: .25s ease-in-out; } /* Respeita quem pediu menos animação no sistema operacional. */ @media (prefers-reduced-motion: reduce) { :root { --transicao-rapida: 0s; --transicao: 0s; } }