/* Dark theme — FRONT-END ONLY ===============================================
   Follows the visitor's OS setting (prefers-color-scheme). Split out of
   landing.css so it is enqueued only on the public site (functions.php,
   wp_enqueue_scripts) and is NOT passed to add_editor_style() — the block-
   editor canvas therefore always renders in the light palette, regardless of
   the editor's OS dark-mode setting.

   Must load AFTER landing.css (declared as a dependency on the
   `myprofit-landing` handle) so this :root re-declaration wins the cascade.
   The bulk is one :root swap to the `dark` column of design/design-tokens.json;
   a few rules below can't be a pure variable swap and are overridden directly.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
	:root {
		--mp-bg:      #070b1f;
		--mp-surface: #0f1532;
		--mp-subtle:  rgba(255, 255, 255, 0.04);
		--mp-invert:  #1a2150; /* elevated, stays distinct from --mp-bg */

		--mp-ink:     #ffffff;
		--mp-ink-2:   rgba(255, 255, 255, 0.82);
		--mp-muted:   rgba(255, 255, 255, 0.55);
		--mp-hair:    rgba(255, 255, 255, 0.08);
		--mp-hair-2:  rgba(255, 255, 255, 0.14);
		--mp-accent:  #13D9B0;
		--mp-warn:    #FF6E84;
		/* --mp-invert-ink intentionally NOT redeclared: stays #05134B so white /
		   teal buttons on dark surfaces never go white-on-white. */

		--mp-pill-live-bg: rgba(19, 217, 176, 0.18);
		--mp-pill-live-fg: #13D9B0;
		--mp-pill-soon-bg: rgba(255, 110, 132, 0.18);
		--mp-pill-soon-fg: #FF6E84;

		--mp-sticky-bg:   rgba(26, 33, 80, 0.92);

		--mp-shadow-card: 0 24px 60px -28px rgba(0, 0, 0, 0.7);
		--mp-shadow-cta:  0 18px 48px -16px rgba(0, 0, 0, 0.6);
		--mp-shadow-pop:  0 18px 40px -16px rgba(0, 0, 0, 0.6);
		--mp-shadow-tip:  0 8px 24px -8px rgba(0, 0, 0, 0.55);
	}

	/* Pin the page surface/text to the --mp-* layer. `html body` (0,0,2) outranks
	   theme.json's plain `body { background/color }` regardless of stylesheet
	   order, so the page can't get stuck on the light preset values. */
	html body {
		background: var(--mp-bg);
		color: var(--mp-ink);
	}

	/* Brand logo is dark-on-transparent — invert it on the now-dark header.
	   (The footer logo already inverts via .mp-logo-on-dark in both themes.) */
	.mp-header .wp-block-site-logo img {
		filter: brightness(0) invert(1);
	}

	/* Hero dashboard placeholder is a flat <img>-loaded SVG, so it can't read the
	   page's --mp-* vars — its card stays white-on-navy under the dark page. Swap
	   to the dark-palette sibling via `content` (keeps the <img> box + alt; only
	   loaded here, so the editor keeps the light SVG). When the real screenshot
	   ships, mirror it: drop this rule or point it at a dark screenshot. */
	.mp-hero__visual img {
		content: url(../img/hero-placeholder-dark.svg);
	}
	/* Localized dark siblings. These mirror the light-mode language swaps in
	   landing.css; same selectors, dark files. They share specificity (0,2,2)
	   with landing.css's light rules, so dark wins only because this file loads
	   after landing.css — the same load-order tie the file header relies on. */
	html[lang="uz-UZ"] .mp-hero__visual img      { content: url(../img/hero-placeholder-uz-dark.svg); }
	html[lang="en-US"] .mp-hero__visual img      { content: url(../img/hero-placeholder-en-dark.svg); }
	html[lang="uz-UZ-cyrl"] .mp-hero__visual img { content: url(../img/hero-placeholder-uzc-dark.svg); }

	/* Primary CTAs are painted `ink` (#05134B) by theme.json, near-invisible on
	   the dark page — repoint them to the elevated invert surface. Scoped to the
	   three light-surface contexts so the more-specific exceptions keep their own
	   fills: the closing/footer white button, the teal sticky button, and the
	   translucent pricing-multi outline. Hero's secondary stays transparent via
	   its own `!important` rule. */
	.mp-header .wp-block-button__link,
	.mp-hero .wp-block-button__link,
	.mp-pricing__card .wp-block-button__link {
		background: var(--mp-invert);
	}

	/* Header language switcher uses ink-tinted overlays; flip to white-tinted.
	   The footer switcher has its own (already white-tinted) overrides and is
	   left untouched. */
	.mp-header .mp-lang-switch {
		border-color: var(--mp-hair-2);
	}
	.mp-header .mp-lang-switch:hover,
	.mp-header .mp-lang-switch[aria-expanded="true"],
	.mp-header .mp-lang-switch__option:hover {
		background: rgba(255, 255, 255, 0.06);
	}
	.mp-header .mp-lang-switch__option.is-active {
		background: rgba(255, 255, 255, 0.08);
	}

	/* Docs — surface/border overrides. Tokens already flip via :root above;
	   these rules handle cases where specificity or a literal value would
	   otherwise keep the light colour. */
	.mp-docs-card,
	.mp-docs-help {
		background: var(--mp-surface);
		border-color: var(--mp-hair);
	}
	.mp-docs-search input[type="search"] {
		border-color: var(--mp-hair);
		background: var(--mp-surface);
		color: var(--mp-ink);
	}
	.mp-docs-breadcrumb,
	.mp-docs-breadcrumb a {
		color: var(--mp-muted);
	}
}