/*
 * Mistyfly design tokens = the values of the approved design.
 * Elementor Global Colors / Fonts use the same values (see docs/DEVELOPER.md → Elementor kit).
 */

:root {
	/* Colour */
	--mf-ink: #0F2A26;        /* text, dark sections, dark buttons */
	--mf-ink-2: #1B3D37;      /* dark hover */
	--mf-night: #0C1E22;      /* hucho dark */
	--mf-muted: #55625E;      /* secondary text */
	--mf-line: #E4E7E2;       /* borders */
	--mf-field: #F2F3EF;      /* light sections, inputs */
	--mf-paper: #FFFFFF;
	--mf-lime: #C9F07A;       /* primary accent */
	--mf-lime-hover: #D8F79A;
	--mf-lime-soft: #E9F8C8;
	--mf-green: #2F8A3B;      /* dots, stars, success */
	--mf-warm: #F6D9A8;       /* secondary tag */
	--mf-error: #B42318;

	/* Type */
	--mf-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mf-serif: "Instrument Serif", Georgia, serif;
	--mf-h1: clamp(44px, 5.6vw, 84px);
	--mf-h2: clamp(36px, 4.4vw, 56px);
	--mf-h3: 24px;
	--mf-body: 16px;
	--mf-small: 13px;
	--mf-track-tight: -0.04em;

	/* Space & shape */
	--mf-container: 1220px;
	--mf-gutter: 24px;
	--mf-section: 88px;
	--mf-radius-s: 12px;
	--mf-radius-m: 22px;
	--mf-radius-l: 28px;
	--mf-frame: 14px;         /* inset of the rounded hero / CTA cards */
}

@media (max-width: 1024px) {
	:root { --mf-section: 72px; }
}
@media (max-width: 767px) {
	:root { --mf-section: 56px; --mf-gutter: 16px; --mf-frame: 8px; --mf-radius-l: 22px; }
}