/* ==========================================================================
   WHIRL — Dark Mode Refinements
   Base color tokens already flip via [data-theme="dark"] in style.css.
   This file holds the finishing touches that need more than a variable swap.
   ========================================================================== */

[data-theme="dark"] .site-header.is-scrolled{
  background:color-mix(in srgb, var(--bg-surface) 82%, transparent);
}

[data-theme="dark"] .media-frame,
[data-theme="dark"] .category-card,
[data-theme="dark"] .auth-visual img{
  filter:brightness(.92) saturate(1.02);
}

[data-theme="dark"] .btn-secondary{ border-color:var(--border-strong); color:var(--text-primary); }
[data-theme="dark"] .btn-secondary:hover{ border-color:var(--color-secondary); color:var(--color-secondary); }

[data-theme="dark"] .btn-dark{ background:var(--color-secondary); color:#20180a; }

[data-theme="dark"] .cta-banner{ background:linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); }
[data-theme="dark"] .cta-banner .btn-secondary{ background:var(--color-secondary); color:#20180a; border-color:var(--color-secondary); }
[data-theme="dark"] .cta-banner .btn-secondary:hover{ background:var(--color-secondary-dark); }

[data-theme="dark"] .pricing-card.is-popular{ box-shadow:0 20px 48px rgba(0,0,0,.5); }

[data-theme="dark"] .icon-toggle svg{ stroke:var(--text-primary); }

[data-theme="dark"] .dash-user-avatar{ background:var(--color-primary); color:#fff; }
[data-theme="dark"] .dash-nav a.active{ background:var(--color-primary); color:#fff; }
[data-theme="dark"] .dropdown-menu a:hover,
[data-theme="dark"] .dropdown-menu a.active{ background:var(--bg-app); }

[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea{ background:var(--bg-subtle); }

[data-theme="dark"] .filter-bar select{ background:var(--bg-subtle); color:var(--text-primary); }
[data-theme="dark"] .chip{ background:var(--bg-subtle); color:var(--text-primary); }

[data-theme="dark"] .toast{ background:var(--color-primary); color:#fff; }
[data-theme="dark"] .toast svg{ stroke:var(--color-secondary); }

[data-theme="dark"] .status-page .status-num{ color:var(--color-secondary); }

/* Softer blobs at night so they read as ambient glow, not flat color blocks */
[data-theme="dark"] .blob{ opacity:.35; filter:blur(2px); }