/* Design tokens — the one home for every color, type size, rhythm step, and
   duration. Components never hardcode a value these tokens carry. */

@font-face {
	font-family: "Newsreader";
	src: url("../fonts/newsreader-var.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Newsreader";
	src: url("../fonts/newsreader-var-italic.woff2") format("woff2");
	font-weight: 200 800;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

:root {
	/* color palette, named by material, one token per role */
	--emerald: #1b4332;
	--sage: #6c8586;
	--sand: #dcccc0;
	--cream: #f0e6c5;
	--paper: #f3efec;
	--ink: #141004;
	--white: #ffffff;
	--notice-amber: #8a5a00;
	--signal-red: #8c2f22;
	--success-green: #2f6b3c;

	/* line tints — the ground each product line stages on; white-ground
	   photography melts into these under multiply */
	--tint-d9: var(--cream);
	--tint-thca: color-mix(in srgb, var(--paper) 78%, var(--cream)); /* warm, off the cool sage — the committed warm palette (John, cutover render gate) */
	--tint-cbd: var(--sand);
	--tint-default: var(--paper);

	/* type — mobile values; the 768px token switches the scale */
	--font-display: "Newsreader", georgia, serif;
	--font-ui: "Inter", system-ui, sans-serif;
	--text-display-xl: clamp(3.25rem, 8vw, 7.5rem);
	--leading-display-xl: 1.02;
	--text-display: 2.75rem;
	--text-h1: 2.25rem;
	--text-h2: 1.75rem;
	--text-h3: 1.25rem;
	--text-body: 1rem;
	--text-small: 0.875rem;
	--text-kicker: 0.8125rem;
	--leading-display: 1.15;
	--leading-body: 1.6;
	--measure: 68ch;
	--kicker-tracking: 0.08em;

	/* rhythm — 4px grid, numbered by units of 4 */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-24: 6rem;
	--space-32: 8rem;
	--container: 70rem;
	/* the checkout's utility plane: form entry and close reading want a wider
	   desk than the browsing container — John's ruling, founder session */
	--container-checkout: 80rem;
	--gutter: clamp(1.25rem, 4vw, 2.5rem);

	/* edges — printed-label sharpness */
	--radius: 2px;
	/* the checkout soften (founder session R10): John's ladder — one value
	   for every checkout surface (cards, field boxes, tip controls, the
	   place-order button), stepped only on his call. 5px matched the
	   payment-card corner John pointed at. The rest of the site keeps the
	   printed-label 2px. */
	--radius-field: 5px;
	--rule-ink: 1px solid var(--ink);

	/* elevation — the one soft, Ink-based depth every floating surface shares
	   (the pinned alert card, the mini-cart and account panels) */
	--shadow-elevation: 0 16px 40px rgb(20 16 4 / 12%);
	/* the whisper rung (founder session R12): card-grade depth for the three
	   checkout section cards only — Domino's puts it on major sections, the
	   old site's tip box wore the plugin's. Ladder up on John's call. */
	--shadow-card: 0 4px 14px rgb(20 16 4 / 12%);

	/* motion grammar — the two tuning knobs John adjusts live sit first:
	   the overture scale multiplies every beat, the reveal duration is the
	   scroll motion's single speed control (out-animations run at 60%) */
	--overture-scale: 2.5;
	--duration-reveal: 950ms;
	--ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
	--duration-micro: 180ms;
	--stagger: 110ms;
	--reveal-rise: 24px;

	/* chrome — 6rem per John's live review: a more substantial bar (+9%) */
	--header-height: 6rem;
}

@media (min-width: 768px) {
	:root {
		--text-display: 4.5rem;
		--text-h1: 3rem;
		--text-h2: 2.25rem;
		--text-h3: 1.5rem;
		--text-body: 1.0625rem;
	}
}