/* tokens.css — identidade visual única do Financeiro Amem.
   Direção: claro, leve, minimalista. Hairlines no lugar de sombras; cor só onde há
   dinheiro (entrada/saída) e no acento da marca (teal), usado com parcimônia.
   Nenhum seletor de layout aqui — só variáveis. */
:root {
  --marca: #0F7A70;
  --marca-hover: #0B655C;
  --marca-fundo: #EAF4F2;

  --texto: #1E211F;
  --texto-suave: #71756F;
  --texto-fraco: #A2A6A0;

  --superficie: #FFFFFF;
  --superficie-2: #FBFBFA;
  --fundo: #FCFCFB;
  --borda: #ECEDEA;
  --linha-hover: #F7F7F5;

  --entrada: #2C8A54;
  --saida: #C4463F;
  --pendente: #B07A16;
  --entrada-fundo: #EDF5EF;
  --saida-fundo: #FAEEED;
  --pendente-fundo: #FBF4E6;

  --raio: 12px;
  --raio-sm: 9px;
  --raio-pill: 9999px;

  --fonte: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-6: 1.5rem;
  --esp-8: 2rem;
}