/* ===== PeerLoot day / night mode (inc/theme-mode.php) =====
   Only pages whose <html> carries data-pl-dm (styles on the --pl-* tokens)
   ever turn dark. A head script resolves the theme (stored toggle choice, else
   the OS) onto html[data-pl-theme], so component rules below only need
   [data-pl-theme="dark"]. The token block is repeated under the OS media query
   so pages still turn dark without JS; keep the two token blocks identical.
   Light values of the tokens live in the theme's site.css. */

@media (prefers-color-scheme: dark) {
	html[data-pl-dm]:not([data-pl-theme="light"]) {
		--pl-ink: #e8eaef; --pl-muted: #9aa1ae; --pl-line: #2a303c; --pl-mist: #0e1117;
		--pl-gold: #fec401; --pl-gold-deep: #fec401; --pl-green: #2bb57f; --pl-paper: #161a22;
		--pl-text: #c3c8d2; --pl-line-strong: #3b4250; --pl-on-ink: #12151c; --pl-ink-strong: #fff;
		--pl-night: #1c212b; --pl-footer-bg: #090b0f; --pl-link: #8ab4ff;
		--pl-ok-bg: rgba(43, 181, 127, .16); --pl-ok-text: #5fd3a4; --pl-warn-bg: rgba(254, 196, 1, .16);
		--pl-bad-bg: rgba(240, 90, 80, .16); --pl-bad-text: #ff8a80; --pl-bad-line: rgba(255, 138, 128, .45); --pl-ok-line: rgba(95, 211, 164, .35); --pl-warn-line: rgba(254, 196, 1, .35); --pl-warn-text: #fcd34d;
		--pl-header-shadow: 0 24px 48px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .04);
		--ast-global-color-0: #e8eaef; --ast-global-color-1: #fff; --ast-global-color-2: #e8eaef;
		--ast-global-color-3: #c3c8d2; --ast-global-color-4: #0e1117; --ast-global-color-5: #161a22;
		--ast-global-color-6: #2a303c; --ast-global-color-7: #fec401; --ast-global-color-8: #9aa1ae;
		--ast-border-color: #2a303c; --ast-search-border-color: #2a303c; --ast-lifter-hover-bg: #2a303c; --ast-global-dark-bg-style: #161a22;
		--ast-code-block-background: #0e1117; --ast-comment-inputs-background: #0e1117; --ast-global-dark-lfs: #0e1117;
		--ast-title-layout-bg: #0e1117; --ast-wc-container-head-bg-color: #0e1117; --ast-widget-bg-color: #0e1117;
		color-scheme: dark;
	}
}
html[data-pl-dm][data-pl-theme="dark"] {
	--pl-ink: #e8eaef; --pl-muted: #9aa1ae; --pl-line: #2a303c; --pl-mist: #0e1117;
	--pl-gold: #fec401; --pl-gold-deep: #fec401; --pl-green: #2bb57f; --pl-paper: #161a22;
	--pl-text: #c3c8d2; --pl-line-strong: #3b4250; --pl-on-ink: #12151c; --pl-ink-strong: #fff;
	--pl-night: #1c212b; --pl-footer-bg: #090b0f; --pl-link: #8ab4ff;
	--pl-ok-bg: rgba(43, 181, 127, .16); --pl-ok-text: #5fd3a4; --pl-warn-bg: rgba(254, 196, 1, .16);
	--pl-bad-bg: rgba(240, 90, 80, .16); --pl-bad-text: #ff8a80; --pl-bad-line: rgba(255, 138, 128, .45); --pl-ok-line: rgba(95, 211, 164, .35); --pl-warn-line: rgba(254, 196, 1, .35); --pl-warn-text: #fcd34d;
	--pl-header-shadow: 0 24px 48px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .04);
	--ast-global-color-0: #e8eaef; --ast-global-color-1: #fff; --ast-global-color-2: #e8eaef;
	--ast-global-color-3: #c3c8d2; --ast-global-color-4: #0e1117; --ast-global-color-5: #161a22;
	--ast-global-color-6: #2a303c; --ast-global-color-7: #fec401; --ast-global-color-8: #9aa1ae;
		--ast-border-color: #2a303c; --ast-search-border-color: #2a303c; --ast-lifter-hover-bg: #2a303c; --ast-global-dark-bg-style: #161a22;
		--ast-code-block-background: #0e1117; --ast-comment-inputs-background: #0e1117; --ast-global-dark-lfs: #0e1117;
		--ast-title-layout-bg: #0e1117; --ast-wc-container-head-bg-color: #0e1117; --ast-widget-bg-color: #0e1117;
	color-scheme: dark;
}

/* Light chosen while the OS is dark: keep native controls light (the trade
   page's DaisyUI build sets :root { color-scheme: dark } from the OS). */
html[data-pl-dm][data-pl-theme="light"] { color-scheme: light; }

/* Plain links: Astra's Customizer prints a fixed link colour (a, .page-title).
   body a (0,0,2) beats it while every styled link (a class or more) still wins. */
:where(html[data-pl-dm][data-pl-theme="dark"]) body a { color: var(--pl-link); }
:where(html[data-pl-dm][data-pl-theme="dark"]) body a:is(:hover, :focus) { color: var(--pl-ink); }
:where(html[data-pl-dm][data-pl-theme="dark"]) body .page-title { color: var(--pl-ink); }

/* Plain WordPress content (blog, posts, help articles): Astra's Customizer
   also prints fixed body and heading colours (body, h1-h6, .entry-title a,
   .entry-content :where(h1-h6)). Headings here are (0,1,1): above Astra's
   (0,1,0), level with one-class component rules. */
html[data-pl-dm][data-pl-theme="dark"] body { color: var(--pl-text); }
:where(html[data-pl-dm][data-pl-theme="dark"]) :is(body, .entry-content) :is(h1, h2, h3, h4, h5, h6) { color: var(--pl-ink); }
:where(html[data-pl-dm][data-pl-theme="dark"]) body .entry-title a { color: var(--pl-ink); }
:where(html[data-pl-dm][data-pl-theme="dark"]) body .entry-title a:is(:hover, :focus) { color: var(--pl-link); }
:where(html[data-pl-dm][data-pl-theme="dark"]) body :is(.entry-meta, .entry-meta *, .ast-comment-meta, .single .nav-links .nav-previous, .single .nav-links .nav-next, .page-links .page-link, .single .post-navigation a) { color: var(--pl-link); }
:where(html[data-pl-dm][data-pl-theme="dark"]) body .entry-meta a:is(:hover, :focus):not(.ast-button) { color: var(--pl-ink); }
:where(html[data-pl-dm][data-pl-theme="dark"]) body blockquote { color: var(--pl-text); border-color: var(--pl-line); }
:where(html[data-pl-dm][data-pl-theme="dark"]) body .wp-block-latest-posts > li > a { color: var(--pl-ink); }
:where(html[data-pl-dm][data-pl-theme="dark"]) body :is(.widget-title, .widget .wp-block-heading) { color: var(--pl-ink); }
:where(html[data-pl-dm][data-pl-theme="dark"]) body .ast-separate-container :is(.comment-respond, .comments-title) { background-color: var(--pl-paper); }

/* ---------- WS Form ----------
   Its palette is built from a few base colours (style 1, :where() selectors);
   point them at the tokens and mix the derived tints toward the dark paper
   instead of white. */
html[data-pl-dm][data-pl-theme="dark"] [data-wsf-style-id] {
	--wsf-form-color-base: var(--pl-ink);
	--wsf-form-color-base-contrast: var(--pl-paper);
	--wsf-form-color-background: transparent;
	--wsf-form-color-neutral: var(--pl-line-strong);
	--wsf-form-color-primary: var(--pl-ink);
	--wsf-form-color-accent: var(--pl-ink);
	--wsf-form-color-secondary: var(--pl-muted);
	--wsf-form-color-success: var(--pl-green);
	--wsf-form-color-danger: var(--pl-bad-text);
	--wsf-form-color-base-light-80: color-mix(in oklab, var(--wsf-form-color-base), var(--pl-paper) 80%);
	--wsf-form-color-neutral-light-40: color-mix(in oklab, var(--wsf-form-color-neutral), var(--pl-paper) 40%);
	--wsf-form-color-neutral-light-60: color-mix(in oklab, var(--wsf-form-color-neutral), var(--pl-paper) 60%);
	--wsf-form-color-neutral-light-70: color-mix(in oklab, var(--wsf-form-color-neutral), var(--pl-paper) 70%);
	--wsf-form-color-neutral-light-80: color-mix(in oklab, var(--wsf-form-color-neutral), var(--pl-paper) 80%);
	--wsf-form-color-neutral-light-90: color-mix(in oklab, var(--wsf-form-color-neutral), var(--pl-paper) 90%);
	--wsf-form-color-primary-dark-20: var(--pl-ink-strong);
	--wsf-form-color-primary-dark-40: var(--pl-ink-strong);
	--wsf-form-color-success-light-40: color-mix(in oklab, var(--wsf-form-color-success), var(--pl-paper) 40%);
	--wsf-form-color-success-light-80: color-mix(in oklab, var(--wsf-form-color-success), var(--pl-paper) 80%);
	--wsf-form-color-success-dark-40: color-mix(in oklab, var(--wsf-form-color-success), #fff 40%);
	--wsf-form-color-success-dark-60: color-mix(in oklab, var(--wsf-form-color-success), #fff 60%);
	--wsf-form-color-info-light-40: color-mix(in oklab, var(--wsf-form-color-info), var(--pl-paper) 40%);
	--wsf-form-color-info-light-80: color-mix(in oklab, var(--wsf-form-color-info), var(--pl-paper) 80%);
	--wsf-form-color-info-dark-40: color-mix(in oklab, var(--wsf-form-color-info), #fff 40%);
	--wsf-form-color-info-dark-60: color-mix(in oklab, var(--wsf-form-color-info), #fff 60%);
	--wsf-form-color-warning-light-40: color-mix(in oklab, var(--wsf-form-color-warning), var(--pl-paper) 40%);
	--wsf-form-color-warning-light-80: color-mix(in oklab, var(--wsf-form-color-warning), var(--pl-paper) 80%);
	--wsf-form-color-warning-dark-40: color-mix(in oklab, var(--wsf-form-color-warning), #fff 40%);
	--wsf-form-color-warning-dark-60: color-mix(in oklab, var(--wsf-form-color-warning), #fff 60%);
	--wsf-form-color-danger-light-40: color-mix(in oklab, var(--wsf-form-color-danger), var(--pl-paper) 40%);
	--wsf-form-color-danger-light-80: color-mix(in oklab, var(--wsf-form-color-danger), var(--pl-paper) 80%);
	--wsf-form-color-danger-dark-40: color-mix(in oklab, var(--wsf-form-color-danger), #fff 40%);
	--wsf-form-color-danger-dark-60: color-mix(in oklab, var(--wsf-form-color-danger), #fff 60%);
}
html[data-pl-dm][data-pl-theme="dark"] .wsf-form .wsf-invalid-feedback { color: var(--pl-bad-text); }

/* ---------- WooCommerce loading overlay (checkout, cart, account forms) ----------
   jQuery blockUI sets an inline white background (hence !important); the
   spinner is a dark SVG, inverted to light. */
html[data-pl-dm][data-pl-theme="dark"] .blockUI.blockOverlay { background-color: var(--pl-mist) !important; }
html[data-pl-dm][data-pl-theme="dark"] :is(.blockUI.blockOverlay, .woocommerce .loader)::before { filter: invert(1); }

/* ---------- select2 (WS Form and Woo dropdowns render into <body>) ---------- */
html[data-pl-dm][data-pl-theme="dark"] :is(.select2-selection, .select2-dropdown, .select2-search__field) {
	background-color: var(--pl-paper);
	border-color: var(--pl-line-strong);
	color: var(--pl-ink);
}
html[data-pl-dm][data-pl-theme="dark"] :is(.select2-selection__rendered, .select2-results__option) { color: var(--pl-ink); }
html[data-pl-dm][data-pl-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--pl-mist); color: var(--pl-ink); }
html[data-pl-dm][data-pl-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] { background: var(--pl-ink); color: var(--pl-on-ink); }

/* ---------- Toggle (header bar + drawer head) ---------- */
.pl-theme-toggle .pl-icon--sun { display: none; }
html[data-pl-dm][data-pl-theme="dark"] .pl-theme-toggle .pl-icon--sun { display: block; }
html[data-pl-dm][data-pl-theme="dark"] .pl-theme-toggle .pl-icon--moon { display: none; }
.pl-header .pl-theme-toggle { width: 40px; height: 40px; border-radius: 999px; }
.pl-drawer__head .pl-header__logo { margin-right: auto; }