/* ============================================================
   SWAPEXY — tokens de design
   Fonte da verdade visual. Extraído das referências geradas
   (mockups preto profundo + violeta neon). Toda tela consome
   daqui — nenhuma cor/raio/sombra hardcoded nas telas.
   ============================================================ */
:root {
  /* cores de fundo */
  --fundo: #0a0612;        /* fundo de tudo */
  --fundo2: #0e0918;       /* faixas, barras */
  --carta: #14101f;        /* cards, campos, barra inferior */
  --carta2: #1a1128;       /* card sobre card, pressionado */
  --borda: #2a2140;        /* borda sutil 1px */

  /* acento — violeta é a ÚNICA cor além dos neutros */
  --violeta: #8b5cf6;
  --violeta2: #a78bfa;
  --violeta-cheio: #7c3aed;
  --violeta-fraco: rgba(139, 92, 246, 0.14);

  /* texto */
  --texto: #f2eeff;
  --texto2: #9a93ad;
  --texto3: #6b6480;

  /* estados */
  --perigo: #f43f5e;
  --perigo-fraco: rgba(244, 63, 94, 0.12);

  /* forma */
  --raio-carta: 20px;
  --raio-botao: 14px;
  --raio-campo: 14px;
  --raio-balao: 20px;

  /* efeito */
  --brilho: 0 0 24px rgba(139, 92, 246, 0.35);
  --brilho-forte: 0 0 34px rgba(139, 92, 246, 0.55);
  --brilho-perigo: 0 0 24px rgba(244, 63, 94, 0.3);

  /* tipografia (escala das referências) */
  --f-wordmark: 22px;
  --f-titulo: 20px;
  --f-nome: 17px;
  --f-corpo: 15px;
  --f-legenda: 13px;
  --f-hora: 12px;
  --f-saldo: 36px;

  /* estrutura */
  --gutter: 20px;
  --altura-barra: 78px;
  --safe-baixo: env(safe-area-inset-bottom, 0px);
  --safe-cima: env(safe-area-inset-top, 0px);
}