/* VAZOU — folha base.

   IDENTIDADE. O VAZOU pertence ao ecossistema SEGGUI e usa a mesma paleta, que
   foi medida pixel a pixel sobre o logotipo original: verde #02563e–#0b9150,
   ciano #01a2ea, azul #007ac8–#002fa2, ouro #fcc800. Os valores abaixo são
   cópia dessas medições, não aproximações — mas são cópia, e não referência: este
   módulo não carrega nenhum arquivo do SEGGUI, e remover a pasta `vazou/` não
   afeta nada fora dela.

   Três traços governam tudo o que vem depois, como no projeto irmão:

   1. A sequência verde → ouro → ciano → azul, na ordem em que as letras do
      logotipo a apresentam. `--faixa-marca` aparece em três lugares e só neles:
      o filete de 3 px no alto da página (`.faixa-marca`), o filete do bloco de
      indicadores (`.indicadores::before`) e o bloco chanfrado da marca
      (`.marca-bloco`). Um quarto uso transformaria assinatura em enfeite.
   2. O corte a 45° dos terminais das letras. Nada é arredondado: os selos têm
      canto curto, e o chanfro aparece literalmente em `--chanfro`.
   3. Peso alto com espaço apertado nos títulos, contra rótulos pequenos e bem
      espaçados no corpo.

   O QUE MUDA EM RELAÇÃO AO SEGGUI, e por quê. O papel das cores é o mesmo, com
   uma adição que o assunto exige: aqui existe o estado "exposição encontrada",
   que não é erro nem sucesso. Ele usa o vermelho de atenção do sistema, e o
   verde continua reservado ao que foi confirmado por mais de uma fonte — nunca
   para dizer "está tudo bem", porque este produto não afirma isso.

   Tipografia de sistema, sem fonte remota: `font-src 'self'` na política de
   conteúdo recusaria uma, e nada deve bloquear a primeira pintura. */

:root {
  /* --- Cores da identidade ----------------------------------------- */
  --verde-700: #046a3c;
  --verde-600: #037e45;
  --verde-500: #0b9150;
  --verde-100: #e4f3ea;

  --ciano-500: #01a2ea;
  --azul-900: #002fa2;
  --azul-800: #08468e;
  --azul-700: #0b5fbb;
  --azul-100: #e6f1fc;

  --ouro-600: #8a5a00;
  --ouro-400: #fcc800;
  --ouro-100: #fff4d6;

  /* A assinatura da marca em uma linha, na ordem de leitura do logotipo. */
  --faixa-marca: linear-gradient(
    90deg,
    var(--verde-700) 0%,
    var(--verde-500) 20%,
    var(--ouro-400) 40%,
    var(--ciano-500) 64%,
    var(--azul-700) 88%,
    var(--azul-900) 100%
  );

  /* --- Neutros ----------------------------------------------------- */
  /* Puxados para o azul-esverdeado da identidade: sobre eles o verde e o azul
     parecem da mesma família, e não duas cores coladas num cinza neutro. */
  --fundo: #f5f8fa;
  --superficie: #ffffff;
  --superficie-2: #eff4f8;
  --borda: #dfe7ee;
  --borda-forte: #c6d3de;
  --texto: #10202b;
  --texto-suave: #51677a;
  --texto-tenue: #5d7286;

  /* --- Papéis ------------------------------------------------------ */
  /* azul  → ação, navegação, foco e seleção;
     verde → marca e confirmação por mais de uma fonte;
     ouro  → atenção, cobertura parcial e fonte que exige credencial;
     vermelho → falha de leitura E exposição encontrada. Não vem da paleta da
     marca, e é o único tom de fora dela. */
  --acento: var(--azul-700);
  --acento-forte: var(--azul-800);
  --acento-fundo: var(--azul-100);

  --marca: var(--verde-700);
  --marca-grafica: var(--verde-600);

  --ok: var(--verde-700);
  --ok-fundo: var(--verde-100);
  --aviso: var(--ouro-600);
  --aviso-fundo: var(--ouro-100);
  --erro: #b42318;
  --erro-fundo: #fdeceb;
  --neutro: #44586b;
  --neutro-fundo: #edf1f5;

  /* --- Forma ------------------------------------------------------- */
  --raio: 10px;
  --raio-pequeno: 6px;
  --raio-selo: 4px;
  --chanfro: 3px;

  --sombra: 0 1px 2px rgba(16, 32, 43, .05);
  --sombra-media: 0 1px 3px rgba(16, 32, 43, .08), 0 4px 12px rgba(16, 32, 43, .05);

  --largura: 1180px;
  --margem: 1.5rem;

  --fonte: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.2; letter-spacing: -.015em; }

a { color: var(--acento); }

/* O padrão do navegador para `code` é monoespaçado num corpo maior que o texto
   ao redor; o ajuste de 0,92em o alinha à linha em que ele aparece. */
code {
  font-family: var(--fonte-mono);
  font-size: .92em;
  padding: .05em .3em;
  background: var(--superficie-2);
  border-radius: var(--raio-selo);
}

/* O anel de foco é da cor de ação e tem um halo branco por fora, para continuar
   visível sobre superfície escura e sobre as faixas coloridas da marca. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--raio-pequeno);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .9);
}

.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.pular {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--superficie); color: var(--texto);
  padding: .6rem 1rem; border: 1px solid var(--borda);
  border-radius: 0 0 var(--raio) 0;
  box-shadow: var(--sombra-media);
}
.pular:focus { left: 0; }

/* ------------------------------------------------------------------ */
/* A marca                                                             */
/* ------------------------------------------------------------------ */

/* O VAZOU não tem arquivo de logotipo, e não usa o do SEGGUI: usá-lo faria um
   produto se apresentar com a marca de outro, e referenciá-lo criaria a
   dependência que este módulo existe para não ter.

   A marca é construída com dois elementos: um bloco chanfrado que carrega a
   sequência de cores da identidade — é ali que a paleta aparece, onde não há
   texto para ler — e a palavra em tom sólido de alto contraste. O gradiente foi
   deliberadamente MANTIDO FORA do texto: aplicado às letras, o ouro #fcc800 e o
   ciano #01a2ea sobre branco ficam abaixo de 4,5:1, e nenhuma palavra deste site
   fica abaixo disso. */
.marca-vazou {
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--azul-900); text-decoration: none;
}

.marca-bloco {
  flex: none;
  width: .78em; height: 1em;
  background: var(--faixa-marca);
  /* O corte a 45° do terminal das letras, em escala de marca. */
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
}

.marca-palavra {
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
}

/* Filete de identidade no alto da página. */
.faixa-marca {
  height: 3px;
  background: var(--faixa-marca);
}

/* O qualificador que diz a que família o produto pertence. Discreto por
   desenho: ele informa procedência, não disputa com o nome. */
.marca-familia {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-tenue);
}