/**
 * Xativia design tokens.
 *
 * Values from docs/handoff.md section 5 (Figma Style Guide 2297:1258).
 * Components use these custom properties only, never raw hex values.
 *
 * Fluid values interpolate linearly between a 375px and a 1660px viewport:
 * clamp(mobile, intercept + slope * 100vw, desktop). Every font size is an
 * even number at both ends.
 */

/* Fonts -------------------------------------------------------------------
 * Self-hosted variable WOFF2 from Google Fonts, latin + latin-ext subsets.
 * Bricolage Grotesque has wght (200-800) and opsz (12-96) axes; optical size
 * follows the font size automatically (font-optical-sizing: auto), which is how
 * Figma renders it: a 72px title is about 9% narrower than at opsz 14.
 * DM Sans has a wght axis (100-1000). The declared ranges limit both to the
 * weights the design uses.
 * Licences: assets/fonts/*-OFL.txt (SIL Open Font License 1.1).
 */

@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 700 800;
	font-display: swap;
	src: url("../fonts/bricolage-grotesque-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: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 700 800;
	font-display: swap;
	src: url("../fonts/bricolage-grotesque-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("../fonts/dm-sans-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: "DM Sans";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("../fonts/dm-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metric-matched fallbacks: the swap from Arial to the web font causes no
 * layout shift. Overrides computed from the font files (hhea metrics and
 * average advance width against Arial / Arial Bold). */

@font-face {
	font-family: "Bricolage Grotesque Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 700 800;
	size-adjust: 103.73%;
	ascent-override: 89.65%;
	descent-override: 26.03%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "DM Sans Fallback";
	src: local("Arial"), local("ArialMT");
	font-weight: 400 600;
	size-adjust: 104.96%;
	ascent-override: 94.51%;
	descent-override: 29.54%;
	line-gap-override: 0%;
}

:root {
	/* Colors */
	--color-orange: #e8552b;      /* primary actions, labels, highlights */
	--color-orange-dark: #c9431d; /* hover / pressed */
	--color-yellow: #f5c330;      /* accents, badges, slider dots */
	--color-green: #1f6b3a;       /* brand surfaces, gradients */
	--color-green-dark: #123d26;  /* hero, footer, dark cards */
	--color-green-deep: #0b2a1a;  /* deep shadows */
	--color-cream: #fbf6ec;       /* page background */
	--color-white: #fff;          /* cards, inputs */
	--color-ink: #10140f;         /* headings, body text */
	--color-muted: #777;          /* secondary text */
	--color-placeholder: #767676; /* input placeholders: 4.54:1 on white (Figma muted #777 is 4.48:1) */
	--color-line: #e2d6bf;        /* borders, dividers */
	--color-black: #000;          /* dark buttons */
	--color-photo: #faf2e2;       /* product photo backdrop (Product 2162:694), the packshot background */

	/* Gradients (Style Guide swatches 2297:1468 / 1471 / 1474): corner to corner,
	 * top left to bottom right, stops at 1/7 and 6/7. Figma reports 154.32deg on
	 * the 416x200 swatch, which is that box's diagonal; "to bottom right" keeps
	 * the diagonal on boxes of any aspect ratio. */
	--gradient-hero: linear-gradient(to bottom right, var(--color-green-dark) 14.286%, var(--color-green) 85.714%);
	--gradient-promo: linear-gradient(to bottom right, var(--color-orange) 14.286%, var(--color-yellow) 85.714%);
	--gradient-newsletter: linear-gradient(to bottom right, var(--color-orange-dark) 14.286%, var(--color-orange) 85.714%);

	/* Why Xativia card. The frame fill is a rotated photo that does not export
	 * cleanly, so these are CSS approximations sampled from the Figma renders of
	 * 2061:341 (desktop: light top right, light swoosh bottom right around a dark
	 * centre) and 2288:1504 (stacked: light top right and right edge).
	 * docs/designer-questions.md item 18. */
	--gradient-why:
		radial-gradient(60% 100% at 102% -10%, #73c08a 0%, rgb(100 175 122 / 75%) 35%, rgb(60 120 75 / 0%) 100%),
		radial-gradient(44% 70% at 46% 48%, #153a19 0%, rgb(21 58 25 / 80%) 55%, rgb(22 60 26 / 0%) 100%),
		radial-gradient(38% 70% at 78% 72%, rgb(74 140 92 / 95%) 0%, rgb(66 128 82 / 55%) 55%, rgb(60 120 75 / 0%) 100%),
		linear-gradient(172deg, #2a6636 0%, #1d4a24 40%, #143918 75%, #123415 100%);
	/* Newsletter card (2061:575, 2289:1271): a rotated photo fill as well, so a
	 * CSS approximation sampled from the Figma render. It is brighter than the
	 * Style Guide swatch --gradient-newsletter. docs/designer-questions.md item 20. */
	--gradient-newsletter-card:
		radial-gradient(60% 90% at 28% 85%, #fe6608 0%, rgb(254 102 8 / 0%) 100%),
		radial-gradient(45% 60% at 0% 0%, rgb(250 52 3 / 55%) 0%, rgb(250 52 3 / 0%) 100%),
		linear-gradient(to right, #fe5a07 0%, #fe6108 50%, #fd5206 75%, #fb4004 100%);
	/* Category banner (2156:642): a photo fill whose transform does not export,
	 * so a CSS approximation sampled from the Figma render: a dark green round
	 * shape on the left over light green. docs/designer-questions.md item 22. */
	--gradient-category:
		radial-gradient(34% 140% at 0% 50%, #4aaa6b 72%, rgb(74 170 107 / 0%) 100%),
		linear-gradient(90deg, #7edd9f 30%, #86e5a8 55%, #70d192 100%);
	/* Product description cards (2162:771 / 776 / 781): loading fallback under
	 * the Figma fill images (template-parts/product/description.php), sampled
	 * from the Figma render. */
	--gradient-desc-1:
		radial-gradient(55% 75% at 100% 0%, #65b17c 0%, rgb(101 177 124 / 0%) 100%),
		radial-gradient(40% 55% at 85% 80%, rgb(66 128 82 / 75%) 0%, rgb(66 128 82 / 0%) 100%),
		linear-gradient(170deg, #2a6736 0%, #1d4c25 40%, #153c1a 70%, #123515 100%);
	--gradient-desc-2:
		radial-gradient(60% 50% at 55% 0%, #8beaac 0%, rgb(139 234 172 / 0%) 100%),
		linear-gradient(180deg, #7bd99b 0%, #82e1a3 45%, #74d395 75%, #4fae70 100%);
	--gradient-desc-3:
		radial-gradient(45% 60% at 0% 0%, #f4791a 0%, rgb(244 121 26 / 0%) 100%),
		radial-gradient(50% 40% at 40% 100%, rgb(249 150 30 / 80%) 0%, rgb(249 150 30 / 0%) 100%),
		linear-gradient(to bottom right, #f99a1f 0%, #fdb529 30%, #fdc22c 60%, #fcb629 100%);
	/* Title card loading fallback, under the exported image (title-card.css).
	 * Cart and checkout title card (2186:1063): a rotated photo fill as well,
	 * so a CSS approximation sampled from the Figma render: dark green on the
	 * left and centre, a light green sweep rising to the top right.
	 * docs/designer-questions.md item 27. */
	--gradient-title-card:
		radial-gradient(42% 150% at 100% 0%, #7ccb93 0%, rgb(108 190 132 / 85%) 30%, rgb(70 140 90 / 0%) 75%),
		radial-gradient(60% 120% at 62% -10%, #14361a 0%, rgb(20 54 26 / 85%) 45%, rgb(20 54 26 / 0%) 80%),
		radial-gradient(55% 90% at 78% 115%, #4f9a63 0%, rgb(79 154 99 / 0%) 100%),
		linear-gradient(90deg, #235a2d 0%, #183f1d 35%, #173c1c 60%, #2f6e3d 100%);
	--gradient-why-stacked:
		radial-gradient(100% 35% at 100% 0%, #78c48d 0%, rgb(100 175 122 / 60%) 45%, rgb(60 120 75 / 0%) 100%),
		linear-gradient(90deg, rgb(88 158 106 / 0%) 55%, rgb(88 158 106 / 25%) 78%, rgb(88 158 106 / 85%) 100%),
		linear-gradient(180deg, #2a6636 0%, #1d4a24 35%, #153a19 70%, #133616 100%);

	/* Spacing */
	--space-xs: 8px;
	--space-sm: 16px;
	--space-md: 24px;
	--space-lg: 40px;
	--space-xl: 64px;
	--space-2xl: 96px;
	--space-3xl: 120px;

	/* Radius */
	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-xl: 32px;
	--radius-pill: 999px;
	--radius-section: clamp(28px, 24.4981px + 0.9339vw, 40px); /* hero, banners, newsletter */

	/* Layout */
	--container-max: 1280px;
	--container-gutter: 20px; /* mobile; fluid from 768, see the media queries at the end */
	--header-min-content: 1180px; /* desktop header: logo + nav + utilities */
	--section-space: clamp(64px, 47.6576px + 4.358vw, 120px);
	--section-space-m: clamp(64px, 54.6615px + 2.4903vw, 96px); /* category description, Q&A, reviews (2156:848) */
	--section-space-s: clamp(48px, 38.6615px + 2.4903vw, 80px); /* under the category Q&A (2156:868) */
	/* Distance from the content edge to the screen edge: the gutter, or more once the
	 * container stops growing. --scrollbar is set by navigation.js (0 without JS). */
	--scrollbar: 0px;
	--bleed: max(var(--container-gutter), (100vw - var(--scrollbar) - var(--container-max)) / 2);

	/* Font families */
	--font-display: "Bricolage Grotesque", "Bricolage Grotesque Fallback", arial, sans-serif;
	--font-body: "DM Sans", "DM Sans Fallback", arial, sans-serif;

	/* Type scale: size / line height / letter spacing (mobile 375 -> desktop 1660) */
	--text-display-xl: clamp(44px, 28.8249px + 4.0467vw, 96px);
	--leading-display-xl: 0.95;
	--tracking-display-xl: -2px;

	--text-hero: clamp(44px, 35.8288px + 2.179vw, 72px); /* hero title 2060:76 / 2288:1160 */
	--leading-hero: 0.96;
	--tracking-hero: -2px;

	--text-display-l: clamp(36px, 27.8288px + 2.179vw, 64px);
	--leading-display-l: 1;
	--tracking-display-l: -1.5px;

	--text-h2: clamp(32px, 27.3307px + 1.2451vw, 48px);
	--leading-h2: 1.05;
	--tracking-h2: -1px;

	--text-h3: clamp(24px, 22.8327px + 0.3113vw, 28px);
	--leading-h3: 1.15;
	--tracking-h3: -0.5px;

	--text-h4: clamp(18px, 17.4163px + 0.1556vw, 20px);
	--leading-h4: 1.2;
	--tracking-h4: -0.2px;

	--text-body-l: clamp(16px, 14.8327px + 0.3113vw, 20px);
	--leading-body-l: 1.5;

	/* 14px below 768, 16px from 768 (media query at the end): the homepage
	 * mobile frame 2286:3402 sets body text at 14px; it wins over the handoff
	 * table's 16 (open-decisions "Handoff vs Figma" row 17). */
	--text-body-m: 14px;
	--leading-body-m: 1.5;

	--text-body-s: 14px;
	--leading-body-s: 1.45;

	--text-label-m: 16px; /* buttons */
	--leading-label-m: 1.2;

	/* Text typed into form fields (inputs, selects, textareas): 16px at every
	 * width, so iOS does not zoom into a tapped field and the viewport needs no
	 * maximum-scale (decision 14.29). */
	--text-field: 16px;

	--text-label-s: 12px; /* eyebrows, tags: uppercase */
	--leading-label-s: 1.2;
	--tracking-label-s: 0.5px;

	/* Font weights */
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;
	--weight-extrabold: 800;

	/* Icon sizes */
	--icon-inline: 16px;
	--icon-ui: 20px;
	--icon-feature: 24px;

	/* Overlays (mega menu 2084:514, mobile menu 2304:1268) */
	--shadow-panel: 0 24px 48px rgb(0 0 0 / 12%);
	--shadow-header: 0 4px 16px rgb(0 0 0 / 8%); /* sticky header, not designed */
	--shadow-card-hover: 0 12px 28px rgb(0 0 0 / 12%); /* card hover lift, not designed */
	--color-dim: rgb(0 0 0 / 35%); /* "Page dim" in the mobile menu frame */

	/* Controls */
	--button-height: 52px;
	--icon-button-size: 48px;
}

/* Gutter: 20px on mobile (below 768), then fluid from 20px at 768 to 190px at
 * 1660, so there is no jump at the breakpoint. */
@media (min-width: 768px) {
	:root {
		--container-gutter: clamp(20px, -126.368px + 19.0583vw, 190px);
		--text-body-m: 16px;
	}
}

/* One gutter for every section, header and footer included, so all content
 * shares the same left and right edge. From 1280 (desktop header) the gutter
 * narrows only as far as the header needs: at least 1180px of content.
 * 1660: 190px, 1512: 166px, 1386: 103px, 1280: 50px. */
@media (min-width: 1280px) {
	:root {
		--container-gutter: clamp(20px, min(-126.368px + 19.0583vw, (100vw - var(--header-min-content)) / 2), 190px);
	}
}