/* ============================================================
   ASYM MARKET — Theme premium dark
   Sobrescreve as vars do tema antigo (--ca-*) pra aplicar a
   identidade Asym sem reescrever cada página.

   Páginas têm CSS inline com :root próprio depois deste import,
   então usamos seletor MAIS ESPECÍFICO (html[data-theme])
   pra vencer cascata sem precisar de !important.
   ============================================================ */
html, html[data-theme], html[data-theme="dark"], html[data-theme="light"], body {
  /* ── Backgrounds ── */
  --ca-bg-base:      #09090B;
  --ca-bg-raised:    #111114;
  --ca-bg-elevated:  #16161A;
  --ca-bg-overlay:   #1C1C22;

  /* ── Bordas ── */
  --ca-border:       rgba(255,255,255,0.06);
  --ca-border-s:     rgba(255,255,255,0.04);
  --ca-border-h:     rgba(255,255,255,0.12);
  --ca-border-focus: #A855F7;

  /* ── Texto ── */
  --ca-text:    #F4F4F5;
  --ca-text-2:  #A1A1AA;
  --ca-text-3:  #71717A;
  --ca-text-4:  #52525B;

  /* ── Brand (roxo Asym substitui o verde Asym Market) ── */
  --ca-gold:        #7C3AED;
  --ca-gold-h:      #6D28D9;
  --ca-gold-light:  #A855F7;
  --ca-gold-muted:  rgba(124,58,237,0.12);

  /* ── Status (verde positivo / vermelho negativo) ── */
  --ca-green:       #00D084;
  --ca-green-h:     #00B370;
  --ca-green-muted: rgba(0,208,132,0.12);
  --ca-red:         #FF4D6D;
  --ca-red-muted:   rgba(255,77,109,0.12);
  --ca-amber:       #F59E0B;
  --ca-amber-muted: rgba(245,158,11,0.12);

  /* Alias usados em algumas páginas (NÃO sobrescreve --green/--red:
     cada página define seu próprio :root local. Asym-theme só toca em --ca-*) */
  --bg:     #09090B;
  --card:   #111114;
  --card2:  #16161A;
  --text:   #F4F4F5;
  --muted:  #A1A1AA;
  --dim:    #71717A;
}

/* ============================================================
   TIPOGRAFIA OFICIAL ASYM MARKET
   - Headlines: Cabinet Grotesk (Fontshare) — equivalente livre do Aeonik
   - UI / Body / Dashboard: Satoshi (Fontshare) — premium minimalista
   - Fallback: Inter (Google) — universal
   - Pra Aeonik original: precisa Fontshare Pro ($); trocar 'Cabinet Grotesk' por 'Aeonik'
   ============================================================ */
@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@500,700,800,900&f[]=satoshi@400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* Body / UI default: Satoshi (tudo legível, premium minimalista) */
html, body {
  font-family: 'Satoshi', 'Inter', system-ui, -apple-system, sans-serif !important;
  letter-spacing: -0.005em;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

/* Headlines: Cabinet Grotesk (Aeonik-equivalent) com tracking negativo institucional */
h1, h2 {
  font-family: 'Cabinet Grotesk', 'Aeonik', 'Inter', sans-serif;
  letter-spacing: -0.028em;
  font-weight: 700;
  line-height: 1.1;
}
h1 { font-weight: 800; }
h3, h4 {
  font-family: 'Satoshi', 'Inter', sans-serif;
  letter-spacing: -0.018em;
  font-weight: 700;
}

/* Botões — Satoshi Medium com tracking sutil */
button, .btn, .btn-cadastrar, .btn-entrar, .btn-primary, .ca-btn, .mnav-item {
  font-family: 'Satoshi', 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: 0.005em;
}

/* Dados financeiros — Satoshi Medium com tabular-nums (alinhamento de colunas) */
.nav-balance-val, .nav-stat-val, .menu-balance-val,
.kpi-val, .sum-val, .tx-amount, .pos-amount-val,
[class*="-val"], [class*="balance"], [class*="amount"] {
  font-family: 'Satoshi', 'Inter', sans-serif;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Sidebar — Satoshi Bold pra leitura cheia e institucional */
.sb-item, .cat-tab, .sidebar-section-title, .sb-brand-name {
  font-family: 'Satoshi', 'Inter', sans-serif;
  font-weight: 700;
}
.sidebar-section-title, .sb-nav-section {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ── Refinos premium (glow sutil roxo nos cards on hover) ── */
.mcard:hover, .expert-card:hover, .sum-card:hover {
  border-color: var(--ca-border-h) !important;
  box-shadow: 0 0 0 1px rgba(168,85,247,0.08), 0 12px 32px rgba(0,0,0,0.5);
}

/* ── Glow do logo brand ── */
.nav-logo-icon {
  filter: drop-shadow(0 2px 12px rgba(124,58,237,0.45)) !important;
}

/* ── Botão "Depositar" (era verde Asym Market, agora roxo Asym) ── */
.btn-cadastrar {
  background: linear-gradient(135deg, var(--ca-gold-light) 0%, var(--ca-gold) 100%) !important;
  border-color: var(--ca-gold) !important;
  box-shadow: 0 2px 12px rgba(124,58,237,0.35) !important;
}
.btn-nav-p {
  background: linear-gradient(135deg, var(--ca-gold-light) 0%, var(--ca-gold) 100%) !important;
  border-color: var(--ca-gold) !important;
  box-shadow: 0 2px 12px rgba(124,58,237,0.35) !important;
}

/* ── Avatar (gradient roxo Asym) ── */
.avatar {
  background: linear-gradient(135deg, var(--ca-gold-h) 0%, var(--ca-gold-light) 100%) !important;
  box-shadow: 0 2px 12px rgba(124,58,237,0.35) !important;
}

/* ── Selection roxa ── */
::selection { background: var(--ca-gold-muted); color: var(--ca-text); }

/* ── Scrollbar discreta (dark UI) ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }