:root {
	/* ---------------------------------------------------------------
	   Ship Inn palette (Figma "Ship Inn - Theme 2").
	   These four brand tokens replace the donor's hardcoded literals
	   (#9A5326 copper, #1d5645 green, #1B2038, #384956) which were
	   scattered through the partials rather than driven from here. */
	--brand-navy: #344453;
	--brand-orange: #B45221;
	--brand-gold: #A1845C;
	--brand-champagne: #E0D3C3;
	--text-muted: #3d4e58;

	/* Page background (Figma "Color") */
	--page-bg: #fdfbfa;

	--primary-dark: var(--brand-navy);
	--primary-lightest: #ffffff;

	/* Button colours (burnt orange) — resting + darken-on-hover */
	--btn-bg: var(--brand-orange);
	--btn-bg-hover: #903F19;
	--btn-radius: 6px;

	/* Contact form field interaction states.
	   Fields are rgba(224,211,195,0.5) (champagne) over the page
	   background #fdfbfa, which composites to ~#EEE7DF (rel. luminance
	   0.807). The old ring values were computed against the donor's
	   #1d5645 green band, which this design removes, so they are
	   recomputed here for WCAG 1.4.11 non-text contrast (3:1 minimum).
	   White is no longer usable as a focus ring — it is 1.03:1 against
	   #fdfbfa. */
	--field-bg: rgba(224, 211, 195, 0.5);
	--field-border: rgba(161, 132, 92, 0.5);
	--field-ring-dark: #344453;
	/* 8.17:1 vs the #EEE7DF field, 9.70:1 vs the #fdfbfa page */
	--field-focus-ring: #B45221;
	/* 4.11:1 vs the #EEE7DF field, 4.88:1 vs the #fdfbfa page */
	--field-focus-ring-width: 3px;
	--field-focus-ring-offset: 2px;
	--field-hover-ring-width: 2px;

	--font-family-base: "Manrope", "Helvetica Neue", Arial, sans-serif;
	--font-family-heading: "Gloock", "Times New Roman", Georgia, serif;

	--font-weight-light: 400;
	--font-weight-heavy: 400;

	--font-size-base: 16px;
	--font-size-large: 23px;
	--font-size-heading: 3.5rem;

	--font-size-h1: 50px;
	--font-size-h2: 55px;
	--font-size-h3: 30px;
	--font-size-h4: 28px;
	--font-size-h5: 23px;
	--font-size-h6: 20px;

	--font-weight-h1: 400;
	--font-weight-h2: 400;
	--font-weight-h3: 400;
	--font-weight-h4: 400;
	--font-weight-h5: 400;
	--font-weight-h6: 400;

	--border-radius: 10px;

	/* Gloock is a serif — the donor's 0.01–0.04em tracking was tuned for
	   the old sans display face and is wrong here. Flat 0 throughout. */
	--letter-spacing-h1: 0;
	--letter-spacing-h2: 0;
	--letter-spacing-h3: 0;
	--letter-spacing-h4: 0;
	--letter-spacing-h5: 0;
	--letter-spacing-h6: 0;
}

body {
	background-color: var(--page-bg);
	font-family: var(--font-family-base);
	font-optical-sizing: auto;
	font-weight: var(--font-weight-light);
	font-size: var(--font-size-base);
	font-style: normal;
}

button,
input,
optgroup,
select,
textarea {
	font-family: var(--font-family-base);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-family-heading);
	font-optical-sizing: auto;
	font-weight: var(--font-weight-heavy);
	color: var(--brand-navy);
}

h1 {
	font-size: var(--font-size-h1);
	font-weight: var(--font-weight-h1);
	letter-spacing: var(--letter-spacing-h1);
}

h2 {
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-h2);
	letter-spacing: var(--letter-spacing-h2);
}

h3 {
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-h3);
	letter-spacing: var(--letter-spacing-h3);
}

h4 {
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-h4);
	letter-spacing: var(--letter-spacing-h4);
}

h5 {
	font-size: var(--font-size-h5);
	font-weight: var(--font-weight-h5);
	letter-spacing: var(--letter-spacing-h5);
}

h6 {
	font-size: var(--font-size-h6);
	font-weight: var(--font-weight-h6);
	letter-spacing: var(--letter-spacing-h6);
}

@media (max-width: 768px) {
	:root {
		--font-size-h1: 30px;
		--font-size-h2: 30px;
		--font-size-h3: 25px;
		--font-size-h4: 20px;
		--font-size-h5: 18px;
		--font-size-h6: 17px;
	}
}