@layer reset, base, tokens;

/* ============ FONT FACES ============ */
@font-face {
	font-family: "Golos Text";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/golos-text-var.woff2") format("woff2");
}

@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 600 800;
	font-display: swap;
	src: url("../fonts/playfair-display-var.woff2") format("woff2");
}

@font-face {
	font-family: "Playfair Display";
	font-style: italic;
	font-weight: 600 600;
	font-display: swap;
	src: url("../fonts/playfair-display-italic-var.woff2") format("woff2");
}

/* ============ TOKENS ============ */
@layer tokens {
	:root {
		--color-paper: #FCFBF8;
		--color-ink: #101828;
		--color-ink-soft: #3C4456;
		--color-brass: #B98A2F;
		--color-brass-deep: #92691E;
		--color-line: #E3E0D6;
		--color-paper-dim: #F3F1E9;
		--color-shadow-soft: rgba(16, 24, 40, 0.12);

		--font-display: "Playfair Display", Georgia, "Times New Roman", serif;
		--font-text: "Golos Text", "Segoe UI", Arial, sans-serif;

		--container-w: 1280px;
		--container-pad: 40px;

		--fs-hero: clamp(40px, 6.6vw, 104px);
		--fs-h2: clamp(30px, 3.6vw, 52px);
		--fs-h3: clamp(21px, 2.2vw, 28px);
		--fs-lede: clamp(17px, 1.4vw, 20px);
		--fs-body: 17px;
		--fs-small: 14px;
		--fs-eyebrow: 13px;

		--space-xs: 8px;
		--space-sm: 16px;
		--space-md: 24px;
		--space-lg: 40px;
		--space-xl: 64px;
		--space-2xl: 96px;
		--space-3xl: 140px;

		--rail-h: 420px;
		--duration-base: 220ms;
		--ease-base: cubic-bezier(0.4, 0, 0.2, 1);
	}
}

/* ============ RESET ============ */
@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
		padding: 0;
	}

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

	html:focus-within {
		scroll-behavior: smooth;
	}

	@media (prefers-reduced-motion: reduce) {
		html:focus-within {
			scroll-behavior: auto;
		}
	}

	body {
		min-height: 100vh;
		font-family: var(--font-text);
		font-size: var(--fs-body);
		line-height: 1.6;
		color: var(--color-ink);
		background: var(--color-paper);
		-webkit-font-smoothing: antialiased;
	}

	img,
	picture,
	svg {
		max-width: 100%;
		height: auto;
		max-height: 78vh;
		object-fit: cover;
		display: block;
	}

	ul,
	ol {
		list-style: none;
	}

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

	button,
	input,
	textarea,
	select {
		font: inherit;
		color: inherit;
		background: none;
		border: none;
	}

	table {
		border-collapse: collapse;
	}

	:focus-visible {
		outline: 2px solid var(--color-brass);
		outline-offset: 3px;
	}
}