/*
 * Design tokens from the Figma file (VcVdn4pqTklI2nWkc2wwZ9).
 * Figma is drawn at 1920px. Sizes scale with the viewport up to the
 * Figma value; the lower clamp bounds are provisional until the mobile
 * design arrives.
 */

:root {
	/* Colors (Figma variables) */
	--color-forest-a: #003c32;
	--color-forest-b: #00241e;
	--color-olive: #6c8048;
	--color-cooper-1: #d48f66;
	--color-cooper-2: #e0af89;
	--color-hillside: #d7ff91;
	--color-stone: #cdd7e1;
	--color-sky: #a5e1ff;
	--color-white: #ffffff;
	--color-image-overlay: rgb(0 0 0 / 0.4);

	/* Font families from the Adobe Fonts kit (inc/assets.php); the system fonts show until it loads. */
	--font-serif: brando, Georgia, "Times New Roman", serif;
	--font-sans: brando-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Font weights (Brando style names) */
	--fw-extralight: 200;
	--fw-light: 300;
	--fw-regular: 400;
	--fw-text: 500;
	--fw-semibold: 600;

	/* Font sizes: Figma px / 19.2 = vw at 1920 */
	--fs-150: clamp(48px, 7.8125vw, 150px);
	--fs-100: clamp(36px, 5.2083vw, 100px);
	--fs-35: clamp(18px, 1.8229vw, 35px);
	--fs-20: clamp(15px, 1.0417vw, 20px);
	--fs-14: clamp(12px, 0.7422vw, 14.25px);

	/* Line heights and letter spacing (Figma text styles) */
	--lh-headline: 0.85;
	--lh-subheadline: 0.88;
	--lh-body: 1;
	--lh-sans: 1.25;
	--ls-headline: -0.0067em;
	--ls-subheadline: -0.005em;
	--ls-nav: 0.01em;
	--ls-caps: 0.25em;

	/* Layout: 12 columns, 40px margins and gutters at 1920 */
	--columns: 12;
	--gutter: clamp(16px, 2.0833vw, 40px);

	/* Spacing scale taken from the Figma layout */
	--space-10: clamp(6px, 0.5208vw, 10px);
	--space-20: clamp(12px, 1.0417vw, 20px);
	--space-40: clamp(16px, 2.0833vw, 40px);
	--space-80: clamp(32px, 4.1667vw, 80px);
	--space-140: clamp(56px, 7.2917vw, 140px);
	--space-180: clamp(72px, 9.375vw, 180px);
	--space-200: clamp(80px, 10.4167vw, 200px);

	/* Shapes and strokes */
	--radius: 4px;
	--stroke-accent: 6px;
	--stroke-hairline: 1px;
	--dot-size: 8px;
	--dot-gap: 4px;

	/* Motion: provisional until the designer gives the page transition timing */
	--duration-page: 800ms;
	--ease-page: cubic-bezier(0.22, 1, 0.36, 1);
	--duration-fade: 600ms;
}