/*
Styleguide Tokens
- Colors: --bg #FFFFFF, --text #111111, --muted #555555, --accent #9A2A2A, --line #EAEAEA, --focus #0A84FF
- Type: Headline serif (system), Body sans (system). H1 36px, H2 28px, H3 22px; Body 18px; LH 1.6–1.7
- Spacing scale (rem): 0.25 / 0.5 / 1 / 1.5 / 2 / 3 / 4
*/

@layer tokens, base, layout, components, utilities;

@layer tokens {
	:root {
		--bg: #ffffff;
		--text: #111111;
		--muted: #555555;
		--accent: #9a2a2a;
		--line: #eaeaea;
		--focus: #0a84ff;

		--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
		--font-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

		--h1: 36px;
		--h2: 28px;
		--h3: 22px;
		--body: 18px;

		--lh-head: 1.25;
		--lh-body: 1.65;

		--space-1: 0.25rem;
		--space-2: 0.5rem;
		--space-3: 1rem;
		--space-4: 1.5rem;
		--space-5: 2rem;
		--space-6: 3rem;
		--space-7: 4rem;

		--container: 68ch;
		--radius-pill: 9999px;
		--radius: 12px;
		--shadow-soft: 0 1px 2px rgba(0,0,0,0.06);
	}
}

@layer base {
	*, *::before, *::after { box-sizing: border-box; }
	html { color-scheme: light; }
	body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--body); line-height: var(--lh-body); }
	img, svg, video { display: block; max-width: 100%; height: auto; }
	a { color: var(--accent); text-decoration: none; }
	a:hover, a:focus { text-decoration: underline; text-underline-offset: 2px; }
	:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
	::selection { background: #fdecec; }

	/* Ensure headings use serif stack as per design system */
	h1, h2, h3 { font-family: var(--font-serif); line-height: var(--lh-head); margin: 0 0 var(--space-3); color: var(--text); } /* CHANGED: comment clarifies serif enforcement */
	h1 { font-size: var(--h1); }
	h2 { font-size: var(--h2); }
	h3 { font-size: var(--h3); }
	p { margin: 0 0 var(--space-4); color: var(--text); }
	.muted { color: var(--muted); }
}

@layer layout {
	.container { max-width: var(--container); margin-inline: auto; padding: 0 var(--space-3); }
	.site-header { border-bottom: 1px solid var(--line); }
	.site-header .container { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-3); }
	.brand { font-family: var(--font-serif); font-size: 20px; color: var(--text); }
	.site-nav a { margin-left: var(--space-3); color: var(--text); }
	.site-main { padding: var(--space-6) 0; }
	.site-footer { border-top: 1px solid var(--line); padding: var(--space-4) 0; }
	.footer-nav a { margin-right: var(--space-3); color: var(--muted); }

	/* Add generous whitespace to sections by default */
	.site-main > section { padding-block: var(--space-6); } /* CHANGED: add section padding per tokens */
}

@layer components {
	.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
	.skip-link:focus { left: var(--space-3); top: var(--space-3); width: auto; height: auto; background: #fff; padding: var(--space-2) var(--space-3); box-shadow: var(--shadow-soft); }

	.hero { padding: var(--space-6) 0 var(--space-5); border-bottom: 1px solid var(--line); }
	.hero p.lead { max-width: 60ch; color: var(--muted); }

	/* Desktop grid for hero only above 900px */
	@media (min-width: 900px) {
		.hero { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: var(--space-4); padding-block: var(--space-6); } /* CHANGED: move grid into min-width */
	}
	.hero__content { max-width: 60ch; }
	.hero__figure { margin: 0; }
	.hero__figure img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: var(--radius); /* CHANGED: ensure rounded corners */
		box-shadow: 0 8px 20px rgba(0,0,0,.08); /* CHANGED: ensure soft shadow */
		object-fit: cover;
		aspect-ratio: 3 / 4;
	}
	@media (max-width: 900px) {
		/* Stack content on mobile */
		.hero { display: block; } /* CHANGED: disable grid on small screens */
		.hero__content { margin-bottom: var(--space-4); } /* CHANGED: spacing between text and image on mobile */
		.hero__figure { order: 2; }
	}
	.hero a.button:focus-visible,
	.hero__figure img:focus-visible {
		outline: 2px solid #0A84FF;
		outline-offset: 3px;
	}

	.cta { display: inline-block; background: var(--accent); color: #fff; padding: 0.75rem 1.25rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-soft); transition: background-color .2s ease; } /* CHANGED: CTA ensured pill button */
	.cta:hover { text-decoration: none; filter: brightness(0.94); }
	.cta:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

	.cards { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-5); }
	@media (min-width: 720px) { .cards { grid-template-columns: repeat(3, 1fr); } }
	.card { border: 1px solid var(--line); border-radius: 12px; padding: var(--space-4); }
	.card h3 { margin-bottom: var(--space-2); }
	.card p { color: var(--muted); }

	form { max-width: 48ch; }
	label { display: block; font-size: 16px; margin-bottom: var(--space-2); }
	input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; height: 44px; font: inherit; color: var(--text); background: #fff; }
	textarea { height: 132px; padding-top: 10px; padding-bottom: 10px; resize: vertical; }
	.field { margin-bottom: var(--space-4); }
	.error { color: #8b0000; font-size: 15px; margin-top: var(--space-2); }

	/* Form: file input & checkbox styles */
	input[type="file"] { height: auto; padding: 10px; }
	.form-row--checkbox label { display: flex; gap: var(--space-2); align-items: center; }
	.form-row--checkbox input[type="checkbox"] { width: 18px; height: 18px; }

	.fade-in { opacity: 0; animation: fadeIn .6s ease forwards; }
	@media (prefers-reduced-motion: reduce) { .fade-in { animation: none; opacity: 1; } }
	@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
}

@layer utilities {
	.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
}