/* Identidade visual do HUB da CPE. Unico arquivo com valor literal de cor e de fonte.
   O contraste de cada par abaixo foi medido, nao estimado. */

/* Fontes auto-hospedadas: nenhuma requisicao de rede em runtime, porque o HUB nao
   busca recurso em terceiro.

   O '?v=' e o digest do conteudo do woff2. O Jinja nao processa CSS, entao estes
   enderecos nao passam pelo url_for e nao ganham versao sozinhos — sem o marcador,
   trocar uma fonte deixa presa a copia em cache de quem ja abriu o HUB. Quem trocar o
   arquivo NAO precisa lembrar de mexer aqui: test_versao_do_estatico.py falha e informa
   o valor certo. */
@font-face {
  font-family: "Inter";
  src: url("../fontes/Inter-Regular.woff2?v=e06f6b1b") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fontes/Inter-Bold.woff2?v=fa888127") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fontes/IBMPlexMono-Regular.woff2?v=64bc2a00") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* superficies e texto */
  --superficie: #FFFFFF;
  --superficie-2: #F5F7F8;
  --tinta: #12262B;          /* 15,70:1 sobre --superficie */
  --tinta-suave: #4A6068;    /* 6,64:1 sobre --superficie */
  --tinta-inversa: #FFFFFF;  /* 18,93:1 sobre --marca-fundo */

  /* marca. --marca-acento SO sobre --marca-fundo: rende 1,76:1 contra branco. */
  --marca: #0E5A6B;          /* 7,80:1 sobre --superficie */
  --marca-fundo: #03121E;    /* mediana do anel de borda do PNG da marca, rgb(3,18,30) */
  --marca-acento: #5FD3E4;   /* 10,75:1 sobre --marca-fundo */

  /* estado. Cor nunca sozinha: sempre acompanhada de rotulo textual. */
  --estado-ok: #1F6B3A;      /* 6,52:1 */
  --estado-atencao: #8A4B00; /* 6,80:1 */
  --estado-perigo: #B33A1A;  /* 5,94:1 */

  /* linhas. --filete-forte carrega informacao (borda de campo, limite de area
     clicavel, filete de cabecalho de tabela) e por isso obedece a WCAG 1.4.11:
     minimo 3:1 contra a superficie adjacente. #A9B8BD reprova neste papel: rende
     2,04:1 sobre --superficie. Medido, nao estimado.
     #78888F: 3,67:1 sobre --superficie e 3,42:1 sobre --superficie-2.
     --filete continua decorativo (1,34:1): so separa linha de tabela, nao delimita
     area operavel nem transmite estado. */
  --filete: #D8E0E3;
  --filete-forte: #78888F;
  /* --filete-inverso e o par de --filete do outro lado: separador DECORATIVO sobre
     --marca-fundo, nao delimitador de area operavel — por isso nao lhe cabe o piso de
     3:1 da WCAG 1.4.11. Espelha o papel de --filete tambem na intensidade: 1,46:1 sobre
     #03121E, contra 1,34:1 de --filete sobre --superficie. Medido, nao estimado.
     --filete (14,15:1 aqui) e --filete-forte (5,15:1) riscariam a faixa da marca. */
  --filete-inverso: #1A3444;

  /* REGISTRO VISUAL — neobrutalismo refinado com acabamento minimalista.
     Tres parametros, e so tres. Toda superficie do HUB (cartao, painel, botao, chip,
     campo, moldura de tabela) sai destes tokens; nenhuma regra de componente redeclara
     largura, deslocamento ou raio por conta propria. Trocar o registro = editar aqui.

       1. FIO      2px, tom medio. Nunca preto puro, nunca decorativo. E --filete-forte
                   (#78888F), que obedece a WCAG 1.4.11 por medicao — ver bloco 'linhas'.
       2. SOMBRA   3px deslocada, DESFOQUE ZERO. O desfoque e o que separa sombra
                   convencional de neobrutalismo; '0 3px 6px rgba(...)' esta vedado.
       3. RAIO     6px. Pequeno, nao zero: o canto vivo do neobrutalismo pleno entra
                   suavizado — e o 'refinado' e o 'minimalista' do registro.

     ZERO GRADIENTE em qualquer superficie. Cor entra pelo fio e pelo detalhe (borda,
     icone, selo de estado), nunca em preenchimento de area grande. Regua de
     acessibilidade sensorial ja fixada para este projeto. */
  --borda-estrutural: 2px;                          /* 1. fio */
  --elevacao-dura: 3px 3px 0 var(--filete-forte);   /* 2. sombra, sem desfoque */
  --elevacao-dura-marca: 3px 3px 0 var(--marca);    /*    idem, na cor da marca */

  /* tipografia auto-hospedada: nenhum recurso de rede externa */
  --fonte-titulo: "Inter", system-ui, sans-serif;
  --fonte-corpo: "Inter", system-ui, sans-serif;
  --fonte-dado: "IBM Plex Mono", ui-monospace, monospace;
  --passo--1: 0.833rem;
  --passo-0: 1rem;
  --passo-1: 1.2rem;
  --passo-2: 1.44rem;
  --passo-3: 1.728rem;

  /* espaco, forma, elevacao */
  --espaco-1: 0.25rem; --espaco-2: 0.5rem;  --espaco-3: 0.75rem; --espaco-4: 1rem;
  --espaco-5: 1.5rem;  --espaco-6: 2rem;    --espaco-7: 3rem;    --espaco-8: 4rem;
  /* Raio unico, e nao dois. Um segundo raio menor (3px) daria a botao, campo, selo e
     alerta um canto mais fechado que o dos cartoes: sao duas formas para um registro
     so, e o desalinho se le como falta de cuidado.
     Nao ha, tampouco, token de elevacao DESFOCADA (0 1px 2px): ele seria armadilha para
     quem fosse elevar um componente novo, porque o registro nao admite desfoque. */
  --raio: 6px;

  /* Alvo de toque minimo (WCAG 2.5.5 AAA / 2.5.8 AA com folga). O HUB e operado o dia
     inteiro pelos servidores da Central: alvo curto e erro de clique repetido, nao
     detalhe estetico. Vale para botao, campo, seletor e link de navegacao. */
  --alvo-toque: 44px;

  /* layout. O HUB e usado em desktop de mesa da Central, nao em telefone —
     por isso a medida generosa e um unico ponto de quebra util. */
  --medida: 72ch;
  /* PROPORCAO da arte da marca, e a altura que DECORRE dela. Vivem aqui porque duas
     folhas dependem das duas: a faixa em si (20-componentes) e o eixo vertical da tela
     de entrada (30-modulos).

     ALTURA FIXA AQUI CORTA A MARCA. Um '--altura-faixa: 112px' ARBITRADO CONTRA a
     proporcao do arquivo, somado a 'background-size: cover', faz o navegador escalar a
     arte ate cobrir a caixa e jogar fora o excedente; como 112px e menor que a altura
     que a proporcao pede em qualquer largura util, o descarte cai sobre o logo e sobre
     as tres linhas de texto. Nao ha altura fixa que evite isso: 'cover' decide o
     recorte por conta propria, e o recorte muda a cada largura de janela.

     Por isso a largura e cheia e a ALTURA E CONSEQUENCIA. 2000x190 e a dimensao real do
     arquivo (hub/estatico/img/marca-cpe.png), e nao um valor de desenho: mudar a arte
     sem mudar estes dois numeros volta a cortar.

     '--altura-faixa' e derivada e nao literal, para que a tela de entrada desconte a
     faixa do eixo vertical sem que ninguem tenha de manter dois numeros em concordancia.
     Ela usa 100vw porque a faixa e de largura total. */
  --proporcao-faixa: 2000 / 190;
  --altura-faixa: calc(100vw * 190 / 2000);
  --goteira: var(--espaco-5);
  --contêiner: 1360px;
}