/*
 * Design tokens from the Figma variables. Components use these, never raw values.
 * Source: design/spec/_styles.txt.
 */
:root {
	/* Colour */
	--c-text: #3b3634;          /* Text Primary / Dark */
	--c-text-2: #515151;        /* Text Secondary */
	--c-light: #fefefe;         /* Light */
	--c-line: #d9d9d9;          /* Outline - Light */
	--c-line-2: #e3e3e3;
	--c-bg: #fcfcf3;            /* page cream */
	--c-beige: #f0ede1;         /* On Surface: beige bands */
	--c-dark: #3b3634;
	--c-accent: #411958;        /* purple: primary button hover, link hover */
	--c-muted: #6b6b6b;         /* small labels, placeholders (Figma #777, darkened to pass AA contrast on cream and beige) */
	--c-success: #1f9842;       /* form success messages */

	/* Type */
	--f-display: "SN Display", Cochin, Georgia, serif;
	--f-body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Display sizes (Cochin in Figma → --f-display), from design/spec/_styles.txt */
	--t-display-xl: 120px; --lh-display-xl: 1;     /* Home hero "WEAVING" (Figma node 624:5310) */
	--t-display-l: 72px;   --lh-display-l: 82px;   /* large statements, e.g. "OUR VIEW OF WEAVING" */
	--t-display: 60px;     --lh-display: 72px;     /* page hero titles */
	--t-title-l: 40px;     --lh-title-l: 56px;     /* large section titles */
	--t-title: 32px;       --lh-title: 40px;       /* Title */
	--t-title-s: 20px;     --lh-title-s: 30px;     /* Title - Small */
	--t-body: 16px;        --lh-body: 20px;        /* Body - Regular */
	--t-body-s: 14px;      --lh-body-s: 18px;      /* Body - Small */
	--t-sub: 12px;         --lh-sub: 16px;         /* Subtext - Regular */
	--t-button: 14px;                              /* Button */

	/* Layout: 1280 desktop frames have 72px side margins and a 1136px content column. */
	--wrap: 1136px;
	--wrap-narrow: 752px;
	--gutter: 72px;
	--space-s: 40px;
	--space-m: 64px;
	--space-l: 96px;
	--radius: 0;
	--header-h: 140px;
}

@media (max-width: 1023px) {
	:root {
		--gutter: 40px;
		--space-l: 72px;
		--space-m: 48px;
		--header-h: 74px;
	}
}

@media (max-width: 767px) {
	:root {
		--gutter: 16px;
		/* Mobile frames keep titles at 32/40 and set page heroes at 40/56. */
		--t-display-xl: 56px;
		--t-display-l: 40px;  --lh-display-l: 56px;
		--t-display: 40px;    --lh-display: 56px;
		--t-title-l: 32px;    --lh-title-l: 40px;
		--space-s: 24px;
		--space-m: 40px;
		--space-l: 56px;
	}
}