/**
 * Design tokens — the bridge between theme.json and the landing-page CSS.
 *
 * The section stylesheets were written against plain custom properties
 * (--color-primary, --font-display, …). Rather than rewrite every rule, each
 * token is re-pointed at the matching theme.json preset. Changing a colour in
 * Appearance > Editor > Styles therefore re-themes the whole page, and a child
 * theme or a style variation can override any single token here.
 */

:root {
	/* ── Palette ─────────────────────────────────────────────────────────────
	   Favoured Buddy brand: Navy #203A72, Yellow #F4C542, White #FFFFFF.
	   Yellow is a LIGHT fill — white on it is 1.6:1 — so anything sitting on
	   --color-primary takes navy instead (6.8:1). That is --on-primary. */
	--color-primary: var(--wp--preset--color--brand-yellow, #F4C542);
	--color-secondary: var(--wp--preset--color--brand-navy, #203A72);
	--color-accent: var(--wp--preset--color--brand-yellow, #F4C542);
	--color-text: var(--wp--preset--color--text, #203A72);
	--color-muted: color-mix(in srgb, var(--color-secondary) 78%, transparent);
	--color-bg: var(--wp--preset--color--base, #FFFFFF);
	--color-surface: var(--wp--preset--color--surface, #F4F5F8);
	--color-dark: var(--wp--preset--color--brand-navy, #203A72);
	--color-line: color-mix(in srgb, var(--color-secondary) 16%, transparent);
	--on-dark: var(--wp--preset--color--on-dark, #FFFFFF);
	--on-dark-muted: rgba(255, 255, 255, .72);
	--on-primary: var(--wp--preset--color--brand-navy, #203A72);
	--form-bg: var(--wp--preset--color--base, #FFFFFF);
	--form-text: var(--wp--preset--color--text, #203A72);

	/* ── Type ─────────────────────────────────────────────────────────────── */
	--font-display: var(--wp--preset--font-family--display, "Fredoka", system-ui, sans-serif);
	--font-body: var(--wp--preset--font-family--body, "Poppins", system-ui, sans-serif);

	/* ── Shape ────────────────────────────────────────────────────────────── */
	--btn-radius: var(--wp--custom--btn-radius, 12px);
	--btn-shadow: 4px 4px 0 var(--color-secondary);
	--card-radius: var(--wp--custom--card-radius, 20px);
	--img-radius: var(--wp--custom--img-radius, 18px);

	/* ── Rhythm ───────────────────────────────────────────────────────────── */
	--maxw: 1200px;
	--gutter: var(--wp--custom--gutter, clamp(1.25rem, 4.5vw, 2.5rem));
	--section-y: var(--wp--custom--section-y, clamp(3.5rem, 8vw, 7rem));
	--stickybuy-h: var(--wp--custom--stickybuy-h, 86px);
}

/* color-mix() is Baseline 2023. On anything older the mixes above resolve to
   nothing, which would drop muted text and hairlines to transparent, so the
   two that matter get a literal fallback first. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	:root {
		--color-muted: #5B6A8C;
		--color-line: #D5DBE7;
	}
}