/* ═══════════════════════════════════════════════════════════════
   THEMES.CSS — Dark & Light Mode CSS Variables
   APP FATWA: DSN-MUI Legal Network Analysis
═══════════════════════════════════════════════════════════════ */

/* ── Dark Mode (Default) ───────────────────────────────────── */
[data-theme="dark"] {
  --bg-primary:       #0a0e1a;
  --bg-secondary:     #111827;
  --bg-card:          rgba(255, 255, 255, 0.04);
  --bg-card-hover:    rgba(255, 255, 255, 0.07);
  --bg-input:         rgba(255, 255, 255, 0.06);
  --bg-sidebar:       #0d1120;
  --bg-modal:         #141929;
  --bg-tooltip:       #1e2740;

  --accent-gold:      #c9a84c;
  --accent-gold-dim:  rgba(201, 168, 76, 0.15);
  --accent-gold-glow: rgba(201, 168, 76, 0.3);
  --accent-blue:      #4c8bc9;
  --accent-blue-dim:  rgba(76, 139, 201, 0.15);
  --accent-green:     #4caf82;
  --accent-red:       #e05c5c;
  --accent-purple:    #9c6bda;

  --text-primary:     #e8e8f4;
  --text-secondary:   #a0a8c0;
  --text-muted:       #5a6280;
  --text-accent:      #c9a84c;
  --text-on-accent:   #0a0e1a;

  --border:           rgba(255, 255, 255, 0.07);
  --border-accent:    rgba(201, 168, 76, 0.35);
  --divider:          rgba(255, 255, 255, 0.05);

  --shadow-sm:        0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:        0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg:        0 8px 40px rgba(0,0,0,0.6);
  --shadow-glow:      0 0 20px rgba(201,168,76,0.2);

  --scrollbar-track:  #0d1120;
  --scrollbar-thumb:  #2a3050;
  --scrollbar-hover:  #3a4268;

  /* Network graph */
  --node-fill:        #4c8bc9;
  --node-hub:         #c9a84c;
  --node-stroke:      #1a1f35;
  --edge-color:       rgba(255,255,255,0.35);
  --edge-stroke:      #6a7aaa;
  --graph-bg:         #0a0e1a;
}

/* ── Light Mode ────────────────────────────────────────────── */
[data-theme="light"] {
  --bg-primary:       #f2efe8;
  --bg-secondary:     #ffffff;
  --bg-card:          rgba(255, 255, 255, 0.85);
  --bg-card-hover:    rgba(255, 255, 255, 0.95);
  --bg-input:         rgba(0, 0, 0, 0.04);
  --bg-sidebar:       #1a2a4a;
  --bg-modal:         #ffffff;
  --bg-tooltip:       #1a2a4a;

  --accent-gold:      #9a6d1a;
  --accent-gold-dim:  rgba(154, 109, 26, 0.12);
  --accent-gold-glow: rgba(154, 109, 26, 0.2);
  --accent-blue:      #1a5a9a;
  --accent-blue-dim:  rgba(26, 90, 154, 0.12);
  --accent-green:     #1e7a52;
  --accent-red:       #c0392b;
  --accent-purple:    #6b3db5;

  --text-primary:     #1a1a2e;
  --text-secondary:   #3a3a5a;
  --text-muted:       #7a7a9a;
  --text-accent:      #9a6d1a;
  --text-on-accent:   #ffffff;

  --border:           rgba(0, 0, 0, 0.08);
  --border-accent:    rgba(154, 109, 26, 0.35);
  --divider:          rgba(0, 0, 0, 0.06);

  --shadow-sm:        0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:        0 4px 20px rgba(0,0,0,0.12);
  --shadow-lg:        0 8px 40px rgba(0,0,0,0.16);
  --shadow-glow:      0 0 20px rgba(154,109,26,0.15);

  --scrollbar-track:  #e8e4da;
  --scrollbar-thumb:  #c0b89a;
  --scrollbar-hover:  #a09078;

  /* Network graph */
  --node-fill:        #1a5a9a;
  --node-hub:         #9a6d1a;
  --node-stroke:      #ffffff;
  --edge-color:       rgba(40,60,120,0.55);
  --edge-stroke:      #3a5090;
  --graph-bg:         #f2efe8;
}

/* ── Auto-detect System Preference ────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary:       #0a0e1a;
    --bg-secondary:     #111827;
    --bg-card:          rgba(255, 255, 255, 0.04);
    --bg-card-hover:    rgba(255, 255, 255, 0.07);
    --bg-input:         rgba(255, 255, 255, 0.06);
    --bg-sidebar:       #0d1120;
    --bg-modal:         #141929;
    --bg-tooltip:       #1e2740;
    --accent-gold:      #c9a84c;
    --accent-gold-dim:  rgba(201, 168, 76, 0.15);
    --accent-gold-glow: rgba(201, 168, 76, 0.3);
    --accent-blue:      #4c8bc9;
    --accent-blue-dim:  rgba(76, 139, 201, 0.15);
    --accent-green:     #4caf82;
    --accent-red:       #e05c5c;
    --accent-purple:    #9c6bda;
    --text-primary:     #e8e8f4;
    --text-secondary:   #a0a8c0;
    --text-muted:       #5a6280;
    --text-accent:      #c9a84c;
    --text-on-accent:   #0a0e1a;
    --border:           rgba(255, 255, 255, 0.07);
    --border-accent:    rgba(201, 168, 76, 0.35);
    --divider:          rgba(255, 255, 255, 0.05);
    --shadow-sm:        0 2px 8px rgba(0,0,0,0.4);
    --shadow-md:        0 4px 20px rgba(0,0,0,0.5);
    --shadow-lg:        0 8px 40px rgba(0,0,0,0.6);
    --shadow-glow:      0 0 20px rgba(201,168,76,0.2);
    --scrollbar-track:  #0d1120;
    --scrollbar-thumb:  #2a3050;
    --scrollbar-hover:  #3a4268;
    --node-fill:        #4c8bc9;
    --node-hub:         #c9a84c;
    --node-stroke:      #1a1f35;
    --edge-color:       rgba(255,255,255,0.15);
    --graph-bg:         #0a0e1a;
  }
}

/* ── Transition for Theme Switching ───────────────────────── */
*, *::before, *::after {
  transition: background-color 0.3s ease, color 0.3s ease,
              border-color 0.3s ease, box-shadow 0.3s ease;
}