/* ═══════════════════════════════════════════
   THEMES.CSS — Dark Mode & Theming System
   ═══════════════════════════════════════════ */

[data-theme="dark"] {
  /* Surfaces */
  --surface-0:     #0b0f19;    /* deep background */
  --surface-1:     #111827;    /* panel / card background */
  --surface-2:     #1f2937;    /* alt hover / input background */
  --surface-3:     #374151;    /* borders, lines */
  --surface-4:     #4b5563;    /* stronger border / disabled */

  /* Text */
  --text-primary:   #f9fafb;
  --text-secondary: #9ca3af;
  --text-muted:     #6b7280;
  --text-inverse:   #111827;

  /* Brand gradients tweaked for dark mode readability */
  --brand-gradient-soft: linear-gradient(135deg,
      color-mix(in srgb, var(--brand-primary) 15%, transparent),
      color-mix(in srgb, var(--brand-secondary) 15%, transparent));

  /* Semantic tweaks for dark mode (subtler colors) */
  --success-bg:  rgba(16, 185, 129, 0.1);  --success-border: rgba(16, 185, 129, 0.2);
  --warning-bg:  rgba(245, 158, 11, 0.1);  --warning-border: rgba(245, 158, 11, 0.2);
  --danger-bg:   rgba(239, 68, 68, 0.1);   --danger-border:  rgba(239, 68, 68, 0.2);
  --info-bg:     rgba(59, 130, 246, 0.1);   --info-border:    rgba(59, 130, 246, 0.2);

  /* Sidebar (deeper in dark mode) */
  --sidebar-bg:     #030712;
  --sidebar-border: rgba(255, 255, 255, 0.05);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
}

/* ── Smooth Theme Transitions ── */
body, 
body *,
.sidebar,
.topbar,
.card,
input,
select,
textarea,
button {
  transition: background-color var(--transition-med), 
              border-color var(--transition-med), 
              color var(--transition-med),
              box-shadow var(--transition-med),
              transform var(--transition-fast);
}

/* Allow disabling transitions (useful during page load to avoid flash) */
.no-transitions,
.no-transitions * {
  transition: none !important;
}