/* ==========================================================================
   PassiveWP — Dark Mode
   ========================================================================== */

[data-theme="dark"] {
  --pwp-text-primary:   #F1F5F9;
  --pwp-text-secondary: #94A3B8;
  --pwp-text-muted:     #64748B;
  --pwp-text-inverse:   #111827;
  --pwp-bg-body:        #0F172A;
  --pwp-bg-alt:         #1E293B;
  --pwp-bg-card:        #1E293B;
  --pwp-border:         #334155;
  --pwp-border-dark:    #475569;
  --pwp-shadow-sm:      0 1px 2px rgba(0,0,0,0.3);
  --pwp-shadow:         0 4px 6px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
  --pwp-shadow-md:      0 10px 15px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.3);
  --pwp-shadow-lg:      0 20px 25px rgba(0,0,0,0.5), 0 10px 10px rgba(0,0,0,0.3);
  --pwp-shadow-xl:      0 25px 50px rgba(0,0,0,0.6);
  --pwp-header-bg:      #0F172A;
  --pwp-header-border:  #1E293B;
  --pwp-gray-50:        #1E293B;
  --pwp-gray-100:       #334155;
  --pwp-gray-200:       #475569;
  --pwp-primary-xlight: rgba(46,204,113,0.1);
}

/* Prevent flash of wrong theme — preloaded by dark-mode.js */
html:not([data-theme]) body {
  visibility: hidden;
}

/* Dark toggle icon switch */
[data-theme="dark"] .pwp-dark-toggle .pwp-icon-moon  { display: none; }
[data-theme="dark"] .pwp-dark-toggle .pwp-icon-sun   { display: block; }
[data-theme="light"] .pwp-dark-toggle .pwp-icon-sun  { display: none; }
[data-theme="light"] .pwp-dark-toggle .pwp-icon-moon { display: block; }

/* Images — slight dim in dark mode for eye comfort */
[data-theme="dark"] img:not(.pwp-no-dim) {
  filter: brightness(0.88) contrast(1.02);
}

[data-theme="dark"] .pwp-footer {
  background: #020617;
}

[data-theme="dark"] code {
  background: #334155;
}

[data-theme="dark"] pre {
  background: #020617;
}

[data-theme="dark"] .pwp-skeleton {
  background: linear-gradient(90deg, #1E293B 25%, #334155 50%, #1E293B 75%);
  background-size: 200% 100%;
}

/* Demo overrides in dark mode — deepen backgrounds */
[data-theme="dark"].pwp-demo-kitchen {
  --pwp-bg-body: #1C1209;
}

[data-theme="dark"].pwp-demo-blacksmith {
  --pwp-bg-body: #050505;
}

/* Transitions for theme switch */
body,
.pwp-header,
.pwp-card,
.pwp-footer,
.pwp-mobile-nav {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}