/* ─── Tokens ──────────────────────────────────────────────────────────────
   Fonte única de verdade. Ver docs/design-plan.md antes de mexer em cor.
   Nenhum hex bruto deve aparecer nos outros arquivos.
   ------------------------------------------------------------------------ */

:root {
  /* Cor - tinta e papel */
  --ink:          #14171C;
  --ink-soft:     #59636F;   /* 5.6:1 no branco */
  --ink-fraco:    #8A94A0;   /* só para placeholder e fios */
  --paper:        #FFFFFF;
  --security:     #131D31;   /* azul-noite do painel da marca */
  --security-alt: #1B2740;   /* mesma família, um degrau mais claro */
  --rule:         #2C3A55;   /* fio de 1px - exclusivo do painel */

  /* Cor - tinta sobre o painel escuro */
  --painel-tinta:      #EEF2F8;   /* 15.4:1 no painel */
  --painel-tinta-soft: #AEBACD;   /* 8.1:1 no painel */
  --linha:        #D9E0E8;   /* borda de campo */
  --campo-fundo:  #F5F7FA;

  /* Cor - marca e semântica */
  --makro:        #E4131B;   /* logo #FA0409 escurecido; branco em cima = 4.8:1 */
  --makro-escuro: #B90D14;   /* hover do botão */
  --makro-deep:   #A8090F;   /* vermelho em texto sobre branco = 7.7:1 */
  --makro-claro:  #FF6E63;   /* vermelho sobre o painel escuro = 6.0:1 */
  --makro-veu:    #FDECEC;   /* fundo de erro */
  --seal:         #0B7A46;   /* verde "autorizado o uso" da SEFAZ = 5.5:1 */
  --seal-veu:     #E7F5ED;
  --zap:          #14161A;   /* atalho de ajuda: tinta, não verde de marca
                                alheia, para não brigar com o CTA vermelho */
  --zap-escuro:   #000000;

  /* Tipografia */
  --face-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --face-corpo:   "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --face-num:     "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  --t-12: 0.75rem;
  --t-13: 0.8125rem;
  --t-14: 0.875rem;
  --t-15: 0.9375rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-22: 1.375rem;
  --t-30: 1.875rem;
  --t-38: 2.375rem;

  /* Espaço - escala de 4px */
  --e-1:  0.25rem;
  --e-2:  0.5rem;
  --e-3:  0.75rem;
  --e-4:  1rem;
  --e-5:  1.25rem;
  --e-6:  1.5rem;
  --e-8:  2rem;
  --e-10: 2.5rem;
  --e-12: 3rem;
  --e-16: 4rem;

  /* Forma - o formulário é arredondado, o painel-documento não é */
  --raio:       10px;
  --raio-pequeno: 6px;

  /* Elevação */
  --sombra-campo: 0 1px 2px rgb(20 23 28 / 0.04);
  --sombra-lista: 0 12px 28px -8px rgb(20 23 28 / 0.22);
  --sombra-botao: 0 2px 6px -1px rgb(184 13 20 / 0.32);
  --sombra-zap:   0 6px 20px -4px rgb(20 23 28 / 0.38);

  /* Movimento */
  --rapido:  140ms;
  --normal:  220ms;
  --curva:   cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Camadas */
  --z-lista: 40;
  --z-zap:   60;
  --z-pular: 100;

  --alvo: 44px;   /* alvo mínimo de toque */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --rapido: 1ms;
    --normal: 1ms;
  }
}