/* ════════════════════════════════════════════════════════════════
   NKFINANCE — Variáveis CSS (preto + dourado premium)
   v2.2.0 — Marfim Premium (tema claro refatorado)

   Paleta da identidade nkFinance:
   - Tema escuro: fundo preto profundo + dourado vibrante metálico
   - Tema claro:  marfim premium — bege escuro (#EDE5D0) + cards
                  brancos puros + texto marrom-chocolate (#3D2E0F).
                  Estética hotel/joalheria.
   ════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── TEMA PADRÃO (DARK PREMIUM) ────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:        #0A0A0A;
  --bg2:       #050505;
  --card:      #141414;
  --card2:     #1C1C1C;
  --card3:     #232323;
  --overlay:   rgba(0,0,0,.78);

  /* Bordas */
  --border:    rgba(212,175,55,.12);
  --border2:   rgba(212,175,55,.22);
  --border3:   rgba(212,175,55,.40);
  --border-n:  #2A2A2A;

  /* Texto neutro */
  --n1: #FFFFFF;
  --n2: #E8E8E8;
  --n3: #A8A8A8;
  --n4: #6E6E6E;
  --n5: #3A3A3A;

  /* Paleta nkFinance Gold */
  --gold-50:   #FAF1D0;
  --gold-100:  #F5D67A;
  --gold-200:  #E8C46B;
  --gold-300:  #D4AF37;
  --gold-400:  #B89028;
  --gold-500:  #8B6914;
  --gold-600:  #5C4509;
  --gold-glow: rgba(212,175,55,.35);

  /* Aliases primários */
  --primary:        var(--gold-300);
  --primary-light:  var(--gold-100);
  --primary-dark:   var(--gold-500);
  --on-primary:     #0A0A0A;

  /* Gradientes assinatura
     --gradient-gold       → usar em BACKGROUNDS (botões, pills, badges, avatar)
     --gradient-gold-text  → usar em TEXTO (-webkit-background-clip: text) */
  --gradient-gold:      linear-gradient(135deg, #F5D67A 0%, #D4AF37 45%, #8B6914 100%);
  --gradient-gold-text: linear-gradient(135deg, #F5D67A 0%, #D4AF37 50%, #8B6914 100%);
  --gradient-gold-soft: linear-gradient(135deg, rgba(245,214,122,.15) 0%, rgba(212,175,55,.08) 100%);
  --gradient-card:      linear-gradient(180deg, #181818 0%, #101010 100%);
  --gradient-line:      linear-gradient(90deg, transparent 0%, rgba(212,175,55,.4) 50%, transparent 100%);

  /* Cores semânticas */
  --grn: #10B981;  --grn0: rgba(16,185,129,.08);  --grn1: rgba(16,185,129,.20);  --grn2: #047857;
  --red: #EF4444;  --red0: rgba(239,68,68,.08);   --red1: rgba(239,68,68,.20);
  --amb: var(--gold-300);  --amb0: rgba(212,175,55,.08);  --amb1: rgba(212,175,55,.18);
  --blu: #60A5FA;  --blu0: rgba(96,165,250,.08);  --blu1: rgba(96,165,250,.20);
  --pur: #C084FC;  --pur0: rgba(192,132,252,.08);

  /* Tipografia */
  --FT: 'Playfair Display', Georgia, serif;
  --FB: 'Inter', system-ui, sans-serif;
  --FM: 'JetBrains Mono', 'Courier New', monospace;
  --FN: 'Cormorant Garamond', Georgia, serif;

  /* Raios */
  --r:   12px;
  --rs:  8px;
  --rl:  20px;
  --rxl: 28px;

  /* Sombras */
  --sh:   0 4px 16px rgba(0,0,0,.45);
  --shm:  0 12px 40px rgba(0,0,0,.6);
  --shl:  0 20px 60px rgba(0,0,0,.75);
  --sh-gold: 0 0 24px rgba(212,175,55,.18);
  --sh-gold-strong: 0 0 32px rgba(212,175,55,.35);

  /* Transições */
  --t-fast: 120ms cubic-bezier(.2,.8,.2,1);
  --t:      220ms cubic-bezier(.2,.8,.2,1);
  --t-slow: 380ms cubic-bezier(.2,.8,.2,1);
}

body {
  font-family: var(--FB);
  background: var(--bg);
  color: var(--n1);
  min-height: 100vh;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image:
    radial-gradient(ellipse at top right, rgba(212,175,55,.06) 0%, transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(212,175,55,.04) 0%, transparent 50%);
  background-attachment: fixed;
}

/* body.dark herda :root (compatibilidade com código existente) */
body.dark { }

/* ════════════════════════════════════════════════════════════════
   LIGHT THEME — MARFIM PREMIUM (v2.2.0)
   ────────────────────────────────────────────────────────────────
   Estética: hotel/joalheria. Fundo bege escuro com cards brancos
   puros (efeito "vitrine"), texto marrom-chocolate (não cinza),
   dourados profundos como accent.

   TRUQUE-CHAVE: --gold-50/100/200/300 são REDEFINIDOS como dourados
   ESCUROS no light. Isso conserta automaticamente todos os
   componentes legados que usam --gold-100 como cor de texto
   (warn-box, wa-nav-btn, sidebar-footer, login labels) sem precisar
   adicionar override individual pra cada um.
   ════════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  /* Backgrounds — INVERTIDO v2.3.1: branco no fundo, marfim nos cards
     Antes (v2.3.0): bg marfim escuro + cards brancos (estilo joalheria)
     Agora (v2.3.1): bg branco + cards marfim (estilo clean/premium light) */
  --bg:        #FFFFFF;              /* Branco puro — fundo principal */
  --bg2:       #FAFAF7;              /* Off-white (quase branco) — sidebar; diferencia por borda */
  --card:      #FAF6EA;              /* Marfim suave — cards/modais (DESTAQUE pela cor) */
  --card2:     #F0E8D2;              /* Marfim médio — subcards, table headers */
  --card3:     #E8DFC5;              /* Marfim mais escuro — hover sutil */
  --overlay:   rgba(45,30,10,.55);   /* Overlay marrom translúcido (mantido) */

  /* Bordas — tons quentes de marrom dourado */
  --border:    rgba(139,105,20,.18);
  --border2:   rgba(139,105,20,.32);
  --border3:   rgba(139,105,20,.55);
  --border-n:  #EAE1C7;              /* Bege neutro mais sutil (era #DCCFAE) */

  /* Texto — MARROM escalonado (não cinza) */
  --n1: #3D2E0F;   /* Marrom chocolate — títulos, valores principais */
  --n2: #5C4509;   /* Marrom profundo — texto corpo */
  --n3: #7A5C12;   /* Marrom dourado escuro — secundário (AA em qualquer fundo) */
  --n4: #A89878;   /* Bege amarronzado — hints, placeholders */
  --n5: #D4C9A8;   /* Bege claro — divisores sutis */

  /* Paleta dourada REDEFINIDA pro claro
     gold-50 a gold-300 viram tons ESCUROS (era claro no dark).
     gold-400/500/600 mantêm tons que funcionam em ambos. */
  --gold-50:   #5C4509;              /* dark era #FAF1D0 (creme) */
  --gold-100:  #6E5410;              /* dark era #F5D67A (amarelo claro) */
  --gold-200:  #8B6914;              /* dark era #E8C46B */
  --gold-300:  #B89028;              /* dark era #D4AF37 */
  --gold-400:  #D4AF37;
  --gold-500:  #8B6914;
  --gold-600:  #5C4509;
  --gold-glow: rgba(139,105,20,.20);

  /* Primary — dourado profundo pra accents */
  --primary:       #8B6914;
  --primary-light: #B89028;
  --primary-dark:  #5C4509;
  --on-primary:    #FFFFFF;

  /* Gradientes — VIBRANTE pra backgrounds, ESCURO pra texto */
  --gradient-gold:      linear-gradient(135deg, #E8C46B 0%, #D4AF37 25%, #B89028 55%, #8B6914 100%);
  --gradient-gold-text: linear-gradient(135deg, #B89028 0%, #8B6914 50%, #5C4509 100%);
  --gradient-gold-soft: linear-gradient(135deg, rgba(212,175,55,.14) 0%, rgba(139,105,20,.05) 100%);
  --gradient-card:      linear-gradient(180deg, #FAF6EA 0%, #F0E8D2 100%);  /* invertido: era branco→marfim */
  --gradient-line:      linear-gradient(90deg, transparent 0%, rgba(139,105,20,.40) 50%, transparent 100%);

  /* Cores semânticas — versões saturadas pra contraste no claro */
  --grn:  #047857;  --grn0: rgba(4,120,87,.08);   --grn1: rgba(4,120,87,.22);  --grn2: #065F46;
  --red:  #B91C1C;  --red0: rgba(185,28,28,.08);  --red1: rgba(185,28,28,.22);
  --amb:  #8B6914;  --amb0: rgba(139,105,20,.08); --amb1: rgba(139,105,20,.22);
  --blu:  #1D4ED8;  --blu0: rgba(29,78,216,.08);  --blu1: rgba(29,78,216,.22);
  --pur:  #7C3AED;  --pur0: rgba(124,58,237,.08);

  /* Sombras — MAIS SUTIS na v2.3.1
     Cards agora se destacam pela COR (marfim) sobre o fundo branco,
     não mais pela sombra. Reduz "peso visual" da UI. */
  --sh:    0 1px 2px rgba(139,105,20,.05), 0 2px 6px rgba(60,46,15,.04);
  --shm:   0 4px 16px rgba(60,46,15,.08), 0 1px 4px rgba(60,46,15,.04);
  --shl:   0 16px 40px rgba(60,46,15,.12), 0 6px 16px rgba(60,46,15,.06);
  --sh-gold:        0 4px 16px rgba(139,105,20,.18), 0 1px 4px rgba(60,46,15,.06);
  --sh-gold-strong: 0 8px 28px rgba(139,105,20,.30), 0 2px 8px rgba(60,46,15,.08);
}

html[data-theme="light"] body {
  background: var(--bg);
  color: var(--n1);
  background-image:
    radial-gradient(ellipse at top right, rgba(212,175,55,.04) 0%, transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(139,105,20,.03) 0%, transparent 55%);
}

/* Seleção de texto */
::selection { background: var(--gold-300); color: #0A0A0A; }
html[data-theme="light"] ::selection { background: #B89028; color: #FFFFFF; }

/* Scrollbar dourada */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-500), var(--gold-600));
  border-radius: 8px;
  border: 2px solid var(--bg2);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); }
html[data-theme="light"] ::-webkit-scrollbar-track { background: #F0E8D2; }
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #B89028, #8B6914);
  border-color: #F0E8D2;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #D4AF37, #8B6914);
}

/* ── Cores semânticas de UI (v2.6.0) ─────────────────────────── */
/* Substituem hardcoded #EA580C, #16A34A, #1A73E8 nos JS */
:root {
  --maps-color:  #1A73E8;  /* Azul Google Maps */
  --wa-color:    #16A34A;  /* Verde WhatsApp */
  --orange:      #EA580C;  /* Laranja para tipo "juros" */
  --orange0:     rgba(234,88,12,.08);
  --orange1:     rgba(234,88,12,.15);
}