/* tokens.css — a paleta da marca Stabia aplicada ao portal.
 *
 * Fonte: input/Manual_Marca_Stabia_V1.docx, seções 4.1 a 4.3 e 5.
 * Os cinco contrastes da tabela 4.5 do manual foram recalculados com a
 * fórmula normativa da WCAG 2.1 e batem exatamente. Os seis neutros são mesmo
 * derivados do petróleo: matiz entre 180° e 190°, todos dentro de 5,4° dos
 * 184,6° da cor base.
 *
 * MUDANÇA DE TEMA: o portal era escuro e passou a ser claro. Não foi escolha
 * de gosto — o manual define branco como base obrigatória em ~70% da tela, e
 * petróleo sobre os fundos escuros anteriores dava 1,81:1 a 1,94:1, contra o
 * mínimo de 4,5:1. Não havia ajuste possível.
 *
 * OS NOMES FORAM ACERTADOS EM 19/08/2026, e a dívida que este comentário
 * registrava está paga. A família chamava-se `--blue` e guardava petróleo —
 * herança do tema azul anterior. Nome que mente sobre o valor é pior que nome
 * feio: quem lê `--blue` num componente novo escolhe errado sem perceber.
 *
 * A troca esperou de propósito. Mudar valor e nome na mesma passada tornaria
 * impossível saber qual das duas coisas quebrou algo, então o valor mudou na
 * Fase 1 e o nome só agora, em commit isolado, sem nenhuma outra alteração
 * junto.
 *
 * Foram 68 ocorrências em 14 arquivos, 9 delas dentro do JavaScript. Os dois
 * números que circulavam antes estavam errados: este comentário dizia 33, e a
 * auditoria independente mediu 55 — nenhum dos dois contava a família inteira
 * (`--blue2`, `--blue-glow`, `--blue-text` e os dois `-a27`). A troca foi feita
 * pelo prefixo justamente por isso: `--blue` → `--petroleo` renomeia os seis
 * tokens de uma vez, sem ordem de precedência para errar.
 *
 * Nota para quem for limpar: `--petroleo-a27` e `--petroleo2-a27` aparecem uma
 * vez cada — só a própria definição. Ninguém os usa.
 */

:root {
  /* ---------------------------------------------------- superfícies claras
   * Manual 4.1: branco é base obrigatória.
   * Manual 4.3: #F5F8F8 fundo de seção e card; #EBF0F1 hover e linha
   * alternada de tabela. */
  --bg: #FFFFFF;
  --bg2: #F5F8F8;
  --bg3: #EBF0F1;

  /* ------------------------------------------------------------- bordas
   * Manual 4.3: #DBE5E6 bordas, divisores e contorno de input;
   * #B8CCCD elemento desabilitado, placeholder e ícone inativo. */
  --border: #DBE5E6;
  --border2: #B8CCCD;

  /* ----------------------------------------------------- ação e estrutura
   * Petróleo. Manual 4.1 "estrutura e texto", e 4.4 o atribui ao botão
   * primário — é o que resolve a ambiguidade da 4.2, que lista o vermelho
   * de ação como "botão, link, erro". Botão de salvar com a mesma cor da
   * mensagem de erro apagaria o sinal de perigo.
   * Sobre branco: 10,31:1. Branco por cima: 10,31:1. */
  --petroleo: #00484E;
  --petroleo2: #00363B;              /* segundo tom do gradiente de botão */
  --petroleo-glow: rgba(0, 72, 78, .12);   /* halo de foco */
  --petroleo-text: #00484E;
  --petroleo-a27: rgba(0, 72, 78, .22);
  --petroleo2-a27: rgba(0, 54, 59, .22);

  /* --------------------------------------------------------------- texto
   *
   *              branco   #F5F8F8   #EBF0F1
   *   #00484E    10,31      9,65      8,97
   *   #336D71     5,89      5,51      5,12
   *   #477B80     4,76      4,46 !    4,14 !     ! = reprova AA
   */
  --text: #00484E;
  --text2: #336D71;

  /* --text3 aponta para #336D71, e NAO para o #477B80 que o manual indica
   * como "rótulo e legenda". O motivo é medido:
   *
   * A tabela 4.5 do manual calcula todos os contrastes contra BRANCO, e ali
   * #477B80 dá 4,76:1 e passa. Mas rótulo de formulário e etiqueta de cartão
   * caem sobre superfície tingida — #F5F8F8 e #EBF0F1, que são fundos que o
   * próprio manual define — e ali a razão cai para 4,46:1 e 4,14:1. O mesmo
   * neutro que a tabela aprova reprova sobre o fundo que ela institui.
   *
   * O manual dá o sinal de que sabia disso: a seção 4.3 reserva #477B80 para
   * "texto de apoio em 14 px ou MAIS". Os rótulos deste portal têm 10 a 11 px
   * — consequência direta da decisão M8, de manter os tamanhos originais.
   *
   * Enquanto os tamanhos ficarem abaixo de 14 px, --text2 e --text3 apontam
   * para a mesma cor. Os dois tokens continuam separados de propósito: no dia
   * em que os tamanhos subirem, --text3 volta a #477B80 numa linha só. */
  --text3: #336D71;

  /* #477B80 continua em uso, mas só onde NÃO é texto: ícone e elemento de
   * interface respondem pela WCAG 1.4.11, que exige 3:1 — e ali ele passa
   * com folga nos três fundos. */
  --icone: #477B80;

  /* -------------------------------------------------------------- estado
   * O manual NÃO define sucesso nem alerta, e a tela de Alertas precisa de
   * três níveis. Estes dois foram derivados pelo mesmo método dos neutros —
   * matiz própria, saturação plena, luminosidade ajustada até passar 4,5:1
   * no fundo mais exigente (#EBF0F1). Aprovados pelo usuário em 18/08/2026.
   *
   * Limitação declarada: entre 4,5:1 e 10:1 sobre branco cabe pouca variação
   * de luminosidade, então os três não se distinguem em escala de cinza. O
   * que os separa é a matiz — 127° entre sucesso e alerta, 169° entre
   * sucesso e erro. Não fere a WCAG 1.4.1 porque o selo já traz o texto
   * ("VENCIDO", "45d"): a cor reforça, não informa sozinha. */
  --green: #006649;   /* 7,01 · 6,56 · 6,10 nos três fundos */
  --orange: #995C00;  /* 5,40 · 5,06 · 4,70 */
  --red: #C22233;     /* 5,88 · 5,51 · 5,12 — manual 4.2, vermelho ação */

  /* Manual 4.2: preenchimento, ícone grande e grafismo.
   * NUNCA carrega texto abaixo de 24px e NUNCA recebe texto branco —
   * 4,04:1 reprova nos dois sentidos. Por isso não é cor de botão. */
  --red-marca: #F22B40;

  /* --------------------------------------------- barra lateral em petróleo
   * Manual 4.4 atribui a petróleo o header, dentro dos 25% da tela. Com a
   * barra em petróleo e o conteúdo em branco, a proporção 70/25/5 se cumpre
   * sozinha. O logo ali é o negativo, cujo fundo é exatamente #00484E —
   * encaixa sem emenda. */
  --barra-bg: #00484E;
  --barra-texto: #FFFFFF;          /* 10,31:1 sobre a barra */
  --barra-texto2: #B8CCCD;         /*  6,16:1 — item inativo e apoio */
  /* Vermelho que funciona SOBRE petróleo. 5,00:1 na barra.
   *
   * Nasceu de um defeito que ficou três fases invisível. O botão de sair usava
   * --red-marca (#F22B40) no hover, e ali ele dá 2,55:1 — reprova os 4,5:1 de
   * texto E os 3:1 que a WCAG 1.4.11 exige de ícone. O comentário do sidebar.css
   * até registrava o número, mas comparava com a alternativa (1,75:1) em vez de
   * comparar com o mínimo. Escolher o melhor entre dois reprovados não aprova
   * nenhum dos dois.
   *
   * A matriz de contraste não pegava porque só media as variáveis de uma lista
   * fechada, e --red-marca não estava nela. Foi corrigir a ferramenta que fez o
   * defeito aparecer.
   *
   * Mesma matiz do vermelho de marca (353,7°) e mesma saturação (0,88); o que
   * muda é a luminosidade, subida até o primeiro valor com folga sobre o
   * mínimo — 5,00:1, e não os 4,51:1 do limiar exato, que qualquer diferença de
   * arredondamento entre ferramentas derrubaria.
   *
   * NÃO usar sobre fundo claro: ali dá 1,77:1 a 2,04:1. É cor de barra. */
  --barra-perigo: #F99AA4;

  --barra-hover: rgba(255, 255, 255, .08);
  --barra-ativo: rgba(255, 255, 255, .12);   /* branco por cima: 7,40:1 */
  --barra-borda: rgba(255, 255, 255, .14);

  /* --------------------------------------------------------------- forma */
  --radius: 14px;
  --rsm: 9px;

  /* ----------------------------------------------------------- tipografia
   * Manual 5: Montserrat constrói hierarquia, Calibri carrega leitura.
   * Montserrat é open source e vem do Google Fonts. Calibri é proprietária
   * da Microsoft, e a seção 5.1 autoriza a substituição na ordem abaixo —
   * por isso nenhum arquivo de fonte precisa ser hospedado. */
  --fonte-titulo: 'Montserrat', system-ui, sans-serif;
  --fonte-corpo: Calibri, Arial, Roboto, sans-serif;
}