/* ═══════════════════════════════════════════════════
   L402 Mainnet — Theme System
   Dark (default) / Light mode via [data-theme]
   Bitcoin Orange accent in both modes
   ═══════════════════════════════════════════════════ */

/* ─── Dark Theme (Default) ───────────────────────── */
:root,
[data-theme="dark"] {
  /* Backgrounds */
  --bg-primary:    #08080D;
  --bg-secondary:  #0F0F17;
  --bg-surface:    #151521;
  --bg-elevated:   #1C1C2E;
  --bg-hover:      #242438;

  /* Text */
  --text-primary:  #F0F0F5;
  --text-secondary:#B8B8CC;
  --text-muted:    #6B6B82;

  /* Bitcoin Orange */
  --btc-orange:       #F7931A;
  --btc-orange-light: #FFB347;
  --btc-orange-dark:  #E07A00;
  --btc-orange-glow:  rgba(247, 147, 26, 0.15);
  --btc-orange-bg:    rgba(247, 147, 26, 0.08);

  /* Borders & Glass */
  --border:         rgba(255, 255, 255, 0.06);
  --border-hover:   rgba(255, 255, 255, 0.12);
  --glass-bg:       rgba(21, 21, 33, 0.72);
  --glass-border:   rgba(255, 255, 255, 0.05);
  --glass-shadow:   0 8px 32px rgba(0, 0, 0, 0.4);

  /* Status */
  --green:     #10B981;
  --green-bg:  rgba(16, 185, 129, 0.12);
  --red:       #EF4444;
  --red-bg:    rgba(239, 68, 68, 0.12);
  --yellow:    #F59E0B;
  --yellow-bg: rgba(245, 158, 11, 0.12);
  --blue:      #3B82F6;
  --blue-bg:   rgba(59, 130, 246, 0.12);

  /* Mesh Gradient (Background) */
  --mesh-1: rgba(247, 147, 26, 0.04);
  --mesh-2: rgba(139, 92, 246, 0.03);
  --mesh-3: rgba(59, 130, 246, 0.02);

  /* Misc */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.5);
  --navbar-bg:  rgba(8, 8, 13, 0.55);
  --navbar-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  --code-bg: rgba(255,255,255,0.05);

  color-scheme: dark;
}

/* ─── Light Theme ────────────────────────────────── */
[data-theme="light"] {
  --bg-primary:    #F5F5F7;
  --bg-secondary:  #EEEEEF;
  --bg-surface:    #FFFFFF;
  --bg-elevated:   #FFFFFF;
  --bg-hover:      #F0F0F2;

  --text-primary:  #111827;
  --text-secondary:#4B5563;
  --text-muted:    #9CA3AF;

  --btc-orange:       #E07A00;
  --btc-orange-light: #F7931A;
  --btc-orange-dark:  #C86A00;
  --btc-orange-glow:  rgba(247, 147, 26, 0.12);
  --btc-orange-bg:    rgba(247, 147, 26, 0.06);

  --border:        rgba(0, 0, 0, 0.08);
  --border-hover:  rgba(0, 0, 0, 0.15);
  --glass-bg:      rgba(255, 255, 255, 0.78);
  --glass-border:  rgba(0, 0, 0, 0.06);
  --glass-shadow:  0 8px 32px rgba(0, 0, 0, 0.08);

  --green-bg:  rgba(16, 185, 129, 0.08);
  --red-bg:    rgba(239, 68, 68, 0.08);
  --yellow-bg: rgba(245, 158, 11, 0.08);
  --blue-bg:   rgba(59, 130, 246, 0.08);

  --mesh-1: rgba(247, 147, 26, 0.03);
  --mesh-2: rgba(139, 92, 246, 0.02);
  --mesh-3: rgba(59, 130, 246, 0.015);

  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.1);
  --navbar-bg:  rgba(245, 245, 247, 0.55);
  --navbar-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  --code-bg: rgba(0,0,0,0.04);

  color-scheme: light;
}

/* ─── Theme Transition ───────────────────────────── */
body, .glass-card, .navbar, .btn, .badge, .kpi-card, .modal-overlay {
  transition: background 0.4s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}