/* ==========================================================================
   Veteran Peptide — design tokens
   Light site. Navy + foil gold pulled from the live brand, used for type,
   buttons, and the footer — never as the page background.
   ========================================================================== */

:root {
	/* ---- Brand: navy (live site #0f2435) ---- */
	--navy-950: #060e18;
	--navy-900: #0a1725;
	--navy-800: #0c1426;
	--navy-700: #0f2435;
	--navy-600: #17364e;
	--navy-500: #204768;
	--navy-400: #38648a;
	--navy-100: #e4eaf1;
	--navy-50: #f1f4f9;

	/* ---- Warm neutrals: the page ground, drawn from the brand gold ---- */
	--sand-100: #ece4d7;
	--sand-50: #f6f1e8;

	/* ---- Brand: foil gold (live site #856f4e) ---- */
	--gold-800: #4e4029;
	--gold-700: #6b5638;
	--gold-600: #7a6444;
	--gold-500: #856f4e;
	--gold-400: #a98c5f;
	--gold-300: #c0a87e;
	--gold-200: #ddcbaa;
	--gold-100: #f0e7d5;

	/* The foil. Display type, rules, and hairlines only. */
	--foil: linear-gradient(
		104deg,
		#6b5638 0%,
		#856f4e 14%,
		#ddcbaa 31%,
		#a98c5f 45%,
		#6b5638 58%,
		#c0a87e 76%,
		#856f4e 90%,
		#6b5638 100%
	);
	--foil-soft: linear-gradient(104deg, #856f4e 0%, #ddcbaa 48%, #856f4e 100%);

	/* ---- Semantic surfaces ---- */
	--bg: #f8f5f0;
	--surface: #ffffff;
	--surface-2: #ffffff;
	--surface-3: #f2ece2;
	--panel: #ffffff; /* tile behind product photography */
	--ink: var(--navy-800); /* dark bands: footer, CTA */

	--border: rgb(12 20 38 / 0.1);
	--border-strong: rgb(12 20 38 / 0.2);
	--border-gold: rgb(133 111 78 / 0.4);

	/* ---- Text ---- */
	--text: #0c1426;
	--text-muted: #5a6478;
	--text-subtle: #8a93a6;
	--text-on-dark: #eef2f9;
	--text-muted-on-dark: #a8b4c9;

	/* ---- Action ---- */
	--accent: var(--gold-500);
	--accent-hover: var(--gold-600);
	--accent-active: var(--gold-700);
	--accent-soft: rgb(133 111 78 / 0.1);
	--on-accent: #ffffff;
	--focus: var(--navy-700);

	/* ---- Semantic ---- */
	--success: #0f7a52;
	--success-soft: rgb(15 122 82 / 0.1);
	--warning: #8a5b00;
	--warning-soft: rgb(138 91 0 / 0.1);
	--danger: #b02a35;
	--danger-soft: rgb(176 42 53 / 0.1);

	/* ---- Type scale — matched to the reference build ----
	   H1 Oswald 600 ~72px uppercase · H2 Inter 700 34px · body Inter 16px */
	--step--2: clamp(0.69rem, 0.67rem + 0.1vw, 0.75rem);
	--step--1: clamp(0.8rem, 0.78rem + 0.12vw, 0.875rem);
	--step-0: 1rem; /* 16px body, same as reference */
	--step-1: clamp(1.1rem, 1.05rem + 0.22vw, 1.25rem);
	--step-2: clamp(1.35rem, 1.24rem + 0.5vw, 1.625rem);
	--step-3: clamp(1.65rem, 1.2rem + 1.9vw, 2.125rem); /* reaches the reference's 34px H2 by ~1180px */
	--step-4: clamp(2.1rem, 1.6rem + 2.1vw, 3rem);
	--step-5: clamp(2.75rem, 1.7rem + 4.6vw, 4.48rem); /* 71.7px hero H1 */

	/* ---- Fonts ---- */
	--font-display: "Oswald", "Oswald Fallback", "Arial Narrow", system-ui, sans-serif;
	--font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* ---- Space ---- */
	--space-3xs: 4px;
	--space-2xs: 8px;
	--space-xs: 12px;
	--space-s: 16px;
	--space-m: 24px;
	--space-l: 32px;
	--space-xl: 48px;
	--space-2xl: 64px;
	--space-3xl: 96px;
	--space-4xl: 128px;

	--section-pad: clamp(3.5rem, 7vw, 6.5rem);

	/* ---- Measure / container ---- */
	--measure: 65ch;
	--container: 1240px;
	--container-narrow: 780px;
	--container-wide: 1440px;

	/* ---- Radius ---- */
	--radius-s: 6px;
	--radius-m: 10px;
	--radius-l: 16px;
	--radius-xl: 22px;
	--radius-full: 999px;

	/* ---- Elevation — light UI, so shadows do real work ---- */
	--shadow-s: 0 1px 2px rgb(12 20 38 / 0.06), 0 1px 3px rgb(12 20 38 / 0.08);
	--shadow-m: 0 6px 20px rgb(12 20 38 / 0.08), 0 2px 6px rgb(12 20 38 / 0.05);
	--shadow-l: 0 20px 48px rgb(12 20 38 / 0.13), 0 6px 14px rgb(12 20 38 / 0.07);
	--glow-gold: 0 8px 26px rgb(133 111 78 / 0.28);

	/* ---- Header ---- */
	--header-h: 76px;
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 1024px) {
	:root {
		--header-h: 96px;
	}
}