/* ════════════════════════════════════════════════════════════════
   NKFINANCE — Variáveis CSS (preto + dourado premium)
   Paleta inspirada na identidade nkFinance:
   - Fundo: preto profundo
   - Acento: dourado metálico (F5D67A → D4AF37 → 8B6914)
   - Texto: branco / dourado claro
   ════════════════════════════════════════════════════════════════ */

*, *::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: linear-gradient(135deg, #F5D67A 0%, #D4AF37 45%, #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 — versão clara opcional ───────────────────────── */
html[data-theme="light"] {
  --bg:        #FAFAF7;
  --bg2:       #F5F4ED;
  --card:      #FFFFFF;
  --card2:     #FAFAF7;
  --card3:     #F0EFE8;
  --overlay:   rgba(20,15,5,.45);

  --border:    rgba(139,105,20,.18);
  --border2:   rgba(139,105,20,.32);
  --border3:   rgba(139,105,20,.55);
  --border-n:  #E5E2D6;

  --n1: #1A1610;
  --n2: #3D3528;
  --n3: #6E6450;
  --n4: #A8A089;
  --n5: #D5D0BE;

  --primary:       #8B6914;
  --primary-light: #D4AF37;
  --primary-dark:  #5C4509;
  --on-primary:    #FFFFFF;

  --gradient-card: linear-gradient(180deg, #FFFFFF 0%, #FAFAF7 100%);
  --gradient-gold-soft: linear-gradient(135deg, rgba(212,175,55,.10) 0%, rgba(139,105,20,.04) 100%);

  --sh:  0 2px 12px rgba(20,15,5,.06);
  --shm: 0 12px 32px rgba(20,15,5,.12);
  --shl: 0 24px 60px rgba(20,15,5,.18);
  --sh-gold: 0 0 20px rgba(212,175,55,.20);
}

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

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

/* 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-thumb {
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
}