/*
 * Hartwell design tokens for the WordPress pages a customer reaches from the
 * Next.js storefront (/handlekurv/, /kassen/, /min-konto/) — loaded on every
 * front-end page of this theme (functions.php).
 *
 * MIRROR of hartwell-test/app/globals.css: same variable names, same values.
 * Change them there first, then here.
 *
 * Manrope everywhere; the logo (an image) is the only serif element. The font
 * is self-hosted like next/font does in Next (the same latin-subset variable
 * file, 200–800), no request to Google at runtime.
 */

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Colours (app/globals.css :root) */
	--hw-ink: #1a1a1a;
	--hw-paper: #faf9f7;
	--hw-ink-muted: #6b6b6a; /* MIRROR --color-ink-muted: small grey text, ≥ 4.5:1 on white/paper/linen */
	--hw-linen: #f0ece6;
	--hw-sage: #bab8a9;
	--hw-white: #ffffff;
	--hw-gold: #c9a227;

	/* Typography tokens (app/globals.css) */
	--font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;

	--type-display-weight: 300;
	--type-display-size: 32px;
	--type-display-lh: 1.1;
	--type-display-ls: -0.01em;
	--type-h1-weight: 300;
	--type-h1-size: 32px;
	--type-h1-lh: 1.15;
	--type-h1-ls: -0.01em;
	--type-h2-weight: 300;
	--type-h2-size: 27px;
	--type-h2-lh: 1.2;
	--type-h2-ls: -0.005em;
	--type-h3-weight: 400;
	--type-h3-size: 21px;
	--type-h3-lh: 1.25;
	--type-h3-ls: 0em;
	--type-h4-weight: 400;
	--type-h4-size: 18px;
	--type-h4-lh: 1.3;
	--type-h4-ls: 0em;
	--type-title-weight: 500;
	--type-title-size: 15px;
	--type-title-lh: 1.35;
	--type-title-ls: 0em;
	--type-price-weight: 400;
	--type-price-size: 25px;
	--type-price-lh: 1.2;
	--type-price-ls: 0em;

	--type-body-lg-size: 17px;
	--type-body-lg-lh: 1.75;
	--type-body-size: 15px;
	--type-body-lh: 1.6;
	--type-body-sm-size: 14px;
	--type-body-sm-lh: 1.6;
	--type-caption-size: 12px;
	--type-caption-lh: 1.35;
	--type-eyebrow-weight: 500;
	--type-eyebrow-size: 12px;
	--type-eyebrow-ls: 0.2em;
	--type-button-weight: 500;
	--type-button-size: 14px;
	--type-button-ls: 0.1em;
	--type-strong-weight: 600;
	--type-quote-weight: 300;
}

@media (min-width: 640px) {
	:root {
		--type-display-size: 53px;
		--type-h1-size: 43px;
		--type-h2-size: 32px;
		--type-h3-size: 25px;
		--type-h4-size: 20px;
		--type-title-size: 16px;
		--type-price-size: 27px;
	}
}