/* =========================================================
   ZapTrace — camada de tokens
   Fonte única das cores, raios e tipografia. Carregue este
   arquivo antes de app.css ou admin.css; nenhum dos dois
   redefine :root, para não existirem duas verdades.
   ========================================================= */

:root {
  /* Paleta da marca */
  --grafite-950: #0b141a;  /* fundo */
  --grafite-900: #111b21;  /* superfícies */
  --grafite-800: #182229;
  --grafite-700: #202c33;
  --grafite-600: #2a3942;
  --verde: #25d366;
  --verde-hover: #3ee07b;
  --verde-escuro: #128c4b;
  --verde-fundo: rgba(37, 211, 102, 0.12);
  --verde-rgb: 37, 211, 102;
  --gelo: #e9edef;

  --fundo: var(--grafite-950);
  --superficie: var(--grafite-900);
  --superficie-2: var(--grafite-800);
  --linha: var(--grafite-700);
  --texto: var(--gelo);
  --texto-2: #8696a0;
  --texto-3: #7a8a93;
  --primario: var(--verde);
  --primario-hover: var(--verde-hover);
  --primario-texto: var(--grafite-950);

  --perigo: #ef4b5e;
  --perigo-fundo: rgba(239, 75, 94, 0.12);
  --perigo-rgb: 239, 75, 94;

  /* Créditos: um só tom de ouro para saldo, custo e compra. */
  --ouro: #f0b429;
  --ouro-rgb: 240, 180, 41;
  --ouro-claro: #ffd166;
  --custo: var(--ouro);
  --custo-rgb: var(--ouro-rgb);

  /* Acento de cada serviço. Saturação equivalente entre eles, para
     conviverem lado a lado sem um gritar mais alto que o outro. */
  --srv-instagram: #e1477f;
  --srv-instagram-rgb: 225, 71, 127;
  --srv-whatsapp: var(--verde);
  --srv-local: #ff6b4a;
  --srv-local-rgb: 255, 107, 74;
  --srv-msg: #ffb020;
  --srv-msg-rgb: 255, 176, 32;
  --srv-chamada: #2dd4bf;
  --srv-chamada-rgb: 45, 212, 191;
  --loc-cor: var(--srv-local);
  --loc-cor-rgb: var(--srv-local-rgb);

  /* Estados (painel admin) */
  --aviso: var(--ouro);
  --aviso-fundo: rgba(var(--ouro-rgb), 0.12);
  --info: var(--srv-chamada);
  --info-fundo: rgba(var(--srv-chamada-rgb), 0.12);

  --foco: 0 0 0 3px rgba(37, 211, 102, 0.65);
  --raio: 14px;
  --raio-g: 22px;
  --sombra: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 30px -16px rgba(0, 0, 0, 0.8);
  /* brilho verde suave vindo de baixo, como na marca */
  --brilho: radial-gradient(120% 60% at 50% 100%, rgba(37, 211, 102, 0.1), transparent 60%);

  --f-marca: 'Manrope', system-ui, sans-serif;
  --f-texto: 'Inter', system-ui, sans-serif;

  --lateral-w: 240px;

  color-scheme: dark;
}