/*
 * Mara Quinn Coaching — design tokens.
 *
 * Every color is derived from the theme.json palette rather than restated
 * here, so the editor's color picker, an editor-authored paragraph and the
 * theme's own bands can never drift apart. theme.json is the single source;
 * this file only names the roles.
 *
 * Scale, motion and layout values come from the reference design in
 * .design/index.html and have no theme.json equivalent.
 */

:root {
	/* ---- palette roles (bound to theme.json presets) ---- */
	--mq-paper: var(--wp--preset--color--paper, #F4EFE6);
	--mq-ink: var(--wp--preset--color--ink, #1B1A17);
	--mq-acc: var(--wp--preset--color--terracotta, #A9492B);
	--mq-acc-light: var(--wp--preset--color--terracotta-light, #C98A77);
	--mq-acc-text: var(--wp--preset--color--terracotta-deep, #8B3C23);
	--mq-sand: var(--wp--preset--color--sand, #E4DCCD);
	--mq-bone: var(--wp--preset--color--bone, #E9E1D2);
	--mq-sage: var(--wp--preset--color--sage, #7A8B6F);
	--mq-body: var(--wp--preset--color--body-text, #3E3A34);
	--mq-muted: var(--wp--preset--color--muted, #5C574E);
	--mq-cream: var(--wp--preset--color--cream, #CFC8BB);
	--mq-stone: var(--wp--preset--color--stone, #B8B0A2);
	--mq-white: var(--wp--preset--color--white, #FFFFFF);

	--mq-acc-soft: rgba(169, 73, 43, 0.18);

	/*
	 * Non-text boundaries. The reference draws these at rgba(ink,.18)–.20,
	 * which composites to 1.44:1 on paper and 1.53:1 on white — below the
	 * 3:1 WCAG 1.4.11 asks of a control boundary, and Lighthouse does not
	 * test it. 0.48 is the first step that clears 3:1 on both grounds.
	 */
	--mq-rule-strong: rgba(27, 26, 23, 0.48);
	--mq-rule: rgba(27, 26, 23, 0.14);
	--mq-rule-on-ink: rgba(244, 239, 230, 0.18);

	/* ---- type ---- */
	--mq-display: var(--wp--preset--font-family--display, Fraunces, Georgia, serif);
	--mq-sans: var(--wp--preset--font-family--sans, "Instrument Sans", system-ui, sans-serif);

	/* ---- layout ----
	 *
	 * 1376 = the reference's 1280 plus its two 48px gutters.
	 *
	 * .design/index.html never sets `box-sizing: border-box`, so its
	 * `max-width: 1280px` is a CONTENT width and the padding is added
	 * outside it — the sections are 1376px on the page. WordPress sets
	 * border-box globally, which quietly made every section 96px narrower
	 * and rewrapped every headline. Measured against the reference in the
	 * same browser: its hero copy column is 737px, ours was 681px.
	 */
	--mq-max: 1376px;
	--mq-gutter: 48px;
	--mq-cols: repeat(12, minmax(0, 1fr));
	--mq-colgap: 24px;

	/* ---- radii ---- */
	--mq-r-card: 28px;
	--mq-r-panel: 40px;
	--mq-r-chart: 32px;
	--mq-r-pill: 999px;

	/* ---- shadow ---- */
	--mq-shadow-card: 0 30px 60px -30px rgba(27, 26, 23, 0.45);
	--mq-shadow-book: 0 40px 70px -35px rgba(27, 26, 23, 0.55);
	--mq-shadow-chip: 0 18px 40px -18px rgba(27, 26, 23, 0.35);
	--mq-shadow-chart: 0 30px 80px -50px rgba(27, 26, 23, 0.4);

	/* ---- easing ---- */
	--mq-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--mq-ease-draw: cubic-bezier(0.7, 0, 0.2, 1);
}

@media (max-width: 720px) {
	:root {
		--mq-gutter: 20px;
		--mq-r-panel: 28px;
		--mq-r-chart: 24px;
	}
}