/* =========================================================================
   Boyle Built — Design Tokens & Base Styles

   Breakpoint strategy: mobile-first, with two min-width breakpoints:

     Mobile:  0–600px    (default, no media query)
     Tablet:  601–1024px (min-width: 601px)
     Desktop: 1025px+    (min-width: 1025px)

   The Figma frames at 390 / 768 / 1440 are the visual design targets for
   each range, not the breakpoint cutoffs themselves. Every component
   stylesheet added in later phases must use these same two min-width
   values rather than the Figma frame widths.
   ========================================================================= */

:root {
	/* --- Colour tokens (exact values from the approved specification) --- */
	--color-bg: #faf8f5;
	--color-ink: #1c2018;
	--color-body-muted: #4e5649;
	--color-dark-green-1: #1c2417;
	--color-dark-green-2: #273122;
	--color-dark-green-3: #2d3b28;
	--color-border-dark: #374532;
	--color-primary-green: #4b5b3e;
	--color-gold: #8f7f57;
	--color-border-light: #e8ece6;
	--color-footer-bg: #242424;
	--color-text-light: #faf8f5;
	--color-text-muted-lt1: #d4d9d0;
	--color-text-muted-lt2: #b8c0b2;
	--color-text-muted-lt3: #8a9087;
	--color-text-muted-lt4: #4a524a;
	--color-nav-muted-alt: #a39272;
	--color-icon-ring-bg: #f0f4ee;
	--color-testimonial-nav-border: #c8d0c2;

	/* --- Typography --- */
	--font-display: 'Cormorant Garamond', Georgia, serif;
	--font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

	/* --- Spacing (mobile default) --- */
	--space-section-h: 16px;
	--space-section-v: 56px;
	--space-card-gap: 24px;

	/* --- Radii --- */
	--radius-button: 2px;
	--radius-card: 4px;
	--radius-card-testimonial-mobile: 6px;
}

@media (min-width: 601px) {
	:root {
		--space-section-h: 32px;
		--space-section-v: 80px;
		--space-card-gap: 16px; /* component CSS may override up to 20px where specified */
	}
}

@media (min-width: 1025px) {
	:root {
		--space-section-h: 40px;
		--space-section-v: 80px;
		--space-card-gap: 16px;
	}
}

/* =========================================================================
   Reset / base element styles
   ========================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
}

img,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

ul[class],
ol[class] {
	list-style: none;
	margin: 0;
	padding: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 500;
	margin: 0;
}

/* Utility for visually-hidden, screen-reader-only content (e.g. carousel
   arrow labels, skip links) — used throughout later phases. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}