/*
 * Design tokens — Peptide Tech desktop design system (normalized).
 * Source: "PT webdesign: Design System (desktop)". Figma fractions are
 * intentionally NOT reproduced; see section B of that document.
 *
 * Rule: components use these tokens; no raw hex / px from Figma in components.
 */

/* Inter variable (latin + latin-ext), self-hosted. */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
	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;
}

/* U+2190 (←), U+2192 (→) and U+2197 (↗) are missing from the Latin subset; this tiny Inter subset (same family, opsz 14, wght axis) supplies them so menu and button arrows match the label. */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-arrow-wght-normal.woff2?v=2") format("woff2-variations");
	unicode-range: U+2190, U+2192, U+2197;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
	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 {
	/* ---- Color roles ------------------------------------------------ */
	--color-bg: #ffffff;
	--color-surface-1: #fafcff;
	--color-surface-2: #f0f6ff;
	--color-surface-3: #e7f0ff;

	--color-text-heading: #000000;
	--color-text-body: #181818;
	--color-text-brand: #13266b;
	--color-text-accent: #254ad1;
	--color-muted: #73a6ff;

	--color-action: #1437b9;
	/* Hover is not defined in Figma. Derived from the existing brand scale. */
	--color-action-hover: var(--color-text-brand);
	--color-on-action: #ffffff;

	--color-border-strong: #9bbfff;
	--color-border-soft: #c0d7ff;
	--color-placeholder: #757575; /* Figma value, not part of the palette. */

	--opacity-secondary: 0.75;
	--opacity-tertiary: 0.5;
	--opacity-decor: 0.1;

	/* ---- Typography ------------------------------------------------- */
	--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--fs-display-xl: 96px; /* statement headline */
	--fs-display-lg: 72px;
	--fs-display-md: 60px;
	--fs-display-sm: 36px;
	--fs-h2: 48px;
	--fs-h3: 24px;
	--fs-body: 20px;
	--fs-caption: 16px;
	--fs-label-sm: 14px;

	--fw-regular: 400;
	--fw-medium: 500;

	--lh-display-xl: 1.05;
	--lh-display-lg: 1.1;
	--lh-heading: 1.2; /* 16–60px roles: follows rendered Figma boxes, not the "100" token value */
	--lh-body: 1.3;

	--ls-tight: -0.03em; /* every role except caps labels */
	--ls-label: 0.1em;
	--ls-label-sm: 0.05em;

	/* ---- Spacing (px) ------------------------------------------------ */
	--space-1: 8px;
	--space-2: 12px;
	--space-3: 16px;
	--space-4: 20px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 40px; /* section heading -> content */
	--space-8: 48px;
	--space-9: 72px;
	--space-10: 120px; /* between sections */

	/* ---- Layout ------------------------------------------------------ */
	--container: 1340px;
	--container-narrow: 1160px;
	/* The approved desktop composition: the widest any header/footer content gets. Above it, extra width is outer whitespace. */
	--composition: 1440px;
	/* 50px at the 1440px design width. Below that it scales down to a 16px floor:
	   a structural fallback, NOT an approved mobile value. */
	--gutter: clamp(16px, 3.4722vw, 50px);

	/* ---- Responsive units ------------------------------------------------
	 * --m: 1 "mobile px" = 1px at 390px, scaling fluidly 320px -> 767px (0.82px -> 1.97px). Use for
 *      gutters, containers and spacing so the mobile layout keeps growing to the breakpoint.
 *      --ms: --m capped at 1.25px (reached at 488px). Use for font, icon and control sizes so they
 *      do not double at 767px while gutters keep growing.
	 * --d: 1 "desktop px" = 1px at 1440px, scaling down to 768px and CAPPED at 1px,
	 *      so nothing grows past the 1440px design.
	 * Use as calc( N * var(--m) ) / calc( N * var(--d) ).
	 */
	--m: clamp(0.8205px, 0.25641vw, 1.9667px);
	--ms: min(var(--m), 1.25px);
	--d: clamp(0.5333px, 0.069444vw, 1px);

	--section-gap: var(--space-10);
	--grid-gap: var(--space-4);
	--grid-gap-product: 44px; /* 4 x 302 + 3 x 44 = 1340 */

	/* ---- Radius ------------------------------------------------------ */
	--radius-sm: 12px;
	--radius-md: 16px;
	--radius-xl: 48px;
	--radius-pill: 9999px;

	/* ---- Borders & shadows ------------------------------------------ */
	--border-strong: 1px solid var(--color-border-strong);
	--border-soft: 1px solid var(--color-border-soft);
	--shadow-card: 0 4px 120px rgba(206, 225, 255, 0.5);
	--shadow-soft: 0 4px 60px rgba(192, 215, 255, 0.25);

	/* ---- Controls ---------------------------------------------------- */
	--control-height: 58px; /* standard button */
	--control-height-lg: 60px; /* product buy row */
	--chip-height: 42px;

	/* ---- Motion ------------------------------------------------------ */
	--transition: 0.2s ease;
}

/* Mobile composition (320-767px): 20px side margin at the 390px reference. */
@media (max-width: 767.98px) {
	:root {
		--gutter: calc(20 * var(--m));
	}
}