/* ==========================================================================
   LavylitesUSA design tokens (Developer Instruction section 4, GLB-COLOURS, GLB-TYPE).
   The only file where colour, type and spacing values are defined; every other
   stylesheet reads them as var(--name).
   ========================================================================== */

/* Marcellus 400 and Jost 400/500, self-hosted (latin, latin-ext), font-display: swap */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/jost-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/jost-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;
}
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/marcellus-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/marcellus-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 {
	/* Colour */
	--c-page: #F4ECDD;          /* page background */
	--c-cream: #FAF7F0;         /* alternate cream sections */
	--c-card: #FFFFFF;          /* card surface */
	--c-line: #EEE6D4;          /* hairline */
	--c-chip: #DDD3BD;          /* chip, pill and input border */
	--c-ink: #16130F;           /* primary text, buttons, top strip */
	--c-ink-2: #2A251F;         /* headings, button hover */
	--c-muted: #5C564B;         /* secondary text and nav */
	--c-crumb: #6F6A60;         /* breadcrumb */
	--c-gold: #7A5F33;          /* eyebrows, counts, FAQ markers, award lines, rule; small text only */
	--c-blue: #2F5FB3;          /* text links and the active nav item only */
	--c-sale: #8A3B2E;          /* sale price */
	--c-strip-text: #EDE4D2;    /* top strip text */
	--c-on-ink: #FFFFFF;
	--c-medal-hi: #C9B77A;      /* medal placeholder until the award body's artwork is supplied */
	--c-medal-mid: #9E8A4C;
	--c-medal-lo: #7A6A38;

	/* Type families */
	--f-display: 'Marcellus', Georgia, 'Times New Roman', serif;
	--f-text: 'Jost', -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* Type sizes */
	--t-h1-home: 78px;
	--t-h1-inner: 46px;
	--t-h1-product: 54px;
	--t-h2: 28px;
	--t-h2-lg: 30px;
	--t-wordmark: 26px;
	--t-wordmark-foot: 22px;
	--t-series: 21px;
	--t-card-name: 20px;
	--t-faq-q: 20px;
	--t-price-lg: 26px;
	--t-lede-product: 17px;
	--t-body: 16px;
	--t-price: 15px;
	--t-input: 15px;
	--t-foot-link: 14.5px;
	--t-button: 14px;
	--t-small: 14px;
	--t-card-tag: 13.5px;
	--t-nav: 13px;
	--t-note: 13px;
	--t-legal: 12.5px;
	--t-chip: 12.5px;
	--t-label: 12px;
	--t-eyebrow: 11px;
	--t-micro: 10.5px;

	/* Weights, line heights, tracking */
	--w-regular: 400;
	--w-medium: 500;
	--lh-h1: 1.04;
	--lh-title: 1.12;
	--lh-body: 1.75;
	--lh-lede: 1.65;
	--lh-menu: 2.15;
	--ls-wordmark: 5.2px;
	--ls-wordmark-foot: 4.4px;
	--ls-nav: 1.56px;
	--ls-eyebrow: 2.42px;
	--ls-count: 1.68px;
	--ls-foot-head: 1.92px;
	--ls-button: 1.12px;
	--ls-chip: 0.75px;
	--ls-cta: 0.78px;

	/* Spacing and layout */
	--pad-x: 56px;
	--sec-y: 48px;
	--content: 1088px;
	--prose: 720px;
	--lede-w: 600px;
	--search-w: 385px;
	--card-w: 254px;
	--card-media: 226px;
	--card-img: 178px;
	--card-pad: 18px 22px 22px;
	--gap: 24px;
	--frame-w: 480px;
	--frame-h: 600px;
	--body-main: 728px;
	--body-aside: 312px;
	--medal-lg: 190px;
	--medal-sm: 150px;
	--medal-gap: 36px;
	--h2-above: 39px;
	--h2-below: 14px;
	--strip-h: 38px;
	--touch: 44px;

	/* Shape */
	--r-control: 4px;
	--r-pill: 99px;
	--shadow-search: 0 12px 34px rgba(120, 95, 45, 0.14);
	--shadow-medal: 0 10px 24px rgba(80, 60, 20, 0.25);
	--focus: 2px solid var(--c-blue);
}

/* Phone (390 board) */
@media (max-width: 767px) {
	:root {
		--pad-x: 20px;
		--sec-y: 40px;
		--t-h1-home: 40px;
		--t-h1-inner: 34px;
		--t-h1-product: 38px;
		--t-h2: 24px;
		--t-h2-lg: 26px;
		--t-wordmark: 20px;
		--ls-wordmark: 4px;
		--card-w: 167px;
		--card-media: 150px;
		--card-img: 118px;
		--card-pad: 14px 14px 16px;
		--gap: 16px;
		--medal-lg: 96px;
		--medal-sm: 96px;
		--medal-gap: 14px;
		--t-card-name: 17px;
	}
}