/*
 * Design tokens — tangens-tokens.md. Type, spacing and radius clamps pass exactly through the
 * artboards' values at 390 and 1440, bounded by the documented minimum and maximum.
 * Values are copied from the document; change them there first.
 */

:root {
	/* §1 Colour */
	--ink: #111111;
	--graphite: #5a5a5a;
	--stone: #858585;
	--canvas: #ffffff;
	--sand: #f1eee6;
	--mist: #f8f8f8;
	--line: #e6e3dc;
	--line-sand: #c7c1b2;
	--success: #2f6b45;
	--danger: #b42318;

	/* §2 Type — sizes */
	--font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
	--fs-display: clamp(2.25rem, 1.7857rem + 1.9048vw, 6.5rem);
	--fs-h1: clamp(1.875rem, 1.5500rem + 1.3333vw, 4.75rem);
	--fs-h2: clamp(1.5rem, 1.3143rem + 0.7619vw, 3.125rem);
	--fs-h3: clamp(1.25rem, 1.1107rem + 0.5714vw, 2.5rem);
	--fs-h4: clamp(1.0625rem, 0.9929rem + 0.2857vw, 1.6875rem);
	--fs-lead: clamp(1rem, 0.9536rem + 0.1905vw, 1.5rem);
	--fs-body: clamp(1rem, 0.9768rem + 0.0952vw, 1.25rem);
	--fs-meta: clamp(0.875rem, 0.8518rem + 0.0952vw, 1.125rem);
	--fs-eyebrow: clamp(0.8125rem, 0.7893rem + 0.0952vw, 1.125rem);

	/* §2 Type — tracking and line height */
	--tracking-eyebrow: 0.16em;       /* controls */
	--tracking-label: 0.18em;         /* section labels */
	--lh-display: 1.1;
	--lh-h1: 1.1;
	--lh-h2: 1.15;
	--lh-h3: 1.2;
	--lh-h4: 1.2;
	--lh-lead: 1.5;
	--lh-body: 1.6;                   /* range 1.55–1.75; components set their own within it */
	--lh-meta: 1.4;
	--lh-list: 1.7;                   /* spec and descriptor lists */

	/* §3 Spacing */
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: clamp(1.25rem, 1.1571rem + 0.3810vw, 2.0625rem);
	--space-4: clamp(1.625rem, 1.4857rem + 0.5714vw, 2.875rem);
	--space-5: clamp(2.5rem, 2.1286rem + 1.5238vw, 5.75rem);
	--space-6: clamp(4rem, 3.2571rem + 3.0476vw, 10.5rem);
	--space-7: clamp(5rem, 4.2571rem + 3.0476vw, 12.5rem);

	/* §4 Radius */
	--radius: clamp(0.25rem, 0.2036rem + 0.1905vw, 0.625rem);
	--radius-swatch: calc(var(--radius) * 0.66);

	/* §5 Layout */
	--container-pad: clamp(1rem, 5.5vw, 14rem);
	--cap: 1280px;                    /* the checkout shell and the About illustration only */
	--usp-gap: clamp(2.45rem, 1.2rem + 5.333vw, 14rem);

	/* §6 Chrome */
	--hairline: 1px;
	--touch-min: 44px;
	--header-h: clamp(3.4786rem, 2.943rem + 2.286vw, 8.4286rem);
	--logo-header: clamp(2.3589rem, 1.957rem + 1.714vw, 6.0714rem);
	--logo-footer: 3rem;              /* fixed, as the artboards draw it: 48 from 768 */
	--logo-footer-mobile: 3.5rem;     /* 56 at 767 and below */
	--icon-social: 1.3125rem;         /* fixed 21 at both widths */
	--icon-triptych: 3.75rem;

	/* §7 Surface */
	--scrim-hero: linear-gradient(rgba(0, 0, 0, 0.38), transparent);
	--scrim-hero-mobile: linear-gradient(rgba(0, 0, 0, 0.42), transparent); /* below 768, 150px */
	--scrim-video: linear-gradient(to top, rgba(0, 0, 0, 0.58), transparent);
	--overlay-statement: rgba(0, 0, 0, 0.28);
	--overlay-danish: rgba(0, 0, 0, 0.30);
	--overlay-drawer: rgba(0, 0, 0, 0.35);

	/* §8 Motion */
	--dur-hover: 320ms;
	--dur-panel: 260ms;               /* drawers and menu panels: 200–300ms */
	--ease: ease;
	--hover-scale: 1.02;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-hover: 0ms;
		--dur-panel: 0ms;
	}
}