/* Design tokens — Figma variables (Stylesheet 76:953). */
:root {
	/* Colours */
	--c-light: #faf9f9;
	--c-white: #ffffff;
	--c-black: #1f272c;
	--c-gray: #707070;
	--c-orange: #f58748;
	--c-orange-hover: #f26722; /* Hover state in Stylesheet */
	--c-yellow: #f7ca46;
	--c-green: #aed757;
	--c-red: #f26965;
	--c-line: rgba(31, 39, 44, 0.04);
	--c-orange-tint: #fdece2;

	/* Type */
	--font-head: "Recoleta", "Fraunces", Georgia, serif;
	--font-body: "Inter", -apple-system, "Segoe UI", Arial, sans-serif;

	--fs-h1: clamp(2rem, 1.2rem + 3.2vw, 3.5rem);      /* 32 → 56 */
	--fs-h2: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);    /* 24 → 40 */
	--fs-body: 1rem;       /* 16 / 24 */
	--fs-small: 0.75rem;   /* 12 */
	--ls-head: -0.02em;
	--ls-body: -0.02em;

	/* Shape */
	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-xl: 40px;

	/* Shadows — Figma "Drop" / "Drop cookies" */
	--shadow-drop: 0 1px 3px rgba(0, 0, 0, 0.02), 0 5px 5px rgba(0, 0, 0, 0.02), 0 11px 7px rgba(0, 0, 0, 0.01);
	--shadow-cookies: 0 7px 15px rgba(0, 0, 0, 0.08), 0 27px 27px rgba(0, 0, 0, 0.07), 0 60px 36px rgba(0, 0, 0, 0.04), 0 107px 43px rgba(0, 0, 0, 0.01);

	/* Layout */
	--container: 1232px;  /* 1440 − 2×104 */
	--gutter: 1.5rem;     /* 24 — Figma mobile 69:5774 */
	--section-y: clamp(4rem, 3rem + 4vw, 7.5rem);
}

@media (min-width: 768px) {
	:root { --gutter: 2rem; }
}