/*
 * modes.css — light / dark / system color-mode subsystem (D3 · Open Hand,
 * re-brand 2026-06-16). Plectra ships every theme in light / dark / system;
 * dark is WARM (opposite Aldis's cool navy), never a cream-on-navy inversion.
 *
 * MECHANISM. The community surfaces read color through TWO custom-property
 * namespaces: WordPress's `--wp--preset--color--*` (theme.json palette — the bulk
 * of nav/room/ask/register/quiet-bp) and the codex `--color-*` mirror (footer +
 * a few room/ask/register rules). This file redefines BOTH sets under dark, so a
 * single attribute flip repaints every surface at once — no per-rule dark variant.
 *
 * SELECTOR / SPECIFICITY. WP prints the light palette inline as `:root{…}`
 * (specificity 0,1,0). `html[data-mode="dark"]` is 0,1,1 → it wins. Mode is set
 * synchronously before first paint by the no-FOUC inline script in functions.php
 * (reads localStorage `plectra_mode`), so there is no flash on cold load.
 *
 *   data-mode="dark"  → always dark
 *   data-mode="light" → always light (= WP defaults; explicit for the toggle)
 *   data-mode="system" (default / no JS) → follow prefers-color-scheme
 *
 * AA is a hard gate: every text pair in the dark set is re-verified by
 * tests/test-contrast.php (dark column). sage/cerulean/coral/amber are mid-tones
 * that hold ≥3:1 on the dark paper, so they are NOT redefined here.
 *
 * @package plectra-theme
 */

/* ─────────────────────────── DARK token set ───────────────────────────
   Authored once here; the @media (system) block below repeats the same values
   for OS-driven dark when the user has not pinned a mode. Keep the two in sync. */
html[data-mode="dark"] {
	/* WP preset namespace (theme.json palette) */
	/* Walk (2026-06-16): the near-black espresso (paper #1B1915) read "way too stark"
	   on the phone. Lift the warm dark surfaces a stop — a softer charcoal-espresso —
	   keeping the warm cast (not Aldis navy). ink/mist/accent unchanged; the rule
	   hairlines are nudged up so they still register on the lighter ground. AA holds:
	   ink 13.9:1 · mist 5.9:1 · accent 5.5:1 · moss 6.3:1 on the new paper. */
	--wp--preset--color--paper: #2A2620;
	--wp--preset--color--ivory: #38322A;
	--wp--preset--color--parchment: #322C25;
	--wp--preset--color--ink: #FAF6EF;
	--wp--preset--color--mist: #ABA192;
	--wp--preset--color--rule: #423B31;
	--wp--preset--color--rule-dark: #554C3F;
	--wp--preset--color--accent: #E58361;
	--wp--preset--color--plum-dark: #C2603F;
	--wp--preset--color--plum-light: #9A4A2F;
	--wp--preset--color--moss: #7FB489;
	--wp--preset--color--error: #E5736A;
	--wp--preset--color--success: #7FB489;

	/* codex mirror namespace (--color-*) */
	--color-paper: #2A2620;
	--color-ivory: #38322A;
	--color-parchment: #322C25;
	--color-ink: #FAF6EF;
	--color-mist: #ABA192;
	--color-rule: #423B31;
	--color-rule-dark: #554C3F;
	--color-accent: #E58361;
	--color-plum-dark: #C2603F;
	--color-plum-light: #9A4A2F;
	--color-moss: #7FB489;
	--color-error: #E5736A;
	--color-success: #7FB489;
}

@media (prefers-color-scheme: dark) {
	html:not([data-mode="light"]):not([data-mode="dark"]) {
		/* Keep in sync with html[data-mode="dark"] above (lightened 2026-06-16). */
		--wp--preset--color--paper: #2A2620;
		--wp--preset--color--ivory: #38322A;
		--wp--preset--color--parchment: #322C25;
		--wp--preset--color--ink: #FAF6EF;
		--wp--preset--color--mist: #ABA192;
		--wp--preset--color--rule: #423B31;
		--wp--preset--color--rule-dark: #554C3F;
		--wp--preset--color--accent: #E58361;
		--wp--preset--color--plum-dark: #C2603F;
		--wp--preset--color--plum-light: #9A4A2F;
		--wp--preset--color--moss: #7FB489;
		--wp--preset--color--error: #E5736A;
		--wp--preset--color--success: #7FB489;

		--color-paper: #2A2620;
		--color-ivory: #38322A;
		--color-parchment: #322C25;
		--color-ink: #FAF6EF;
		--color-mist: #ABA192;
		--color-rule: #423B31;
		--color-rule-dark: #554C3F;
		--color-accent: #E58361;
		--color-plum-dark: #C2603F;
		--color-plum-light: #9A4A2F;
		--color-moss: #7FB489;
		--color-error: #E5736A;
		--color-success: #7FB489;
	}
}

/* ─────────────────────── The mode toggle (quiet corner control) ───────────────────────
   Injected on every front-end + login page by the shared script in functions.php
   (progressive enhancement — system mode works with no JS). Deliberately quiet:
   reads as faint wayfinding, settles into the register on hover/focus.

   Convention (walk 2026-06-17): a SINGLE cycling control (adopted from Aldis), not a
   3-button segmented widget. `.plectra-mode-toggle` IS the <button> — it shows the
   current mode (sys/light/dark) and advances on activation. One token, one pill. */
.plectra-mode-toggle {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 100;
	appearance: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 4rem; /* widest label ("light"/"dark") — keeps the footer center zone from jiggling as it cycles */
	background: var(--wp--preset--color--paper, #FAF6EF);
	border: 1px solid var(--wp--preset--color--rule, #E4DCCD);
	border-radius: 999px;
	padding: 0.4rem 0.8rem;
	opacity: 0.55;
	transition: opacity 150ms ease, color 150ms ease, border-color 150ms ease;
	font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
	font-size: 0.75rem;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--mist, #5F574C);
}

.plectra-mode-toggle:hover,
.plectra-mode-toggle:focus-visible {
	opacity: 1;
	color: var(--wp--preset--color--ink, #1A1A1A);
	border-color: var(--wp--preset--color--ink, #1A1A1A);
	outline: none;
}

/* Inline variant (walk 2026-06-16): when the toggle mounts into the footer's center
   slot (.plectra-footer__modes) it is no longer a floating corner control — drop the
   fixed positioning and the resting fade so it sits as the middle zone of the footer
   row. The fixed corner variant is kept for surfaces with no footer slot (wp-login). */
.plectra-mode-toggle--inline {
	position: static;
	right: auto;
	bottom: auto;
	z-index: auto;
	opacity: 1;
}

@media (max-width: 600px) {
	.plectra-mode-toggle {
		padding: 0.4rem 0.6rem;
	}
}