/* Financeiro da Família — tokens do design system
   Estilo: página Growth House Floripa (preto profundo, verde-água/menta, dourado, Montserrat, pílulas).
   Uso: @import "financeiro-tokens.css" e consumir apenas as variáveis (--fin-*). */
:root {
  /* fundo e superfícies */
  --fin-fundo: #050807;
  --fin-superficie: #0b100e;
  --fin-superficie-2: #111815;
  --fin-borda: rgba(255, 255, 255, .08);
  --fin-borda-forte: rgba(255, 255, 255, .16);

  /* texto */
  --fin-texto: #ffffff;
  --fin-texto-suave: rgba(255, 255, 255, .62);
  --fin-texto-fraco: rgba(255, 255, 255, .42);

  /* marca */
  --fin-acento: #02b9a9;          /* verde-água: botões secundários, links, barras */
  --fin-acento-claro: #6edcd2;    /* hover, textos de apoio */
  --fin-menta: #2de3b9;           /* eyebrow, números em destaque */
  --fin-dourado: #c8a24e;         /* maior gasto, destaque premium */
  --fin-dourado-claro: #e0c068;
  --fin-cta: #22c55e;             /* ação principal (pílula com brilho) */

  /* semânticas */
  --fin-entrada: #2de3b9;
  --fin-saida: #ff6568;
  --fin-aviso: #fcbb00;
  --fin-perigo: #fb2c36;

  /* categorias (gráficos): contraste testado sobre --fin-superficie */
  --fin-cat-1: #2de3b9;
  --fin-cat-2: #c8a24e;
  --fin-cat-3: #6e9bff;
  --fin-cat-4: #c787f6;
  --fin-cat-5: #ff8a65;
  --fin-cat-6: #ffd23f;
  --fin-cat-7: #5ad1ff;
  --fin-cat-8: #94a3b8;

  /* tipografia */
  --fin-fonte: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fin-peso-normal: 400;
  --fin-peso-medio: 500;
  --fin-peso-forte: 600;
  --fin-peso-negrito: 700;
  --fin-peso-extra: 800;

  /* forma */
  --fin-raio-s: .5rem;
  --fin-raio: .75rem;
  --fin-raio-l: 1.1rem;
  --fin-raio-xl: 1.5rem;
  --fin-raio-pilula: 999px;

  /* espaço (base 4px) */
  --fin-e1: .25rem; --fin-e2: .5rem; --fin-e3: .75rem; --fin-e4: 1rem;
  --fin-e5: 1.5rem; --fin-e6: 2rem; --fin-e7: 3rem;

  /* efeitos */
  --fin-brilho-cta: 0 10px 30px -8px rgba(34, 197, 94, .55);
  --fin-brilho-acento: 0 10px 30px -10px rgba(2, 185, 169, .5);
  --fin-sombra: 0 18px 40px -22px rgba(0, 0, 0, .9);
  --fin-faixa: linear-gradient(90deg, #02b9a9 0%, #2de3b9 50%, #02b9a9 100%);
}