/* =====================================================================
   Tokens de design — Mundo dos Aviamentos

   As cores vieram do logo, amostradas do arquivo original: o azul-marinho
   do lettering e do alfinete, o azul-petróleo do carretel, o laranja da
   linha e do miolo do carretel, sobre o off-white do fundo.

   O laranja é a única cor quente do sistema e por isso é reservado: ele
   marca ação e alerta, nunca decora. Quando tudo é destaque, nada é.

   Escala de espaçamento em múltiplos de 4px. Tipografia em uma família só
   (Inter), variando peso e tamanho — o painel interno não precisa de
   contraste tipográfico, precisa de leitura rápida em linha densa.
   ===================================================================== */

/* =====================================================================
   Inter — UM arquivo, todos os pesos

   === Por que a fonte VARIÁVEL, e não os arquivos por peso ===
   `InterVariable.woff2` tem 352 KB e cobre os pesos de 100 a 900 num
   arquivo só. Os estáticos que o sistema usa — 400, 500, 600 e 700 —
   somariam quase o mesmo peso em QUATRO requisições, e cada peso novo que
   alguém usasse amanhã seria uma quinta.

   === Por que a itálica não é carregada ===
   O projeto não tem itálico: o único `<em>` que existe, no banner da loja,
   tem `font-style: normal` porque ali ele serve para pintar a palavra, não
   para inclinar. Carregar `InterVariable-Italic.woff2` seriam 388 KB para
   nada. Se um dia houver itálico de verdade, o navegador inclina a reta
   sozinho — e aí vale acrescentar o arquivo.

   === `font-display: swap` ===
   O texto aparece na hora, com a fonte do sistema, e troca quando a Inter
   chega. Sem isso, o painel abre em branco durante o download — e quem
   opera abre esta tela trinta vezes por dia.

   === O resto da pasta ===
   Os outros 37 arquivos (~9,5 MB) não são usados por ninguém. Eles pesam em
   todo deploy e em todo backup do site.
   ===================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    /* Faixa, e não um peso: é isto que faz um arquivo servir a todos. */
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/InterVariable.woff2') format('woff2');
}

:root {
    /* --- Marca ------------------------------------------------------- */
    --cor-tinta:        #0b3a63;  /* azul-marinho: texto e estrutura      */
    --cor-tinta-clara:  #1d5488;
    --cor-petroleo:     #1f8fb0;  /* azul do carretel: apoio e links      */
    --cor-petroleo-fraca: #e3f1f6;
    --cor-laranja:      #ee6a0c;  /* ação e alerta. Usar com parcimônia.  */
    --cor-laranja-fraca:#fdefe3;
    --cor-papel:        #f2f0ec;  /* fundo do logo, fundo do sistema      */

    /* --- Neutros ----------------------------------------------------- */
    --cor-branco:       #ffffff;
    --cor-cinza-05:     #f7f7f5;
    --cor-cinza-10:     #ebeae6;
    --cor-cinza-20:     #d9d7d1;
    --cor-cinza-40:     #a8a59d;
    --cor-cinza-60:     #6d6a63;
    --cor-cinza-80:     #3d3b37;

    /* --- Semânticas -------------------------------------------------- */
    --cor-erro:         #b3261e;
    --cor-erro-fraca:   #fbeae9;
    --cor-ok:           #1c6b46;
    --cor-ok-fraca:     #e7f3ec;
    --cor-atencao:      #8a5a00;
    --cor-atencao-fraca:#fdf3e0;

    /* --- Texto ------------------------------------------------------- */
    --texto-forte:      var(--cor-tinta);
    --texto-normal:     var(--cor-cinza-80);
    --texto-apoio:      var(--cor-cinza-60);
    --texto-invertido:  var(--cor-branco);

    /* --- Tipografia --------------------------------------------------- */
    /* `font-optical-sizing: auto` está no `base.css`, junto do `body`: a
       Inter v4 tem eixo óptico, e em tamanho grande ela mesma escolhe o
       desenho de display — é o que impede o número herói de parecer inflado. */
    --fonte-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    --fonte-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
                  'Liberation Mono', monospace;

    --tam-xs:   0.75rem;   /* 12px — legenda, unidade                     */
    --tam-sm:   0.8125rem; /* 13px — tabela do painel                     */
    --tam-base: 0.9375rem; /* 15px — corpo                                */
    --tam-md:   1.0625rem;
    --tam-lg:   1.375rem;
    --tam-xl:   1.75rem;

    --peso-normal: 400;
    --peso-medio:  500;
    --peso-forte:  600;

    --altura-linha-densa:  1.35;
    --altura-linha-normal: 1.55;

    /* --- Espaçamento (múltiplos de 4px) ------------------------------ */
    --e-1: 0.25rem;
    --e-2: 0.5rem;
    --e-3: 0.75rem;
    --e-4: 1rem;
    --e-5: 1.5rem;
    --e-6: 2rem;
    --e-7: 3rem;

    /* --- Forma -------------------------------------------------------
       TRÊS raios, e não dez. A escala existe para o olho reconhecer a
       hierarquia sem ler: controle < painel < pílula. Um quarto valor
       intermediário não acrescenta informação — acrescenta ruído.

       Antes desta consolidação havia dez raios diferentes espalhados pelo
       painel, porque cada componente novo escolheu o seu. O resultado era
       uma tela em que nada parecia da mesma família. */
    --raio-controle: 6px;   /* campo, botão, item de menu             */
    --raio-painel:   12px;  /* cartão, seção, barra lateral           */
    --raio-pilula:   999px; /* etiqueta, filtro de período, chip       */

    /* --- Elevação ------------------------------------------------------
       DUAS sombras. A primeira é o assentamento de uma superfície sobre o
       papel; a segunda é a resposta ao cursor. Nada no painel flutua mais
       que isso: sombra forte em tela densa vira sujeira. */
    --sombra-1: 0 1px 2px rgb(11 58 99 / 0.05);
    --sombra-2: 0 4px 12px rgb(11 58 99 / 0.09);

    /* O anel de foco. Um só, em toda parte que se alcança pelo teclado. */
    --anel-foco: 0 0 0 3px rgb(31 143 176 / 0.20);

    /* --- Movimento -----------------------------------------------------
       UMA duração para resposta a cursor e foco, uma para o que muda de
       lugar. Mais que isso, a interface passa a ter ritmos diferentes na
       mesma tela — e o olho percebe, mesmo sem saber o que percebeu. */
    --transicao: 90ms ease;
    --transicao-lenta: 140ms ease;

    /* Duas bordas, com papéis distintos: a de SUPERFÍCIE delimita um cartão
       sobre o papel e precisa ser leve; a de DIVISÃO separa linhas dentro de
       um cartão e precisa ser visível. Usar a mesma para as duas coisas
       desenhava um quadro em volta de cada bloco. */
    --borda-superficie: 1px solid var(--cor-cinza-10);
    --borda-fina: 1px solid var(--cor-cinza-20);

    /* --- Medidas de estrutura --------------------------------------------
       A ALTURA DA BARRA DO TOPO é um token porque duas coisas grudam logo
       abaixo dela e não podem discordar: a navegação e a coluna lateral de
       tela. Enquanto cada uma chutava o próprio valor (3,25rem numa,
       3,5rem na outra), as duas paravam em alturas diferentes na mesma
       tela — e um desalinhamento de 4px em dois blocos vizinhos é
       exatamente o tipo de coisa que faz uma tela parecer inacabada sem
       que se saiba dizer por quê. */
    --altura-barra-topo: 3.5rem;
    --largura-navegacao: 208px;
    --largura-lado: 260px;
    --largura-conteudo: 1360px;
    --largura-cartao: 24rem;
}