/*
 * Hang Tag design tokens. Values from spec section 3; change them here only.
 * Type sizes scale linearly from the mobile value at 360px to the desktop value
 * at 1280px wide. Printed inline in <head> (inc/performance.php).
 */

/* Fallback faces sized to match the web fonts' width (measured: Instrument
   Serif ≈ 73.7% of Georgia, Inter Tight ≈ 95.4% of Arial), so text doesn't
   reflow when the fonts arrive. Fixes the shop title's layout shift. */
@font-face {
	font-family: "Instrument Serif Fallback";
	src: local("Georgia");
	size-adjust: 73.7%;
}

@font-face {
	font-family: "Inter Tight Fallback";
	src: local("Arial");
	size-adjust: 95.4%;
}

:root {
	/* Color */
	--paper: #f4f1ea;
	--tag: #fbfaf6;
	--sand: #eae5db;
	--linen: #e2dcd0;
	--linen-2: #d6cfc2;
	--rule: #dad4c8;
	--rule-strong: #bdb6a8;
	--muted: #5e5a52;
	--ink-2: #3a3832;
	--ink: #1b1a17;
	--cobalt: #2441c9;
	--cobalt-hover: #1c34a6;
	--error: #a3321f;

	/* Families */
	--font-serif: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif;
	--font-sans: "Inter Tight", "Inter Tight Fallback", system-ui, sans-serif;

	/* Type scale: clamp(mobile, fluid, desktop) */
	--fs-display-xl: clamp(56px, calc(56px + 48 * ((100vw - 360px) / 920)), 104px);
	--fs-display: clamp(44px, calc(44px + 28 * ((100vw - 360px) / 920)), 72px);
	--fs-h1: clamp(36px, calc(36px + 24 * ((100vw - 360px) / 920)), 60px);
	--fs-h2: clamp(32px, calc(32px + 12 * ((100vw - 360px) / 920)), 44px);
	--fs-h3: clamp(26px, calc(26px + 6 * ((100vw - 360px) / 920)), 32px);
	--fs-quote: clamp(20px, calc(20px + 4 * ((100vw - 360px) / 920)), 24px);
	--fs-body-l: clamp(17px, calc(17px + 2 * ((100vw - 360px) / 920)), 19px);
	--fs-body: 16px;
	--fs-small: 14px;
	--fs-tag-label: 12px;

	--lh-display-xl: 0.92;
	--lh-display: 1;
	--lh-h1: 1;
	--lh-h2: 1.1;
	--lh-h3: 1.1;
	--lh-quote: 1.25;
	--lh-body: 1.5;
	--lh-small: 1.45;

	--tracking-tag: 0.14em;
	--tracking-tag-card: 0.1em;

	/* Spacing, 4px base */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;

	/* Layout */
	--container: 1280px;
	--gutter: 16px;
	--section-pad: clamp(56px, calc(56px + 40 * ((100vw - 360px) / 920)), 96px);

	/* Radius */
	--radius-photo: 4px;
	--radius-input: 6px;
	--radius-pill: 999px;

	/* Lines */
	--line: 1px solid var(--rule);
	--line-dashed: 1px dashed var(--rule-strong);
	--line-ink: 1px solid var(--ink);

	/* Shadow: the hero quote card only */
	--shadow-quote: 0 10px 30px rgba(27, 26, 23, 0.12);

	/* Motion: color and opacity only */
	--ease: 150ms ease;
}

@media (min-width: 768px) {
	:root {
		--gutter: 32px;
	}
}