/* tokens.css - variaveis do sistema (Sistema de Estilos Centralizado).
   Tema claro do painel DataEvo Central v702/v818 (App_Online_Auth manda portar).
   Cor de acento sobria por padrao; a empresa sobrescreve --cor-primaria via <style>
   no base.html. A identidade final e fechada pela frontend-design (passo 4). */
:root {
  /* Acento / identidade (fallback sobrio para sistema financeiro) */
  --cor-primaria: #1E6FD0;
  --cor-primaria-escura: #17579f;
  --cor-primaria-suave: #eaf2fc;
  /* Texto e icone SOBRE a cor da marca (botao primario, lado do login, avatar). */
  --texto-sobre-primaria: var(--branco);

  /* Superficies */
  --branco: #ffffff;
  --fundo: #f4f6f9;
  --fundo-2: #eef1f5;
  --borda: #e3e7ee;
  --borda-forte: #cfd6e0;

  /* Texto */
  --texto: #1a2230;
  --texto-secundario: #46505f;
  --texto-suave: #5b6472;
  --texto-fraco: #8a94a3;

  /* Semanticos (sobrios). Vermelho forte so em erro e saldo projetado negativo. */
  --ok: #1f9d57;         --ok-suave: #e7f6ed;
  --erro: #c0392b;       --erro-suave: #fbeae7;
  --alerta: #b7791f;     --alerta-suave: #fdf3e2;
  --info: #1E6FD0;       --info-suave: #eaf2fc;
  /* Aliases usados pelas notas de UI da vault */
  --vermelho: #c0392b;   --vermelho-suave: #fbeae7;
  --ambar: #b7791f;      --ambar-suave: #fdf3e2;
  --azul-info: #1E6FD0;  --azul-suave: #eaf2fc;

  /* Entradas x saidas: pesos distintos, sem semaforo gritante (frontend-design 11.4) */
  --entrada: #1f7a4d;
  --saida: #8a4b3b;
  --saida-suave: #f3ece9;       /* fundo do selo de saida */

  /* Fundo da linha destacada sob o mouse: um degrau acima do -suave. */
  --alerta-suave-hover: #fbeed3;
  --erro-suave-hover: #f8ded9;

  /* Raio / sombra / transicao */
  --raio: 10px;
  --raio-sm: 6px;
  --raio-lg: 16px;
  --raio-full: 999px;
  --sombra: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --sombra-md: 0 4px 12px rgba(16,24,40,.10);
  --sombra-lg: 0 18px 40px rgba(16,24,40,.18);
  --sombra-bola: 0 1px 3px rgba(0,0,0,.25);            /* bolinha do interruptor */
  --sombra-barra-acao: 0 -4px 24px rgba(16,24,40,.2);  /* faixa de acao em lote */
  --sombra-foto: 0 24px 70px rgba(0,0,0,.55);          /* foto aberta no lightbox */

  /* Veus: o escuro por tras do que abre por cima da tela. */
  --veu-menu: rgba(15,23,42,.4);         /* menu do celular */
  --veu-carregando: rgba(15,23,42,.45);  /* "carregando" */
  --veu-modal: rgba(15,23,42,.5);        /* .modal-bg */
  --veu-dialogo: rgba(15,23,42,.55);     /* <dialog> do showModal() */
  --veu-foto: rgba(12,15,20,.86);        /* lightbox das fotos */
  --transicao: .15s ease;

  /* Escala de espacamento (Padrao_Espacamento_e_Respiro): o container declara o
     gap, componente nao carrega margin-bottom para se afastar do vizinho. Entrou
     no T10/F1 com o CSS novo (.po-*); o legado em px segue como esta. */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

  /* Tipografia (fontes do sistema; sem CDN). Numeros tabulares nas colunas de valor. */
  --fonte: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --fonte-titulo: "Sora", "Segoe UI", system-ui, sans-serif;
  /* Letra de largura fixa: a chave do aplicativo e os codigos de recuperacao do
     segundo fator (decisao 159), em que cada caractere conta e as colunas alinham. */
  --fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Elevacao: camada NOMEADA, nunca numero no olho (Padrao_Elevacao_Zindex).
     A escala e UMA, de baixo para cima, com os valores que o projeto ja usava antes
     de eles ganharem nome (auditoria 09/2026, CODE-FRONT-10, decisao 154): a escala
     100..700 da vault poria o menu lateral ABAIXO da barra do topo, e aqui ele fica
     por cima. Camada nova entra AQUI, no lugar dela na ordem: tests/test_css_higiene.py
     confere a ordem e reprova z-index de dois digitos fora deste arquivo. De 1 a 4 e
     degrau LOCAL e fica numero: so ordena pecas vizinhas (o cabecalho fixo da
     listagem sobre as linhas, a coluna presa e os Totais do Orcamento, o texto sobre
     o desenho do lado do login). O <dialog> aberto por showModal() mora na camada de
     cima do navegador (top layer), acima de qualquer z-index: nada daqui o cobre,
     nem o "carregando" (por isso o veu dele entra no dialog, quirk 28). */
  --z-topo: 30;           /* .topbar, a barra de cima no celular */
  /* A faixa de suporte do painel do DONO (F40) fica UM acima do topo: ela avisa que
     a sessao esta dentro da sala de um cliente e nao pode ser encoberta por ele. */
  --z-faixa-suporte: 31;
  --z-veu-menu: 39;       /* o escuro atras do menu aberto no celular */
  --z-menu-lateral: 40;   /* .sidebar, por cima do proprio veu */
  --z-lista: 50;          /* o painel aberto do SelectBusca */
  --z-menu-tabela: 60;    /* o menu e os popups das ferramentas da tabela */
  --z-barra-acao: 90;     /* a faixa de acao em lote */
  /* O balao que a tela abre PARA LER (o "+N" dos modulos, a ajuda da tela): acima da
     barra de acao em lote, porque nasce de um clique ou hover do momento, e ABAIXO da
     janela: balao nenhum pode cobrir a janela que a pessoa abriu depois dele. */
  --z-balao: 95;
  --z-janela: 200;        /* .modal-bg */
  --z-aviso: 300;         /* os avisos (flash), por cima da janela */
  --z-foto: 1000;         /* a foto do produto aberta em tela cheia */
  --z-carregando: 9999;   /* o veu do "carregando", por cima de tudo o que nao e dialog */

  /* Cor fixa da PLATAFORMA. A porta de login do saas e compartilhada e nao veste
     empresa nenhuma, entao ela aponta para ca (.au-plataforma) em vez de herdar a
     --cor-primaria, que a empresa sobrescreve. Mesmo valor da marca padrao; o que
     muda e o dono do valor, que aqui nao e configuravel por cliente. */
  --cor-plataforma: #1E6FD0;
  --cor-plataforma-escura: #17579f;
  --cor-plataforma-suave: #eaf2fc;

  /* Cartao escuro da porta do DONO (/plataforma/login, .pl-tela). */
  --pl-fundo-topo: #17233c; --pl-fundo: #0a0f1a;
  --pl-card: #131c2e; --pl-borda: #25324a; --pl-input: #0f1725;
  --pl-texto: #e8edf6; --pl-muted: #93a1b8; --pl-texto-fraco: #5b6b85;
  --pl-destaque: #7db1f2;
  --pl-sombra: 0 24px 60px rgba(0,0,0,.5);

  /* O QR code da configuracao do segundo fator (decisao 159): escuro sobre claro nas
     duas portas, tambem no cartao escuro do dono. O leitor do aplicativo le pelo
     contraste, e o QR invertido (claro sobre escuro) nem todo leitor le. */
  --qr-fundo: #ffffff;
  --qr-tinta: #000000;

  /* Superficie escura da faixa de acao em lote: modo temporario, por isso
     NAO usa a cor da marca (Padrao_Selecao_em_Lote, na vault). */
  --barra-acao: #1e293b;

  --sidebar-width: 250px;
  --topbar-h: 58px;

  /* Pontos de quebra (RESP-04, decisao 154). O @media nao le var(), entao cada regra
     escreve o numero, e esta e a lista. Dois sao da ESTRUTURA e valem para o sistema
     inteiro: 720px (o celular: toque de 44px, a lista de escolha fixed, a paginacao
     empilhada, quirk 25) e 880px (o menu lateral vira gaveta, layout.css). Os outros
     (560, 620, 640, 820, 940, 1000, 1024 e 1300) sao do CONTEUDO de uma tela so. A
     regra de min-width comeca UM pixel depois do max-width do mesmo ponto (721px,
     881px e 1301px):
     com o mesmo numero, em 720px exatos as duas valem juntas (tests/test_celular.py). */
}