/* ═══════════════════════════════════════════════════════
   Spendlyst — Dark Mode
   Overrides CSS variables when [data-theme="dark"].
   ═══════════════════════════════════════════════════════ */

[data-theme="dark"] {
  --bg-base:       #0F0D0B;
  --bg-surface:    #1A1714;
  --bg-elevated:   #242019;
  --bg-sunken:     #0A0908;

  --text-primary:  #F0EBE3;
  --text-secondary:#A39E94;
  --text-muted:    #6B655B;
  --text-inverse:  #0F0D0B;

  --accent-primary:   #F0932B;
  --accent-hover:     #E58E26;
  --accent-subtle:    rgba(240,147,43,0.10);

  --border-default: #2A2520;
  --border-muted:   #1E1B17;
  --border-strong:  #3A3530;

  --shadow-xs:  0 1px 2px rgba(0,0,0,0.2);
  --shadow-sm:  0 2px 6px rgba(0,0,0,0.25);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.3);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.35);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.4);
  --shadow-glow:0 0 24px rgba(240,147,43,0.25);

  color-scheme: dark;
}

/* Adjust scrollbar for dark */
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--bg-sunken);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border-strong);
}

/* Auth background overlay for dark */
[data-theme="dark"] .auth-layout {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(240,147,43,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(45,156,219,0.04) 0%, transparent 50%),
    var(--bg-base);
}