/*
 * Sistema de cores compartilhado por toda a Área de Membros.
 *
 * Cada página usa var(--algo) em vez de cor fixa, então trocar de tema
 * é só trocar o atributo data-tema no <html> — nada de duplicar CSS.
 *
 * --superficie / --campo / --superficie-forte existem porque o mesmo
 * "3% de branco" que separa um cartão do fundo escuro é invisível em
 * cima de um fundo claro — cada tema define esses três com a força
 * (e não só a cor) certa pro próprio contraste.
 */

:root {
  --texto-rgb: 247,244,238;

  /* Azul-marinho da identidade (#032048, tirado da capa/logo) no lugar
     do preto puro — com o brilho dourado mais forte nas bordas, pra
     lembrar a "luz" do gradiente do botão em vez de um fundo apagado. */
  --fundo-solido: #071A33;
  --fundo-degrade:
    radial-gradient(ellipse 75% 60% at 70% 6%, rgba(201,168,76,.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 55% at 10% 92%, rgba(201,168,76,.11) 0%, transparent 62%),
    linear-gradient(158deg, #0C2E52 0%, #032048 45%, #05132A 100%);

  --superficie: rgba(255,255,255,.06);
  --superficie-forte: rgba(255,255,255,.10);
  --campo: rgba(255,255,255,.07);

  --modal-fundo: #17141C;
  --modal-overlay-rgb: 8,7,10;

  --dourado-rgb: 201,168,76;
  --dourado: #C9A84C;
  --dourado-claro: #EFDCA6; /* claro o bastante pra ler sobre fundo escuro */
  --gradiente-dourado: linear-gradient(135deg, #8A6E28 0%, #E8CC7C 45%, #C9A84C 70%, #8A6E28 100%);
  --texto-sobre-dourado: #17130B;

  /* Cartão "de destaque" (produto, catálogo, painel financeiro, etc):
     sempre bege — igual à identidade impressa — nos dois temas. Antes
     invertia pra azul-marinho no modo claro; a Mayara achou o azul
     destoando da barra lateral (também bege) e pediu um bege só, mais
     forte que o fundo da página, em vez de inverter. */
  --cartao-destaque-fundo: linear-gradient(160deg, #F5EAD2 0%, #E0C185 100%);
  --cartao-destaque-borda: rgba(201,168,76,.4);
  --cartao-destaque-titulo: #7A5E22;
  --cartao-destaque-titulo-principal: #2A2014;
  --cartao-destaque-corpo: rgba(40,32,20,.6);
  --cartao-destaque-corpo-fraco: rgba(40,32,20,.5);
  --cartao-destaque-capa-fundo: rgba(58,46,28,.08);
  --cartao-destaque-badge-ativo-texto: #2F6B3E;
  --cartao-destaque-badge-ativo-fundo: rgba(58,133,78,.16);
  --cartao-destaque-badge-inativo-texto: rgba(40,32,20,.5);
  --cartao-destaque-badge-inativo-fundo: rgba(40,32,20,.08);
  --cartao-destaque-botao-texto: rgba(40,32,20,.65);
  --cartao-destaque-botao-borda: rgba(40,32,20,.2);
  --cartao-destaque-perigo: #B23B3B;
  --cartao-destaque-perigo-borda: rgba(178,59,59,.5);
  --cartao-destaque-perigo-fundo: rgba(200,60,60,.08);

  /* Cabeçalho (a tarja de cima, com a logo e "Área de Membros"): fica
     sempre azul-marinho da identidade, em qualquer tema — só os
     cartões de conteúdo (--cartao-destaque-*, acima) viram bege. A
     Mayara pediu pra manter só a tarja de cima azul mesmo. */
  --header-fundo: linear-gradient(160deg, #0C2E52 0%, #032048 100%);
  --header-borda: rgba(201,168,76,.45);
  --header-titulo: #EFDCA6;
  --header-titulo-principal: #F7F4EE;
  --header-corpo: rgba(247,244,238,.68);
  --header-botao-texto: rgba(247,244,238,.7);
  --header-botao-borda: rgba(247,244,238,.25);
}

:root[data-tema="claro"] {
  --texto-rgb: 40,32,20;

  --fundo-solido: #F2E8D6;
  --fundo-degrade:
    radial-gradient(ellipse 70% 55% at 68% 8%, rgba(201,168,76,.18) 0%, transparent 62%),
    radial-gradient(ellipse 55% 50% at 8% 88%, rgba(201,168,76,.12) 0%, transparent 60%),
    linear-gradient(158deg, #F6EEDD 0%, #EEE0C2 55%, #F2E7D2 100%);

  /* cartões e campos viram superfícies brancas de verdade, como papel
     em cima da mesa bege — é isso que separa um do outro, não um tom
     quase invisível de branco transparente */
  --superficie: rgba(255,255,255,.72);
  --superficie-forte: rgba(58,46,28,.08);
  --campo: rgba(255,255,255,.85);

  --modal-fundo: #FFFDF7;
  --modal-overlay-rgb: 54,44,28;

  /* --dourado-claro no modo claro precisa ser um dourado ESCURO pra ler
     sobre os cards claros — o mesmo tom claro do modo escuro ficaria
     invisível aqui (era exatamente o problema reportado). */
  --dourado-claro: #7A5E22;

}

/* Avisos rápidos (toast) — confirmação de sucesso ou erro no canto da
   tela, sem travar a página como um alert() travaria. Compartilhado
   por toda a Área de Membros (toast.js cria o container sozinho). */
.toast-container {
  position: fixed; right: 20px; bottom: 20px; z-index: 999;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--cartao-destaque-fundo);
  border: 1px solid var(--cartao-destaque-borda);
  color: var(--cartao-destaque-titulo-principal);
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500;
  padding: 13px 18px; border-radius: 12px; max-width: 320px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s;
}
.toast-visivel { opacity: 1; transform: translateY(0); }
.toast-icone {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.toast-sucesso .toast-icone { background: rgba(58,133,78,.16); color: #2F6B3E; }
.toast-erro .toast-icone { background: rgba(178,59,59,.14); color: #B23B3B; }
.toast-info .toast-icone { background: rgba(201,168,76,.16); color: #7A5E22; }
@media (max-width: 480px) {
  .toast-container { left: 16px; right: 16px; }
  .toast { max-width: none; }
}