/* ══════════════════════════════════════════════════════════════════════════
   MOTOR DE PAGAMENTOS · TOKENS DO PAINEL
   Criado em 28/08/2026 · a base do redesenho do painel operacional.
   ══════════════════════════════════════════════════════════════════════════

   POR QUE ESTE ARQUIVO EXISTE
   O visual do painel morava em tres lugares ao mesmo tempo: `shell.css`, um
   bloco de ~1050 linhas dentro do `op.html`, e 137 atributos `style=` inline.
   A mesma cor aparecia escrita de quatro jeitos, cada botao tinha um raio
   diferente e nenhum tinha os quatro estados. Aqui ficam os VALORES; as regras
   continuam onde estavam, so' que passando a ler daqui.

   ⚠ ESTE ARQUIVO SO' DECLARA VARIAVEL. Nao ha' um seletor de elemento aqui de
   proposito: assim ele pode ser carregado antes de tudo sem sobrescrever nada,
   e nenhuma regra existente muda de comportamento so' por ele entrar.

   ⚠ NAO E' o `siterh-tokens.css`, que esta' na mesma pasta e e' ORFAO (nenhum
   template importa). Aquele veio do SITERH e e' glassmorphism pesado - visual
   que o Rodrigo listou explicitamente como o que NAO quer aqui.

   A referencia estetica e' a barra lateral, redesenhada em 28/08: azul
   institucional, contorno translucido, sombra discreta, movimento curto.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Marca ──────────────────────────────────────────────────────────────
     O azul da barra lateral e' `linear-gradient(180deg,#0A3D8F,#08326e)`.
     O conteudo conversa com ele; nao repete o gradiente. */
  --pn-navy:          #0A3D8F;   /* azul institucional, o mesmo da barra      */
  --pn-navy-esc:      #08326e;   /* fim do gradiente da barra                 */
  --pn-navy-tinta:    #12234d;   /* texto escuro sobre fundo claro            */
  --pn-azul:          #1A6BFF;   /* acento de acao / foco                     */
  --pn-azul-esc:      #1250c8;   /* acento pressionado                        */

  /* ── Superficies ───────────────────────────────────────────────────────
     `--pn-fundo` e' o fundo da area de conteudo. A nuance azul e' de 2-3% de
     saturacao: da' profundidade sem virar "tela colorida". */
  --pn-fundo:         #eef2f8;
  --pn-fundo-alt:     #e7edf6;
  --pn-superficie:    #ffffff;   /* cartao, tabela, modal                     */
  --pn-superficie-2:  #f7f9fd;   /* cabecalho de tabela, faixa neutra         */
  --pn-superficie-3:  #eff3fa;   /* hover de linha, chip apagado              */

  /* ── Texto ──────────────────────────────────────────────────────────────
     Os tres primeiros passam AA (>=4,5:1) sobre --pn-superficie.
     `--pn-txt-fraco` e' 4,6:1 - o limite; nao usar em fonte menor que 12px. */
  --pn-txt:           #101a33;   /* 16,4:1 · titulo e numero                  */
  --pn-txt-2:         #33405c;   /* 9,5:1  · corpo                            */
  --pn-txt-3:         #5b6885;   /*  5,4:1 · rotulo, coluna secundaria        */
  --pn-txt-fraco:     #6b7794;   /*  4,6:1 · auxiliar, so' >=12px             */
  --pn-txt-claro:     #E9EEF9;   /* sobre azul escuro                         */

  /* ── Bordas ─────────────────────────────────────────────────────────────
     Tres pesos so'. Contorno mais forte que `--pn-borda-forte` costuma ser
     sinal de que falta espaco, nao de que falta borda. */
  --pn-borda:         #dfe6f2;   /* separacao padrao                          */
  --pn-borda-suave:   #eaeff8;   /* divisor interno, linha de tabela          */
  --pn-borda-forte:   #c6d3e8;   /* contorno de bloco em destaque             */

  /* ── Feedback ───────────────────────────────────────────────────────────
     Cada estado tem tinta (texto/icone), fundo e borda, para o par sempre
     fechar contraste. A tinta e' sempre >=4,5:1 sobre o proprio fundo. */
  --pn-ok:            #14713a;  --pn-ok-bg:   #e8f6ed;  --pn-ok-bd:   #b7e0c6;
  --pn-info:          #1250c8;  --pn-info-bg: #e9f0ff;  --pn-info-bd: #bed3f8;
  --pn-atencao:       #8a5308;  --pn-atencao-bg: #fff5e2; --pn-atencao-bd: #f0dcae;
  --pn-perigo:        #a3252a;  --pn-perigo-bg: #fdeced; --pn-perigo-bd: #f2c2c5;
  --pn-neutro:        #4a5878;  --pn-neutro-bg: #eef1f7; --pn-neutro-bd: #dbe2ee;

  /* ── Raio ───────────────────────────────────────────────────────────────
     Escala curta de proposito: quatro valores cobrem a tela inteira. */
  --pn-r-xs:  6px;    /* badge, chip                                          */
  --pn-r-sm:  9px;    /* botao, campo                                         */
  --pn-r-md:  12px;   /* cartao pequeno, faixa de acao                        */
  --pn-r-lg:  16px;   /* cartao grande, painel                                */

  /* ── Sombra ─────────────────────────────────────────────────────────────
     Discretas e azuladas (a sombra neutra cinza suja o fundo azul claro).
     `--pn-sh-fixo` e' so' para camada flutuante: menu, modal, toast. */
  --pn-sh-sm:    0 1px 2px rgba(16,32,72,.06), 0 1px 1px rgba(16,32,72,.04);
  --pn-sh-md:    0 2px 6px rgba(16,32,72,.07), 0 1px 2px rgba(16,32,72,.05);
  --pn-sh-lg:    0 8px 20px rgba(16,32,72,.10), 0 2px 6px rgba(16,32,72,.06);
  --pn-sh-fixo:  0 18px 44px rgba(8,20,52,.22), 0 4px 12px rgba(8,20,52,.10);
  --pn-sh-foco:  0 0 0 3px rgba(26,107,255,.30);

  /* ── Espaco ─────────────────────────────────────────────────────────────
     Escala de 4px. Usar o token, nao o numero: e' o que mantem o respiro
     igual entre secoes que ninguem edita junto. */
  --pn-e-1:  4px;   --pn-e-2:  8px;   --pn-e-3: 12px;   --pn-e-4: 16px;
  --pn-e-5: 20px;   --pn-e-6: 24px;   --pn-e-8: 32px;   --pn-e-10: 40px;

  /* ── Tipografia ─────────────────────────────────────────────────────────
     Inter em tudo. `Barlow Condensed` continua carregada porque a marca usa,
     mas saiu dos titulos de tela: condensada em corpo de texto foi o que fez
     o painel parecer apertado. */
  --pn-fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pn-fonte-num: 'Inter', ui-monospace, 'Segoe UI', sans-serif;

  --pn-t-titulo:   22px;  /* titulo de secao      · 700 */
  --pn-t-sub:      16px;  /* subtitulo de bloco   · 600 */
  --pn-t-corpo:  13.5px;  /* corpo, celula        · 400/500 */
  --pn-t-rotulo:   12px;  /* rotulo, cabecalho    · 600 */
  --pn-t-aux:    11.5px;  /* auxiliar             · 400/500 */
  --pn-t-badge:  11.5px;  /* badge, status        · 600/700 */

  /* ── Movimento ──────────────────────────────────────────────────────────
     Curto. O painel e' de trabalho repetitivo: animacao longa vira estorvo
     na decima vez. */
  --pn-tr:       180ms cubic-bezier(.2,.8,.2,1);
  --pn-tr-lento: 260ms cubic-bezier(.2,.8,.2,1);

  /* ── Medidas de controle ────────────────────────────────────────────────
     Altura minima de alvo clicavel: 34px. Abaixo disso erra-se o clique em
     tela de 1080p, que e' o que a operacao usa. */
  --pn-alt-btn:    36px;
  --pn-alt-btn-sm: 30px;
  --pn-alvo-min:   34px;
}

/* Quem pede menos movimento recebe menos movimento — inclusive nos tokens,
   para que regra nenhuma precise repetir esta media query. */
@media (prefers-reduced-motion: reduce) {
  :root { --pn-tr: 0ms; --pn-tr-lento: 0ms; }
}