/* ===================================================================== JPII :: Design tokens --------------------------------------------------------------------- O JPII passa a ser subdomínio do AZO Benefícios / AZO Hospitalar, vinculado a um parceiro. A paleta deriva do `css/azo2-tokens.css` do azo2 — coral da marca, teal e lima do ícone, neutros frios — para que quem transita entre os dois sistemas perceba um só produto. O QUE FOI HERDADO DO AZO2 Superfícies, neutros, matizes de marca e semânticos, estrutura do menu (fundo claro, item ativo em coral) e o gradiente do ícone. O QUE NÃO FOI COPIADO CRU, E POR QUÊ A paleta do azo2 reprova em 8 de 18 combinações no piso deste projeto (WCAG 2.2 AA). A mais séria é o botão primário dele: branco sobre o coral puro dá 4.21:1, abaixo dos 4.5 exigidos. Em vez de baixar o piso ou inventar cor nova, cada token textual mantém o MATIZ do azo2 e baixa a luminosidade até passar com folga (alvo 5.0:1, não 4.5 raspando) — e passar nos DOIS fundos em que é usado: o branco da folha e o próprio tom -100 do par. Medir só contra branco deixa passar o caso real: etiqueta de texto escuro sobre o tint da mesma família, que foi onde a primeira derivação reprovou em 4.33:1. Onde o próprio azo2 já tinha um tom aprovado, ele foi reaproveitado em vez de derivado: a ação primária usa --azo-coral-escuro (#C0234F, 5.84:1), que no azo2 é a cor de link e de hover do botão. O coral puro do azo2 continua no sistema como `--marca-500`, mas só em uso NÃO textual — fita de item ativo, anel de foco, borda. Aí vale o piso de 3:1 da WCAG 1.4.11, que ele cumpre. NOMES DOS TOKENS O prefixo "verde" virou "marca" e o prefixo "ocre" virou "apoio". Papel, não pigmento: deixar um coral chamado "verde-700" seria mentir para quem ler o arquivo depois, e o nome por papel sobrevive à próxima troca de marca. O QUE PERMANECE DO DESENHO ANTERIOR Estrutura por régua e não por sombra; duas famílias tipográficas com papéis claros (Archivo no destaque, IBM Plex Sans na interface, mono tabular no número). A tipografia não mudou — o azo2 usa Figtree, e a escolha do Archivo foi uma decisão explícita deste projeto. ===================================================================== */ :root { /* --- Papel: superfícies (azo2 — neutros frios) -------------------- */ --papel-0: #F4F6F9; /* fundo da aplicação — --azo-fundo */ --papel-1: #FFFFFF; /* folha: cartão, tabela, formulário */ --papel-2: #F8FAFC; /* faixa zebrada, cabeçalho de tabela */ --papel-3: #ECEFF3; /* estado hover de linha */ --linha: #E4E8EE; /* régua padrão — --azo-borda */ --linha-forte: #CBD2DC; /* régua de separação de bloco (azo2) */ /* Contorno e fundo do campo. Separados de --linha porque é aqui que mora a única divergência conhecida de acessibilidade: o azo2 usa a mesma régua clara no campo, e isso dá 1,23:1 contra o branco, abaixo dos 3:1 que a WCAG 1.4.11 pede para contorno de controle. Trocar por `--tinta-400` resolve e muda só esta linha. */ --linha-campo: #E4E8EE; --campo-fundo: #FBFCFD; /* fundo do campo em repouso, na Linha E */ /* --- Tinta: texto (azo2) ------------------------------------------ */ --tinta-900: #1F2937; /* título e número — 13.6:1 no fundo */ --tinta-700: #3D434D; /* corpo de texto */ --tinta-500: #5B6472; /* texto secundário — 5.5:1 no fundo */ --tinta-400: #8A93A2; /* NUNCA como texto: 3.1:1 no branco. Só ícone, borda e marcador. testes/contraste.php barra. */ /* --- Marca: coral do AZO ------------------------------------------ */ /* Coral revisado pelo azo2 em 13/10/2026: saiu do magenta (#D6457A) para este tom mais rosado. O comportamento no contraste não mudou — o coral puro continua reprovando com texto branco (4.21:1), e a ação primária continua usando o `--azo-coral-escuro` do azo2. */ /* O coral tem DOIS papéis, e o azo2 os separa: #E33666 preenche (botão, pílula do item ativo) e #C0234F escreve (link). Aqui os dois estavam no mesmo valor — o preenchimento havia herdado a cor de TEXTO do azo2, e era disso que vinha a tela inteira um degrau mais escura que a do grupo. */ --marca-900: #5A0C22; /* preenchimento pressionado */ --marca-800: #9A1C40; /* texto em hover — é o `link-hover` do azo2 */ --marca-700: #C0234F; /* TEXTO da marca: link, ícone sobre claro. É o `--azo-coral-escuro`, no mesmo papel que tem lá. Serve de hover do preenchimento. 5,84:1 sobre branco, 5,03:1 sobre o tint. */ /* PREENCHIMENTO da ação primária — o papel do `--azo-coral`. Não é #E33666 exato por 0,3 de contraste: branco sobre #E33666 dá 4,21:1, abaixo dos 4,5:1 que a WCAG AA pede para rótulo de botão. Este é o coral mais CLARO desta mesma matiz que alcança o piso: 4,51:1. A distância perceptual para o azo2 é dE 5,1 — "tom vizinho" —, contra dE 10,8 do que havia aqui, que já se lia como outra cor. Só preenche: como texto, reprova fora do branco. */ --marca-600: #E1285B; --marca-500: #E33666; /* coral puro, igual ao azo2 — anel de foco e ícone; NÃO textual */ --marca-300: #EE82A0; /* desabilitado */ --marca-100: #FADBE4; --marca-050: #FDE9EF; /* item de menu ativo — --azo-coral-suave */ /* Degradê da marca, LITERAL do azo2 (`--azo-gradiente-marca`). É a única superfície do sistema que usa coral fora da escala acima, e a única que fica abaixo do piso de 4,5:1 — decisão tomada em favor da identidade do grupo, e restrita a este painel decorativo. Branco cheio rende 4,40:1 no topo e 3,88:1 na base; o título passa (texto grande, piso de 3:1), o corpo não. Nenhum controle vive aqui: o formulário fica do lado branco. */ --marca-degrade: linear-gradient(180deg, #E12975 0%, #E33666 45%, #E54A49 100%); /* --- Apoio: teal do ícone do AZO ---------------------------------- */ --apoio-800: #12443E; --apoio-700: #1F7369; /* texto de acento — 5.7:1 no branco, 5.0:1 no -100 */ --apoio-600: #1E7167; --apoio-500: #2A9D8F; /* teal puro — NÃO textual */ --apoio-200: #AFE9E2; --apoio-100: #DFF6F4; /* --- Gradientes da marca AZO -------------------------------------- */ /* O primeiro é o do ícone (o anel teal→lima). O segundo é o da logo, usado na abertura do app do AZO. Ambos são decorativos: o da logo reprova para texto branco em todas as paradas (pior 3.88:1), então nunca entra atrás de texto — para isso existe a escala --marca-*. */ --azo-teal-claro: #7ECDC0; --azo-lima: #BFDC86; --azo-gradiente: linear-gradient(135deg, #7ECDC0 0%, #BFDC86 100%); --azo-gradiente-marca: linear-gradient(180deg, #E12975 0%, #E33666 45%, #E54A49 100%); /* --- Semânticos (matiz do azo2, luminosidade corrigida) ----------- Os pares abaixo são "sobre branco / sobre o próprio -100". O azo2 chegou à mesma conclusão por conta própria: o `azo2-tema.css` usa tons mais escuros que os próprios tokens quando a cor vira texto. `erro` e `info` são os valores exatos de lá, porque passam nos dois fundos. `ok` (#15803D) e `alerta` (#B45309) não deram: no tint da própria família ficam em 4.50:1 e 4.35:1, no piso ou abaixo dele — nesses dois a derivação daqui prevalece. */ --ok-700: #107837; /* apto, vigente, ativo — 5.6 / 5.0:1 */ --ok-500: #16A34A; /* --azo-sucesso */ --ok-100: #DBFAE7; --alerta-700: #995404; /* pendente, aguardando — 5.8 / 5.0:1 */ --alerta-500: #D97706; /* --azo-alerta */ --alerta-100: #FEECD7; --erro-700: #B91C1C; /* inapto, inativo, erro — 6.5 / 5.0:1 */ --erro-500: #DC2626; /* --azo-perigo */ --erro-100: #F9DCDC; --info-700: #0369A1; /* informação, futuro — 5.9 / 5.1:1 */ --info-500: #0284C7; /* --azo-info */ --info-100: #D7F1FF; /* --- Navegação: clara, como no azo2 ------------------------------- */ --nav-fundo: #FFFFFF; /* --azo-menu-fundo */ --nav-texto: #3E4756; /* --azo-menu-texto */ --nav-texto-fraco: #676F7F; /* rótulo de seção e ícone */ --nav-hover: #F4F6F9; /* --azo-menu-hover */ --nav-ativo-fundo: var(--marca-050); --nav-ativo-texto: var(--marca-800); --nav-borda: #E4E8EE; /* --- Tipografia --------------------------------------------------- */ /* Figtree na interface e no destaque: e a fonte do azo2, e o pedido foi igualar o layout ao dele. Isso substitui a Archivo, escolhida antes para os destaques — a decisao mudou de dono, nao de qualidade. A mono fica: o azo2 nao tem equivalente, e valor, CPF e token precisam de digito de largura fixa para a coluna nao dancar. */ --fonte-ui: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --fonte-titulo: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --fonte-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; /* A escala segue a do azo2, que trabalha entre 11 e 14px no corpo da interface e reserva o salto para os títulos. O corpo estava em 15px e era disso que vinha a sensação de "quase igual": uma interface inteira meio ponto acima da do grupo. */ --txt-2xs: 0.6875rem; /* 11px — rótulo de seção do menu */ --txt-xs: 0.75rem; /* 12px */ --txt-sm: 0.8125rem; /* 13px — tabela densa */ --txt-base: 0.875rem; /* 14px — corpo, como o `body` do azo2 */ --txt-md: 1.0625rem; /* 17px — `.title-page` */ --txt-lg: 1.375rem; /* 22px — título de folha */ --txt-xl: 1.75rem; /* 28px — título de página */ --txt-2xl: 2.375rem; /* 38px — número de destaque */ --txt-3xl: 3.25rem; /* 52px — resultado do balcão */ /* O azo2 carrega a Figtree em 400;500;600;700;800 e usa os cinco. O 800 aparece 34 vezes lá, sempre em título grande, e aqui não tinha token — estava escrito à mão em dois lugares. */ --peso-normal: 400; --peso-medio: 500; --peso-forte: 600; --peso-max: 700; --peso-extra: 800; --altura-apertada: 1.2; --altura-normal: 1.5; --altura-solta: 1.65; --tracking-rotulo: 0.08em; /* --- Espaçamento: escala de 4px ----------------------------------- */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.25rem; --e-6: 1.5rem; --e-8: 2rem; --e-10: 2.5rem; --e-12: 3rem; --e-16: 4rem; /* --- Raio --------------------------------------------------------- Escala da Linha E do azo2 (css/azo2-linha-e.css), que é a camada carregada por último lá e, portanto, a que vale. Cada nível de empilhamento ganha um raio maior: campo dentro de cartão dentro de menu. Antes aqui havia um raio só, 12px, e era essa a razão de a tela parecer rígida ao lado do azo2 mesmo com as cores iguais. */ --raio-xs: 4px; /* marcador, barra de progresso */ --raio-sm: 8px; /* etiqueta, tecla, ícone pequeno */ --raio: 12px; /* campo, submenu, botão do rodapé — --azo-raio-sm */ --raio-md: 14px; /* item de menu, textarea */ --raio-lg: 16px; /* menu de ação, cartão de filtro */ --raio-xl: 20px; /* cartão de conteúdo — --azo-raio */ --raio-2xl: 22px; /* menu lateral e modal */ --raio-pill: 999px; /* botão e busca do menu */ /* --- Sombra: apenas sobreposição real ----------------------------- */ /* O azo2 poe uma sombra discreta em todo cartao (--azo-sombra). O desenho anterior daqui era "estrutura por regua, nao por sombra"; igualar ao grupo venceu esse principio local. */ --sombra-cartao: 0 1px 3px rgba(16, 24, 40, .06); /* --azo-sombra */ --sombra-flutuante: 0 12px 32px rgba(16, 24, 40, .14); /* --azo-sombra-lg */ --sombra-modal: 0 24px 64px -16px rgba(16, 24, 40, .32); /* O contorno do azo2 não é `border`: é um anel de 1px feito com box-shadow (--azo-contorno). Em raio grande a borda serrilha no canto e ainda entra no box model, mudando a largura do elemento. O anel não faz nem uma coisa nem outra. */ --anel: 0 0 0 1px var(--linha); --elevacao: var(--anel), var(--sombra-cartao); --elevacao-lg: var(--anel), var(--sombra-flutuante); /* Sombra colorida sob o botão primário e sob o item de menu ativo. */ --sombra-marca: 0 6px 16px rgba(227, 54, 102, .22); --sombra-marca-forte: 0 6px 16px rgba(227, 54, 102, .28); /* --- Estrutura ---------------------------------------------------- */ /* O menu da Linha E é um cartão solto: 248px de caixa com 16px de folga de cada lado, o que reserva 280px de corredor. Os nomes seguem o azo2 para a conferência ser direta. */ --nav-folga: 16px; /* = --azo-espaco-borda */ --nav-caixa: 248px; /* = --azo-menu-caixa */ --nav-caixa-rail: 72px; /* = --azo-menu-caixa-recolhido */ --nav-largura: calc(var(--nav-caixa) + var(--nav-folga) * 2); --nav-largura-rail: calc(var(--nav-caixa-rail) + var(--nav-folga) * 2); --topo-altura: 84px; /* = --azo-topo-altura da Linha E */ --conteudo-max: 1680px; /* = o do azo2 */ --fita-largura: 3px; /* --- Movimento ---------------------------------------------------- */ --tempo-rapido: 120ms; --tempo: 180ms; --curva: cubic-bezier(.22, .61, .36, 1); /* --- Foco: um anel só em todo o sistema --------------------------- */ /* Coral puro, como no azo2. O vão branco interno garante que o anel continue visível mesmo em volta de um botão coral. */ --foco-cor: var(--marca-500); --foco-anel: 0 0 0 2px var(--papel-1), 0 0 0 4px var(--marca-500); } /* Quem pediu menos movimento recebe menos movimento — inclusive nas transições utilitárias, não só nas animações declaradas. */ @media (prefers-reduced-motion: reduce) { :root { --tempo-rapido: 0ms; --tempo: 0ms; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* Modo alto contraste do sistema operacional: reforça as réguas, que são o recurso estrutural principal desta interface. */ @media (prefers-contrast: more) { :root { --linha: #9AA6B6; --linha-forte: #7C8899; --tinta-500: #434B57; --nav-borda: #9AA6B6; } }