/*
 * Lovus in the family's dark styles, Night and Blue Moon (shared/family/family.css
 * sets their colours). The LOVUS style is Lovus's own look, so nothing changes
 * for it. Applies only on a local copy: on lovus.md there is no style choice.
 *
 * Lovus's variables mostly name text colours (ink, wood-2 for headings) and
 * light backgrounds (cream), so they map by that role; the few dark wood
 * panels are fixed below.
 */
html:root:is([data-site-theme="night"], [data-site-theme="moon"]) {
  --cream: var(--bg);
  --cream-2: var(--surface-2);
  --wood: var(--text);
  --wood-2: var(--text);
  --wine: var(--primary);
  --wine-2: var(--primary-hover);
  --gold: var(--accent);
  --gold-light: var(--accent);
  --ink: var(--text);
  --ink-soft: var(--muted);
  --line: var(--border);
}
html:is([data-site-theme="night"], [data-site-theme="moon"]) body { background-color: var(--bg); color: var(--text); }

/* The dark wood panels stay dark, in the strip's colour, with light text. */
html:is([data-site-theme="night"], [data-site-theme="moon"]) :is(.partner-card, .site-footer, .mediacard, .single-slot video) { background: var(--fb-bg); }
html:is([data-site-theme="night"], [data-site-theme="moon"]) :is(.partner-card, .footer-brand .brand-text) { color: var(--fb-strong); }

/* Blocks with a white background written in Lovus's CSS: the style's surface. */
html:is([data-site-theme="night"], [data-site-theme="moon"]) :is(
  .quote-card, .step, .join-form, .auth-card, .media-block, .like-btn, .modal-card, .skeleton-card,
  .inbox-tab, .inbox-item, .wallet-bar, .send-lovus-btn, .feature-prefs-section, .badge-chip,
  .library-filters button, .library-item, .admin-library-row, .profile-card, .lumea-filters input, .marketplace-form
) { background: var(--surface); }
/* The sticky menu: see-through cream becomes see-through night. */
html:is([data-site-theme="night"], [data-site-theme="moon"]) .site-header { background: color-mix(in srgb, var(--bg) 88%, transparent); }
/* Form fields and the admin tables, wherever Lovus leaves them white. */
html:is([data-site-theme="night"], [data-site-theme="moon"]) :is(input, select, textarea) { background-color: var(--surface); color: var(--text); border-color: var(--border); }