@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/fraunces-normal-latin.woff2") format("woff2");
}

@font-face {
	font-family: "Fraunces";
	font-style: italic;
	font-weight: 400 600;
	font-display: swap;
	src: url("../fonts/fraunces-italic-latin.woff2") format("woff2");
}

@font-face {
	font-family: "Mulish";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/mulish-normal-latin.woff2") format("woff2");
}

:root {
	--ww-color-coral: #e55e4a;
	--ww-color-coral-dark: #c0432f;
	--ww-color-coral-deep: #8f2e1f;
	--ww-color-coral-soft: #f4c8bd;
	--ww-color-coral-mark: rgb(229 94 74 / 0.28);
	--ww-color-coral-line: rgb(229 94 74 / 0.52);
	--ww-color-cream: #fbf4ef;
	--ww-color-cream-2: #f7eae2;
	--ww-color-ink: #2a2320;
	--ww-color-ink-soft: #5a4f49;
	--ww-color-white: #ffffff;
	--ww-color-border: rgb(143 46 31 / 0.15);
	--ww-color-teal: #5dcaa5;
	--ww-color-teal-dark: #0f6e56;

	--ww-font-body: "Mulish", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--ww-font-display: "Fraunces", Georgia, serif;

	--ww-space-1: 0.25rem;
	--ww-space-2: 0.5rem;
	--ww-space-3: 0.75rem;
	--ww-space-4: 1rem;
	--ww-space-5: 1.25rem;
	--ww-space-6: 1.5rem;
	--ww-space-8: 2rem;
	--ww-space-10: 2.5rem;
	--ww-space-12: 3rem;
	--ww-space-16: 4rem;
	--ww-space-20: 5rem;
	--ww-space-24: 6rem;

	--ww-radius-sm: 0.5rem;
	--ww-radius-md: 0.75rem;
	--ww-radius-lg: 1rem;
	--ww-radius-pill: 999px;

	/* Shared layout roles. The existing editorial canvas remains at 64rem until its dedicated visual pass. */
	--ww-width-reading: 54rem;
	--ww-width-content: 68rem;
	--ww-width-wide: 76rem;
	--ww-reading: var(--ww-width-reading);
	--ww-editorial: 64rem;
	--ww-wide: var(--ww-width-wide);
	--ww-container-gutter: 2rem;

	/* Section rhythm: compact, standard, and ample. */
	--ww-section-compact: 3rem;
	--ww-section-standard: 4.5rem;
	--ww-section-ample: 6rem;

	--ww-border-subtle: 1px solid var(--ww-color-border);
	--ww-shadow-soft: 0 1.25rem 3.5rem rgb(42 35 32 / 0.11);
	--ww-transition: 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 60rem) {
	:root {
		--ww-container-gutter: 1.35rem;
		--ww-section-compact: 2.25rem;
		--ww-section-standard: 3rem;
		--ww-section-ample: 4rem;
	}
}