/**
 * theme-fintech-pro.css — "Fintech Pro" (a direção aprovada no mockup do
 * Dashboard). Fundo grafite refinado, verde vibrante de assinatura, cards
 * com leve profundidade e gradiente sutil — o visual "produto comercial
 * de fintech", não um boilerplate genérico.
 */
:root[data-theme="fintech-pro"] {
  /* Tema escuro — ver o comentário equivalente em theme-default.css sobre
     por que isso é necessário pro menu do <select> abrir legível. */
  color-scheme: dark;

  /* ---------- Fundos ---------- */
  --cor-fundo-app: #0B0F0D;
  --cor-fundo-escuro: rgba(255, 255, 255, 0.04);
  --cor-fundo-escuro2: rgba(255, 255, 255, 0.035);
  /* Cor SÓLIDA (não transparente) pra qualquer modal/popover flutuante
     — as variáveis de fundo acima são transparentes de propósito (dão
     o efeito "vidro" nos cards normais), mas um modal precisa cobrir
     completamente o que está atrás dele, senão o conteúdo da página
     "vaza" através e fica ilegível. */
  --cor-modal-fundo: #141C18;
  --cor-fundo-input: rgba(255, 255, 255, 0.06);
  --cor-borda-sutil: rgba(255, 255, 255, 0.07);
  --cor-fundo-alt2: rgba(255, 255, 255, 0.05);
  --cor-card: rgba(255, 255, 255, 0.035);
  --cor-card-alt: rgba(255, 255, 255, 0.06);

  /* ---------- Textos ---------- */
  --cor-texto-principal: #EDF2EE;
  --cor-texto-secundario: #97A69E;
  --cor-texto-meta: #7A8981;
  --cor-texto-claro-alt: #C7D2CB;
  --cor-texto-apagado: #5C6862;
  --cor-cinza-neutro: #8B9A92;

  /* ---------- Bordas ---------- */
  --cor-borda: rgba(255, 255, 255, 0.07);
  --cor-borda-secundaria: rgba(255, 255, 255, 0.12);

  /* ---------- Cores de sentido ---------- */
  --cor-sucesso: #5EEA9E;
  --cor-sucesso-claro: #8FF2BB;
  --cor-erro: #F2999B;
  --cor-erro-forte: #E06E70;
  --cor-info: #7AA8F2;
  --cor-icone-neutro: #7A8981;

  /* ---------- Formas ---------- */
  --raio-card: 20px;
  --raio-botao: 14px;
  --raio-input: 12px;
  --espessura-borda: 1px;
  --sombra-card: 0 20px 40px rgba(0, 0, 0, 0.25);

  --fonte-titulo: 'Fraunces', serif;
  --fonte-corpo: 'Inter', sans-serif;

  --cor-destaque: #5EEA9E;
}

/* Texto apagado/ilegível dentro do menu do <select> — ver o comentário
   completo em theme-default.css. Aqui usa --cor-modal-fundo (sólido) em
   vez de --cor-fundo-escuro porque esse último é translúcido (efeito
   "vidro") — um fundo quase transparente não resolveria nada aqui, já
   que não tem o card escuro por trás pra "vazar" através dele; o menu do
   navegador não tem esse fundo. */
:root[data-theme="fintech-pro"] select option {
  background-color: var(--cor-modal-fundo);
  color: var(--cor-texto-principal);
}