/*!
 * Component: Button (.mw-btn)
 *
 * Topic 23 REDESIGN-WP4 — full rewrite for the launch-cut redesign.
 *
 * Two button archetypes, mapped to the existing markup contract:
 *
 *   .mw-btn--primary  → pill, violet fill, Ice Cream Man, soft glow shadow.
 *                       The flagship CTA — used in hero, cards, contact form,
 *                       newsletter submit, press download.
 *   .mw-btn--outline  → semantically "secondary" link-button — transparent
 *                       background, underlined label, tight horizontal padding.
 *                       (Class name retained for back-compat with every
 *                       template in the topic; semantics live in comments.)
 *
 * Markup contract UNCHANGED — `.mw-btn`, `.mw-btn--primary`, `.mw-btn--outline`
 * are still the only public hooks. All variable references come from WP-1's
 * `assets/css/theme-tokens.css` (--mw-color-primary*, --mw-color-text-light,
 * --mw-font-display). No theme.json / FSE preset fallbacks remain in this
 * file — RENDER-WP2 retired FSE.
 *
 * Source ranges (pre-WP-4): patterns.css ~1880-2010, ported to this file in
 * RENDER-WP1, then rewritten end-to-end in REDESIGN-WP4.
 *
 * @package Mystwood_Studios_AB
 * @since   Topic 23 REDESIGN-WP4
 */

/* --- Base button (shared shell for both archetypes) ------------------ */
.mw-btn,
.mw-cb-featured-card__cta-primary,
.mw-cb-featured-card__cta-secondary,
.mw-press-coverage__link,
.mw-press-download-card__cta a,
.mw-newsletter-form--page .mw-newsletter-form__submit button,
.mw-newsletter-form--kworld .mw-newsletter-form__submit button,
.mw-newsletter-form--cb .mw-newsletter-form__submit button,
.mw-newsletter-form--bp .mw-newsletter-form__submit button,
.mw-newsletter-form--newsletter .mw-newsletter-form__submit button,
.mw-contact-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.6rem;
	font-family: var(--mw-font-display);
	font-size: 1.05rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1;
	text-decoration: none;
	text-transform: none;
	background: var(--mw-color-primary);
	color: var(--mw-color-text-light);
	border: 0;
	border-radius: 9999px;
	box-shadow: 0 6px 18px rgba(103, 101, 232, 0.28);
	cursor: pointer;
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		background 0.18s ease,
		color 0.18s ease,
		filter 0.18s ease;
}

/* Apply Ice Cream Man + lift transition to every native WP button on the
 * site, so editor-placed `wp:button` blocks pick up the same family without
 * separate styling overhead. */
.wp-element-button,
.wp-block-button__link,
.mw-btn {
	font-family: var(--mw-font-display);
	letter-spacing: 0.04em;
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		filter 0.18s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover,
.mw-btn:hover,
.mw-cb-featured-card__cta-primary:hover,
.mw-cb-featured-card__cta-secondary:hover,
.mw-press-coverage__link:hover,
.mw-press-download-card__cta a:hover,
.mw-contact-form button[type="submit"]:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
}

.wp-element-button:active,
.wp-block-button__link:active,
.mw-btn:active {
	transform: translateY(0);
	box-shadow: 0 4px 12px rgba(103, 101, 232, 0.22);
}

/* Focus ring colour is tokenised (Topic 33 FIX-WP14) so a light band can
 * repaint it without out-specifying this rule. `--mw-color-primary-glow`
 * (#A8A7FF) is correct on the dark studio bands and fails badly on the light
 * ones — measured against the seven distinct backgrounds that actually host a
 * focusable primary CTA: 8.53 on studio-dark and 8.80 on studio-violet, but
 * 1.09 on kw-sky, 1.46 on kw-gold, 1.78 on studio-light. WCAG 1.4.11 wants 3:1
 * for a focus indicator, so on those bands the ring was painting and still not
 * doing its job. See the `--mw-btn-focus-ring` cascade near the end of file. */
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
.mw-btn:focus-visible,
.mw-press-coverage__link:focus-visible {
	outline: 3px solid var(--mw-btn-focus-ring, var(--mw-color-primary-glow));
	outline-offset: 3px;
}

/* --- Size variants --------------------------------------------------- */
.mw-btn--lg,
.mw-inner-hero__cta .wp-block-button__link {
	padding: 1rem 1.85rem;
	font-size: 1.15rem;
}

.mw-btn--sm,
.mw-press-download-card__cta a,
.mw-press-coverage__link {
	padding: 0.55rem 1.05rem;
	font-size: 0.95rem;
}

/* --- Primary modifier (paint-blob shape, violet fill, soft glow) ------ *
 * Topic 23 REDESIGN-WP4 Figma parity fixup (2026-05-27): the Figma source
 * for `.mw-btn--primary` (file q8Xi6f2fTsi0DwMAU9DoiY node 265:1071 — the
 * Primary button shape in the design-system frame) is NOT a clean
 * border-radius pill but a 9-vertex hand-drawn polygon — see the "How to
 * Create one?" tutorial strip in node 265:709 ("1. Create basic shape →
 * 2. Create Clipping mask (CSS) → 3. Final look").
 *
 * Coordinates derived from path `M3.5 0 L45 2.5 L153.5 4 L159.5 24.5
 * L153.5 49 L79.5 47.5 L3.5 49 V35.5 L0 22 Z` (viewBox 159.5 × 49) and
 * normalised to percentages so the shape scales with any button size.
 *
 * NO GLOW — and none is possible from inside this element.
 *
 * The original REDESIGN-WP4 note here claimed `filter: drop-shadow(...)`
 * "respects the clip-path silhouette so the glow hugs the hand-drawn edges".
 * That was false. `clip-path` is applied AFTER `filter`, so a drop-shadow is
 * clipped away exactly like the box-shadow it replaced. The glow never
 * rendered once between REDESIGN-WP4 shipping (2026-05-27) and the measurement
 * that caught it (2026-07-29) — two months unnoticed.
 *
 * Proven by controlled experiment: `drop-shadow(0 60px 0 red)` on this button
 * rendered NOTHING, while the same filter on an adjacent link with no
 * `clip-path` rendered clearly.
 *
 * The dead declarations were deleted in Topic 33 FIX-WP14 Task C (owner ruling
 * 2026-07-29: accept the flat look — zero visual change, because the buttons
 * already look exactly like this).
 *
 * ⚠️ `brightness()` is NOT dead and is deliberately kept where it appears
 * below. A colour filter tints the element's own pixels, which survive the
 * clip; only effects painted OUTSIDE the silhouette are lost. Do not "tidy up"
 * the remaining `filter` declarations on the assumption that clipping kills
 * all of them.
 *
 * With `box-shadow: none` below, these buttons carry no depth cue at all. That
 * is now a recorded, deliberate state rather than an unnoticed defect. If a
 * glow is ever wanted back it has to be painted by an unclipped ancestor.
 */
.mw-btn--primary {
	background: var(--mw-color-primary);
	color: var(--mw-color-text-light);
	border-radius: 0;
	padding: 0.85rem 1.6rem;
	font-family: var(--mw-font-display);
	box-shadow: none;
	clip-path: polygon(
		2.19% 0%,
		28.21% 5.10%,
		96.24% 8.16%,
		100% 50%,
		96.24% 100%,
		49.84% 96.94%,
		2.19% 100%,
		2.19% 72.45%,
		0% 44.90%
	);
}

.mw-btn--primary:hover {
	background: var(--mw-color-primary-hover);
	/* No `filter` declared: the base `.mw-btn:hover` rule already supplies
	 * brightness(1.06), and the drop-shadow that used to ride along with it was
	 * clipped away. Re-declaring brightness here would only duplicate the base. */
}

.mw-btn--primary:active {
	background: var(--mw-color-primary-pressed);
	/* `none`, not omitted. The pressed state has to CANCEL the hover brightness
	 * — you are almost always hovering while pressing. The deleted drop-shadow
	 * did that implicitly by replacing the whole `filter` value; simply dropping
	 * the declaration would let brightness(1.06) bleed into the pressed state
	 * and visibly change the button. Task C was a zero-visual-change ruling, so
	 * the cancellation is now explicit instead of accidental. */
	filter: none;
}

/* Keyboard focus ring (WCAG 2.4.7) — Topic 33 FIX-WP14, 2026-07-29.
 *
 * The defect: `clip-path` is applied AFTER everything this element paints, and
 * the base `.mw-btn:focus-visible` ring sits OUTSIDE the border box (3px solid
 * at 3px offset) — so the clip removed it in full and a keyboard user had no
 * indication of where focus was, on the theme's most-used CTA, on every page.
 *
 * Confirmed on three engines, not one (FIX-WP14 Task A). Focusing the button
 * and diffing the captured pixels against an unfocused capture of the same
 * region produced NO perimeter change in Chromium 148, Firefox 150 or WebKit
 * 26.4, while an unclipped control button in the same run showed its ring
 * clearly. Universal behaviour, per spec — not a vendor quirk.
 *
 * Why the clip is lifted rather than the ring re-painted: `filter`,
 * `box-shadow` and `::before`/`::after` are all clipped by the same mechanism
 * (pseudo-elements are part of the originating element's rendering), so no
 * ring painted from inside this element can survive. Lifting the clip for the
 * duration of the focus state is the only remedy that needs no markup change
 * across the ~10 templates emitting this class.
 *
 * Accepted cost: while keyboard-focused the silhouette is a rounded rectangle
 * rather than the hand-drawn blob. Visible only during keyboard focus.
 *
 * `border-radius` is scoped to the focus state, so resting geometry is
 * untouched; 6px matches the `.mw-btn--outline` ring shipped in FIX-WP11.
 * Width / offset / colour are inherited from the base rule, so the
 * dark-surface cascade keeps applying and needs no restating per surface.
 *
 * (0,2,0) beats the `.mw-btn--primary` clip-path declaration at (0,1,0).
 */
.mw-btn--primary:focus-visible {
	clip-path: none;
	border-radius: 6px;
}

/* --- Secondary (`.mw-btn--outline`) ---------------------------------- *
 * Link-like: transparent background, underlined violet label, tight
 * horizontal padding. Class name retained for back-compat — every page
 * template, every section partial, and the cb-featured-card composition
 * already references `.mw-btn--outline`. Treat as "secondary" in design
 * conversation; in markup it stays `.mw-btn--outline`.
 */
.is-style-outline .wp-block-button__link,
.mw-btn--outline,
.mw-cb-featured-card__cta-secondary {
	background: transparent;
	color: var(--mw-color-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
	border: 0;
	border-radius: 0;
	padding: 0.85rem 0.5rem;
	box-shadow: none;
}

.is-style-outline .wp-block-button__link:hover,
.mw-btn--outline:hover,
.mw-cb-featured-card__cta-secondary:hover {
	background: transparent;
	color: var(--mw-color-primary-hover);
	text-decoration-thickness: 2px;
	box-shadow: none;
}

.is-style-outline .wp-block-button__link:active,
.mw-btn--outline:active,
.mw-cb-featured-card__cta-secondary:active {
	color: var(--mw-color-primary-pressed);
}

/* Focus ring — the reported "strange border". Topic 33 FIX-WP11 item 5.
 *
 * This variant is link-like: transparent, underlined, `border-radius: 0`,
 * tight padding. The base `.mw-btn:focus-visible` ring therefore drew a hard
 * 3px rectangle at 3px offset around a 175x44 box of underlined text —
 * measured in Chromium 2026-07-28 — which reads as a browser artefact rather
 * than a designed state. That is what the designer saw.
 *
 * Still a real ring: `outline: none` would fail both G11 and WCAG 2.4.7. It is
 * reshaped for a text control instead — thinner, tighter, and rounded so it
 * hugs the label rather than boxing it. `outline` follows `border-radius`, and
 * the radius is scoped to the focus state so the button's own resting geometry
 * is untouched (its background is transparent, so nothing else can show it).
 *
 * Colour is inherited from the base rule, so the dark-surface cascade below
 * keeps applying and this does not need restating per surface.
 *
 * (0,2,0) ties the base rule, so this must stay AFTER it in source order — it
 * is, by ~100 lines.
 */
.is-style-outline .wp-block-button__link:focus-visible,
.mw-btn--outline:focus-visible,
.mw-cb-featured-card__cta-secondary:focus-visible {
	outline-width: 2px;
	outline-offset: 2px;
	border-radius: 6px;
}

/* --- On-dark modifier (`.mw-btn--on-dark`) --------------------------- *
 * Topic 36 CORR-WP1 Item 1. Opt-in white secondary CTA for a hero image
 * whose scrim is dark — the existing dark-mode parent cascade just below
 * keys off `[data-bg-token]`/`.has-bg-dark-background-color`, which cannot
 * see "this hero happens to sit on a photographic image" (`kw-sky`/`kw-gold`
 * are themselves LIGHT tokens, so the cascade would not fire there). The
 * owner asked for this on exactly two named pages (`/kworld/`,
 * `/bedtime-stories/`, Q1) via a new hero arg (`secondary_cta_on_dark`) —
 * this class is the CSS half, additive and inert until that arg opts a
 * caller in. Modifier, not a `[data-bg-token]` rule, so it cannot be
 * "site-wide" the way keying on `[data-has-image]` would have been.
 */
.mw-btn--on-dark.mw-btn--outline,
.mw-btn--on-dark.mw-cb-featured-card__cta-secondary {
	color: #ffffff;
}

.mw-btn--on-dark.mw-btn--outline:hover,
.mw-btn--on-dark.mw-cb-featured-card__cta-secondary:hover {
	color: rgba(255, 255, 255, 0.82);
}

.mw-btn--on-dark.mw-btn--outline:active,
.mw-btn--on-dark.mw-cb-featured-card__cta-secondary:active {
	color: rgba(255, 255, 255, 0.68);
}

.mw-btn--on-dark.mw-btn--outline:focus-visible {
	outline-color: #ffffff;
}

/* --- Dark-mode parent cascade --------------------------------------- *
 * On dark section surfaces (kw-castle-stone, kw-sunset, studio-violet,
 * studio-dark, bg-dark FSE preset), the secondary's violet label loses
 * contrast. Swap to `--mw-color-primary-glow` — the lighter violet tint
 * already used for focus rings — so the underline reads cleanly on dark
 * backgrounds without breaking the link-like aesthetic.
 *
 * Cascade roots mirror the project convention (see _card-grid.css,
 * _body.css, _cta-band.css, _gallery.css): `[data-bg-token="..."]` on
 * `.mw-section--*` wrappers for dark surfaces, plus the FSE-legacy
 * `.has-bg-dark-background-color` for editor-placed wp:button blocks.
 */
[data-bg-token="kw-castle-stone"] .mw-btn--outline,
[data-bg-token="kw-castle-stone"] .is-style-outline .wp-block-button__link,
[data-bg-token="kw-castle-stone"] .mw-cb-featured-card__cta-secondary,
[data-bg-token="kw-sunset"] .mw-btn--outline,
[data-bg-token="kw-sunset"] .is-style-outline .wp-block-button__link,
[data-bg-token="kw-sunset"] .mw-cb-featured-card__cta-secondary,
[data-bg-token="studio-violet"] .mw-btn--outline,
[data-bg-token="studio-violet"] .is-style-outline .wp-block-button__link,
[data-bg-token="studio-violet"] .mw-cb-featured-card__cta-secondary,
[data-bg-token="studio-dark"] .mw-btn--outline,
[data-bg-token="studio-dark"] .is-style-outline .wp-block-button__link,
[data-bg-token="studio-dark"] .mw-cb-featured-card__cta-secondary,
.has-bg-dark-background-color .mw-btn--outline,
.has-bg-dark-background-color .is-style-outline .wp-block-button__link {
	color: var(--mw-color-primary-glow);
}

[data-bg-token="kw-castle-stone"] .mw-btn--outline:hover,
[data-bg-token="kw-castle-stone"] .is-style-outline .wp-block-button__link:hover,
[data-bg-token="kw-castle-stone"] .mw-cb-featured-card__cta-secondary:hover,
[data-bg-token="kw-sunset"] .mw-btn--outline:hover,
[data-bg-token="kw-sunset"] .is-style-outline .wp-block-button__link:hover,
[data-bg-token="kw-sunset"] .mw-cb-featured-card__cta-secondary:hover,
[data-bg-token="studio-violet"] .mw-btn--outline:hover,
[data-bg-token="studio-violet"] .is-style-outline .wp-block-button__link:hover,
[data-bg-token="studio-violet"] .mw-cb-featured-card__cta-secondary:hover,
[data-bg-token="studio-dark"] .mw-btn--outline:hover,
[data-bg-token="studio-dark"] .is-style-outline .wp-block-button__link:hover,
[data-bg-token="studio-dark"] .mw-cb-featured-card__cta-secondary:hover,
.has-bg-dark-background-color .mw-btn--outline:hover,
.has-bg-dark-background-color .is-style-outline .wp-block-button__link:hover {
	color: #ffffff;
}

/* --- K-World gold primary CTA --------------------------------------- *
 * K-World pages substitute the violet pill for the brand kw-gold pill on
 * the inner-hero CTA + cb-featured-card primary + kw-branded newsletter.
 * Text flips to bg-dark for AA contrast against the gold. Shadow tone
 * recoloured to match the gold tint.
 */
.is-brand-kw .mw-inner-hero__cta .wp-block-button__link,
.has-kw-gold-background-color.wp-block-button__link,
.mw-cb-featured-card__cta-primary,
.mw-newsletter-form--kworld .mw-newsletter-form__submit button {
	background: var(--wp--preset--color--kw-gold, #F4C430);
	color: var(--mw-color-text-dark);
	border: 0;
	box-shadow: 0 6px 18px rgba(244, 196, 48, 0.28);
}

.is-brand-kw .mw-inner-hero__cta .wp-block-button__link:hover,
.has-kw-gold-background-color.wp-block-button__link:hover,
.mw-cb-featured-card__cta-primary:hover,
.mw-newsletter-form--kworld .mw-newsletter-form__submit button:hover {
	background: var(--wp--preset--color--kw-gold, #F4C430);
	color: var(--mw-color-text-dark);
}

/* --- K-World gold on the section CTA (`.mw-btn--primary`) ------------- *
 * Topic 27 BRAND-WP4 (Foundation, S3). Claude Design renders `<Button
 * kworld>` as a gold pill with dark text. The section partials (hero,
 * cta-band, card-grid) emit `.mw-btn--primary`, so:
 *   - EVERY primary CTA inside a K-World-brand section auto-recolours gold
 *     (`.mw-section--brand-k-world .mw-btn--primary`);
 *   - an explicit `.mw-btn--kw-gold` modifier handles gold CTAs that live on
 *     a NON-K-World band (e.g. the home "Explore the Book" button on a
 *     studio-light band) — pass cta_variant="kw-gold" to hero/cta-band, which
 *     emits `mw-btn mw-btn--primary mw-btn--kw-gold`.
 * Both inherit the paint-blob clip-path from `.mw-btn--primary`; only the
 * fill and text change. Text flips to bg-dark ink for AA contrast on the gold.
 * (These variants used to re-tint a drop-shadow glow too; it was clipped away
 * and never rendered — deleted in FIX-WP14 Task C.) */
.mw-btn--kw-gold,
.mw-section--brand-k-world .mw-btn--primary {
	background: var(--kw-gold, #F4C430);
	color: var(--mw-color-text-dark, #040420);
}

.mw-btn--kw-gold:hover,
.mw-section--brand-k-world .mw-btn--primary:hover {
	background: var(--kw-gold, #F4C430);
	color: var(--mw-color-text-dark, #040420);
	/* brightness KEPT (1.04, not the base rule's 1.06 — gold needs a gentler
	 * lift); only the clipped-away drop-shadow was removed. See Task C. */
	filter: brightness(1.04);
}

.mw-btn--kw-gold:active,
.mw-section--brand-k-world .mw-btn--primary:active {
	/* Cancels the hover brightness — see `.mw-btn--primary:active` above. */
	filter: none;
}

/* -----------------------------------------------------------------------
 * K-World gold CTA on a gold band (Topic 33 FIX-WP7 Task A / owner ruling D1)
 *
 * Defect 2: `.mw-btn--kw-gold` / `.mw-section--brand-k-world .mw-btn--primary`
 * above paint EVERY primary CTA inside a K-World band gold — including a CTA
 * that lives inside a `kw-gold` band itself, where the pill fill matches the
 * band fill and the paint-blob silhouette disappears (only the dark ink text
 * survives). Two live instances: k-world/hub.php:262-275 ("Explore the
 * coloring book", /k-world/) and k-world/coloring-books.php:253-267 ("Sign
 * up for the newsletter", /coloring-books/).
 *
 * Deepens the fill to --kw-castle-stone (#7A6E5C, owner-picked) with the
 * light label so the pill reads against the butter kw-gold-surface field.
 * Measured on the rendered page: label-on-fill 4.73:1, fill-on-butter
 * 3.33:1 — both pass.
 *
 * All THREE states (base/hover/active) are overridden. This block originally
 * also re-tinted the gold drop-shadow to the stone fill in every one of them,
 * to stop a gold halo fringing the new pill on the butter band — but that glow
 * was clipped away and never rendered on any of them, so the whole concern was
 * moot. The drop-shadows were deleted in FIX-WP14 Task C; the brightness lift
 * is real and stays. Appended at end of file so source order also favours this
 * block at matching specificity.
 *
 * EXTENDED TO kw-sky — Topic 36 CORR-WP1 Item 2. `--kw-sky-surface` /
 * `--kw-gold-surface` flipped to white, so a gold pill on either band now
 * measures ~1.6:1 (was 1.45–1.52:1 pre-flip and already failing; white makes
 * it worse, not better). The castle-stone deepening this block already
 * applies to `kw-gold` is the correct fix for `kw-sky` too — same defect
 * class, same remedy. Kaya's own gold rider-card CTA lives on `kw-sky`
 * (Clear the Skies), which is exactly why this needed to be a real deepening
 * rather than a token-level fix: `--kw-gold` itself must not move.
 * ----------------------------------------------------------------------- */
.mw-section[data-bg-token="kw-gold"] .mw-btn--primary,
.mw-section[data-bg-token="kw-gold"] .mw-btn--kw-gold,
.mw-section[data-bg-token="kw-sky"] .mw-btn--primary,
.mw-section[data-bg-token="kw-sky"] .mw-btn--kw-gold {
	background: var(--kw-castle-stone, #7A6E5C);
	color: var(--mw-color-text-light, #FAF8FF);
}

.mw-section[data-bg-token="kw-gold"] .mw-btn--primary:hover,
.mw-section[data-bg-token="kw-gold"] .mw-btn--kw-gold:hover,
.mw-section[data-bg-token="kw-sky"] .mw-btn--primary:hover,
.mw-section[data-bg-token="kw-sky"] .mw-btn--kw-gold:hover {
	background: var(--kw-castle-stone, #7A6E5C);
	color: var(--mw-color-text-light, #FAF8FF);
	/* brightness KEPT; the stone-tinted drop-shadow was clipped away. Task C. */
	filter: brightness(1.04);
}

.mw-section[data-bg-token="kw-gold"] .mw-btn--primary:active,
.mw-section[data-bg-token="kw-gold"] .mw-btn--kw-gold:active,
.mw-section[data-bg-token="kw-sky"] .mw-btn--primary:active,
.mw-section[data-bg-token="kw-sky"] .mw-btn--kw-gold:active {
	/* Cancels the hover brightness — see `.mw-btn--primary:active` above. */
	filter: none;
}

/* -----------------------------------------------------------------------
 * Focus-ring colour on light bands (Topic 33 FIX-WP14)
 *
 * The default ring is `--mw-color-primary-glow` (#A8A7FF), which is a
 * dark-band colour. Measured against every background that actually hosts a
 * focusable primary CTA (28 of them across 8 pages, 2026-07-29):
 *
 *   studio-dark    #0E0841   8.53:1  ✅ keep the glow
 *   studio-violet  #0E0A2A   8.80:1  ✅ keep the glow
 *   studio-light   #E1E8F9   1.78:1  ⛔ → #040420 = 16.40:1
 *   kw-sky         #8FA8DC   1.09:1  ⛔ → #040420 =  8.44:1
 *   kw-sky (card)  #FFF1D6   1.95:1  ⛔ → #040420 = 18.02:1
 *   kw-gold        #F2D072   1.46:1  ⛔ → #040420 = 13.46:1
 *   castle-stone   #7A6E5C   2.29:1  ⛔ → #040420 =  4.04:1
 *
 * WCAG 1.4.11 sets a 3:1 floor for a focus indicator, so on the light bands
 * the ring was painting and still failing to indicate anything. Flipping to
 * the bg-dark ink already used for K-World label text clears the floor on all
 * five, by a wide margin on four.
 *
 * Set as a custom property on the band root rather than as an `outline-color`
 * rule per surface: custom properties inherit, so a nested light card inside a
 * kw-sky band (the #FFF1D6 case) picks it up for free, and no specificity war
 * with the base rule is possible.
 * ----------------------------------------------------------------------- */
[data-bg-token="studio-light"],
[data-bg-token="kw-sky"],
[data-bg-token="kw-gold"] {
	--mw-btn-focus-ring: var(--mw-color-text-dark, #040420);
}

/* -----------------------------------------------------------------------
 * K-World primary CTA on a studio-dark / studio-violet band (Topic 36
 * CORR-WP1 Item 3)
 *
 * `/k-world/`'s closing cta-band moved off `kw-castle-stone` onto
 * `studio-dark`, and `is_brand` stays `k-world` on that section so the tier
 * keeps its type treatment elsewhere. Left alone, that means
 * `.mw-section--brand-k-world .mw-btn--primary` above would still
 * auto-recolour this button gold (#F4C430) regardless of the band's own
 * token — the rule keys on BRAND, not band — which is exactly the colour
 * the owner ruled out for these two sections ("no gold or yellow or
 * brown"). Deepen the fill to the plain studio violet primary instead,
 * matching every other primary CTA on a studio-dark/violet band site-wide.
 * `studio-violet` is included for symmetry even though no k-world-brand
 * primary CTA sits on it today.
 * ----------------------------------------------------------------------- */
.mw-section--brand-k-world[data-bg-token="studio-dark"] .mw-btn--primary,
.mw-section--brand-k-world[data-bg-token="studio-dark"] .mw-btn--kw-gold,
.mw-section--brand-k-world[data-bg-token="studio-violet"] .mw-btn--primary,
.mw-section--brand-k-world[data-bg-token="studio-violet"] .mw-btn--kw-gold {
	background: var(--mw-color-primary, #6765E8);
	color: var(--mw-color-text-light, #FAF8FF);
}

.mw-section--brand-k-world[data-bg-token="studio-dark"] .mw-btn--primary:hover,
.mw-section--brand-k-world[data-bg-token="studio-dark"] .mw-btn--kw-gold:hover,
.mw-section--brand-k-world[data-bg-token="studio-violet"] .mw-btn--primary:hover,
.mw-section--brand-k-world[data-bg-token="studio-violet"] .mw-btn--kw-gold:hover {
	background: var(--mw-color-primary-hover, #5F5DE2);
	color: var(--mw-color-text-light, #FAF8FF);
}

.mw-section--brand-k-world[data-bg-token="studio-dark"] .mw-btn--primary:active,
.mw-section--brand-k-world[data-bg-token="studio-dark"] .mw-btn--kw-gold:active,
.mw-section--brand-k-world[data-bg-token="studio-violet"] .mw-btn--primary:active,
.mw-section--brand-k-world[data-bg-token="studio-violet"] .mw-btn--kw-gold:active {
	/* Cancels the hover brightness — see `.mw-btn--primary:active` above. */
	filter: none;
	background: var(--mw-color-primary-pressed, #4F4CD6);
}

/* The footer carries no `[data-bg-token]`, so it inherits nothing from the
 * block above — and it is brand-tinted: castle-stone #7A6E5C on K-World pages,
 * near-black #0E0841 on studio pages. The default glow measures 2.29:1 against
 * the stone variant, under the floor, which is where four of the six remaining
 * sub-3:1 rings lived (all footer newsletter submits). The light ink clears it
 * on BOTH footer variants, so one declaration covers the whole footer instead
 * of one per brand. */
.site-footer {
	--mw-btn-focus-ring: var(--mw-color-text-light, #FAF8FF);
}

/* -----------------------------------------------------------------------
 * FIX-WP16 — the five light surfaces that carry links but were never given a
 * ring token. Without this they inherit the `--mw-color-primary-glow`
 * fallback from `style.css:466`, which is a DARK-band value: 1.15–1.95:1 on
 * these fills, under the WCAG 1.4.11 3:1 floor. Same reasoning as the block
 * above; these are simply the surfaces FIX-WP14 had no button on and so
 * never measured.
 *
 * `lore-hub` (#2F5240) and `lore-cosmology` (#4A3B7A) are deliberately
 * ABSENT. They measure 4.01:1 and 4.38:1 against the inherited glow — but
 * that is a BAND-level measurement, and no light inner surface renders on
 * them today. `.mw-section--card-grid.mw-section--brand-lore .mw-card`
 * fills with `--lore-vellum` and is NOT token-scoped, so the first
 * card-grid ever given `bg_token=lore-hub` would render #E5D5B0 cards
 * inheriting the untouched glow at 1.50:1 — the same nested-light-surface
 * trap FIX-WP14's own comment flagged for the #FFF1D6-card-inside-kw-sky
 * case. Re-measure if that day comes; do not read "needs no override" as
 * unconditional.
 *
 * `kw-castle-stone` is absent from THIS block on purpose — it takes LIGHT
 * ink like these five, but it is a separate ratio (2.29:1 vs the inherited
 * glow) on a separate backdrop, not a sixth instance of the "no light inner
 * surface renders on it today" reasoning above. See the dedicated D11 block
 * immediately below this one; do not fold it in here.
 *
 * These five do NOT share one rationale, even though they take one ink.
 * Four are FORCED — light ink fails the floor outright (kw-cream 1.06:1,
 * lore-parchment 1.18:1, lore-vellum 1.38:1, kw-sunset 2.37:1, the last
 * despite this surface rendering white body text). `lore-timeline` is
 * CHOSEN: light ink measures 3.53:1 and passes on its own, but
 * `_cta-band.css:98-101` gives `lore-timeline` a parchment-filled
 * `.mw-btn--primary` (`--lore-parchment` #F2E6CB) with `outline-offset: 2px`
 * — a light `#FAF8FF` ring sitting two pixels from that face measures
 * 1.18:1 against it, a halo rather than a ring. Since this token drives
 * both links and buttons (Task C), dark wins on the composite even though
 * light would have been the higher number for links alone. Do not "complete
 * the set" by reaching for `--lore-parchment` itself as the ring value — it
 * measures 3.005:1, a rounding coin-flip against the floor. */
[data-bg-token="kw-cream"],
[data-bg-token="kw-sunset"],
[data-bg-token="lore-parchment"],
[data-bg-token="lore-vellum"],
[data-bg-token="lore-timeline"] {
	--mw-btn-focus-ring: var(--mw-color-text-dark, #040420);
}

/* -----------------------------------------------------------------------
 * FIX-WP9 / D11 — kw-castle-stone, the 13th and last bg_token, closing the
 * ring universe at 13/13 (see tools/probe-topic-33-clear-the-skies.php
 * Section G — every data-bg-token literal in the theme is now either
 * ring-covered or an explicitly triaged KNOWN_DARK band).
 *
 * kw-castle-stone (#7A6E5C) IS a declared surface — _body.css:61 paints it —
 * so a focusable primary living on it inherits the site-wide
 * `--mw-color-primary-glow` fallback at **2.29:1**, the identical pair
 * FIX-WP17 measured and fixed on the K-World header chrome against this
 * exact backdrop. LIGHT ink is used here, not dark like the five surfaces
 * above, because castle-stone is a MID-TONE fill rather than a light one:
 * `--mw-color-text-light` (#FAF8FF) measures **4.73:1** against it — the
 * same ink and the same published measurement FIX-WP17 established for
 * this backdrop, reused rather than re-derived.
 *
 * NO LONGER ZERO-DELTA — this rule now fires. When it shipped, no call site
 * passed `bg_token="kw-castle-stone"` to a section hosting a focusable
 * primary, so it was recorded as a forward-correct no-op (a permitted delta
 * at the FIX-WP9 sign-off gate, D6). Topic 33 FIX-WP24 Task D moved the
 * /k-world/ closing CTA band onto castle-stone on the owner's selection, and
 * that band carries the "Explore the coloring book" primary — so the ring
 * this block predicted is now the ring that actually renders, measured at
 * 4.73:1 on the live page. The forward-correct call paid off; updating the
 * claim here so the next reader is not told it repaints nothing.
 * ----------------------------------------------------------------------- */
[data-bg-token="kw-castle-stone"] {
	--mw-btn-focus-ring: var(--mw-color-text-light, #FAF8FF);
}