/**
 * Tokenii design system-ului Laboratorul de Sănătate.
 *
 * Sursa: Figma `DYy8WqD3dPFIRzq54CxBJl`, nodul `4:33` + variabilele citite prin
 * MCP pe 7 oct 2026. Numele Figma ale variabilelor stau în comentariu lângă
 * fiecare token, ca să se poată căuta în ambele direcții.
 *
 * 🔑 Mărimile de text sunt FLUIDE, nu pe breakpoint: macheta are două cadre,
 * 360px și 1440px, iar `clamp()` dă exact valoarea din Figma la ambele lățimi
 * și interpolează între ele. Un breakpoint ar fi inventat o a treia valoare,
 * care nu e în design.
 *
 * ⚠️ Fontul titlurilor: Figma cere PP Neue Montreal (licență comercială, fișiere
 * pe care nu le avem). Brandul a trecut pe Switzer (`brand.md`). Aici e Switzer,
 * dintr-o singură variabilă (`--lds-font-heading`), până decide Seba (WQ21).
 */

/* ── Fonturi ──────────────────────────────────────────────────────────────── */

/*
 * Figtree, variabil (wght 300..900), găzduit la noi: fără cerere către Google
 * înainte de consimțământ. `latin-ext` e obligatoriu: ă, ș, ț (și ő, ű pentru
 * HU) stau acolo, nu în `latin`.
 */
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/figtree-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: "Figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/figtree-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: "Figtree";
	font-style: italic;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/figtree-latin-italic.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: "Figtree";
	font-style: italic;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/figtree-latin-ext-italic.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;
}
/* Switzer Medium: singura greutate pe care o cer titlurile (H1-H5, toate Medium). */
@font-face {
	font-family: "Switzer";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/switzer-medium.woff2") format("woff2");
}

:root {
	/* ── Culori (Figma „Colors”) ───────────────────────────────────────── */
	--lds-primary: #2b6353;        /* Mountain green · green-fill-primary-default · titluri mari, butoane principale */
	--lds-secondary: #00422a;      /* Dark green · dark-green-text-fill · text important, navbar, iconițe */
	--lds-tertiary: #5a7c70;       /* Military green · military-green-inputs-placeholder-fill-default · corp de text, prețuri vechi */
	--lds-accent-1: #008f5b;       /* Emerald green · green-fill-secondary-default · hover pe butoane, preț pe card */
	--lds-accent-2: #aad1c3;       /* Whirlpool green · green-card-fill-hover · chenar card la hover, bara de progres */
	--lds-bg: #e7eee9;             /* Light green · light-grey-fill-default · fundal butoane navbar, coș, căutare, testimoniale */
	--lds-border: #f0f0f0;         /* Light grey · grey-border-fill-primary · chenar și fundal de card */
	--lds-border-2: #e0e0e0;       /* Grey · grey-border-fill-secondary · chenar pe fundal primar */
	--lds-bg-page: #fcfefb;        /* Very light green · white-bg · fundalul tuturor paginilor */
	--lds-bg-card: #ffffff;        /* Pure white · pure-white-card-fill-default · carduri, pop-up-uri */
	--lds-info-bg: #e8f8ff;        /* blue-card-fill-default · butoane mici pe card (șterge, compară) */
	--lds-label-new: #518dd1;      /* Blue · blue-label-fill-surface · „NOU” */
	--lds-label-cat: #4467b9;      /* Darker blue · darker-blue-label-fill-surface · categorii, blog */
	--lds-label-offer: #cf4f4d;    /* Red · red-label-fill-surface · reducere */
	--lds-label-cat-2: #880808;    /* Blood red · eticheta de categorie 2 pe pagina de produs */
	--lds-label-cat-3: #cf744d;    /* Orange · eticheta de categorie 3 pe pagina de produs */

	/* ── Fonturi ───────────────────────────────────────────────────────── */
	--lds-font-heading: "Switzer", "Figtree", system-ui, sans-serif;
	--lds-font-body: "Figtree", system-ui, sans-serif;

	/* ── Mărimi de text: 360px → 1440px (Figma Typography Mobile / Desktop) */
	--lds-fs-h1: clamp(2rem, calc(2rem + 40 * (100vw - 22.5rem) / 1080), 4.5rem);
	--lds-fs-h2: clamp(1.5rem, calc(1.5rem + 24 * (100vw - 22.5rem) / 1080), 3rem);
	--lds-fs-h3: clamp(1.25rem, calc(1.25rem + 20 * (100vw - 22.5rem) / 1080), 2.5rem);
	--lds-fs-h4: clamp(1.125rem, calc(1.125rem + 14 * (100vw - 22.5rem) / 1080), 2rem);
	--lds-fs-h5: clamp(1rem, calc(1rem + 8 * (100vw - 22.5rem) / 1080), 1.5rem);
	--lds-fs-subtitle: clamp(1rem, calc(1rem + 4 * (100vw - 22.5rem) / 1080), 1.25rem);
	--lds-fs-body-xl: clamp(1rem, calc(1rem + 4 * (100vw - 22.5rem) / 1080), 1.25rem);
	--lds-fs-body: clamp(0.875rem, calc(0.875rem + 2 * (100vw - 22.5rem) / 1080), 1rem);
	--lds-fs-body-s: clamp(0.75rem, calc(0.75rem + 2 * (100vw - 22.5rem) / 1080), 0.875rem);
	--lds-fs-label: clamp(0.75rem, calc(0.75rem + 2 * (100vw - 22.5rem) / 1080), 0.875rem);
	--lds-fs-body-xs: clamp(0.625rem, calc(0.625rem + 2 * (100vw - 22.5rem) / 1080), 0.75rem);
	--lds-fs-pretitle: 0.875rem;
	--lds-fs-button: 1rem;
	--lds-fs-link: 1rem;

	/* ── Spații (multiplii de 4 din machete) ───────────────────────────── */
	--lds-space-1: 0.25rem;  /* 4 */
	--lds-space-2: 0.5rem;   /* 8 */
	--lds-space-3: 0.75rem;  /* 12 */
	--lds-space-4: 1rem;     /* 16 */
	--lds-space-5: 1.5rem;   /* 24 */
	--lds-space-6: 2rem;     /* 32 */
	--lds-space-7: 3rem;     /* 48 */
	--lds-space-8: 4rem;     /* 64 */
	--lds-space-9: 6rem;     /* 96 */

	/* ── Layout (Homepage 1440: conținut 1344 cu 48 margine; 360: 328 cu 16) */
	--lds-container: 84rem;                                                          /* 1344 */
	--lds-gutter: clamp(1rem, calc(1rem + 32 * (100vw - 22.5rem) / 1080), 3rem);       /* 16 → 48 */
	--lds-section-gap: clamp(4rem, calc(4rem + 32 * (100vw - 22.5rem) / 1080), 6rem);  /* 64 → 96 între secțiuni */
	--lds-title-gap: clamp(1rem, calc(1rem + 16 * (100vw - 22.5rem) / 1080), 2rem);    /* 16 → 32 titlu → conținut */
	--lds-header-h: 5rem;                                                            /* 80 desktop; 104 pe mobil, la modulul Header */

	/* ── Colțuri ───────────────────────────────────────────────────────── */
	--lds-radius-pill: 999px;
	--lds-radius-xl: 1.5rem;   /* 24 card desktop */
	--lds-radius-l: 1.25rem;   /* 20 card mobil */
	--lds-radius-m: 1rem;      /* 16 interiorul cardului, dropdown */
	--lds-radius-s: 0.75rem;   /* 12 */
	--lds-radius-xs: 0.5rem;   /* 8 */

	/* ── Mișcare ───────────────────────────────────────────────────────── */
	--lds-transition: 160ms ease;
}

/* ── Bază ─────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--lds-bg-page);
	color: var(--lds-tertiary);
	font-family: var(--lds-font-body);
	font-size: var(--lds-fs-body);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.01em;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }

/* ── Stilurile de text, cu numele din Figma ───────────────────────────────── */

h1, h2, h3, h4, h5,
.lds-h1, .lds-h2, .lds-h3, .lds-h4, .lds-h5 {
	margin: 0;
	font-family: var(--lds-font-heading);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	color: var(--lds-secondary);
}
h1, .lds-h1 { font-size: var(--lds-fs-h1); }
h2, .lds-h2 { font-size: var(--lds-fs-h2); }
h3, .lds-h3 { font-size: var(--lds-fs-h3); }
h4, .lds-h4 { font-size: var(--lds-fs-h4); }
h5, .lds-h5 { font-size: var(--lds-fs-h5); }

.lds-subtitle   { font-size: var(--lds-fs-subtitle); font-weight: 500; line-height: 1.4; letter-spacing: 0; }
.lds-body-xl    { font-size: var(--lds-fs-body-xl); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.lds-body       { font-size: var(--lds-fs-body); font-weight: 400; line-height: 1.4; letter-spacing: 0.01em; }
.lds-body-s     { font-size: var(--lds-fs-body-s); font-weight: 500; line-height: 1; letter-spacing: 0.01em; }
.lds-body-mi    { font-size: var(--lds-fs-body); font-weight: 500; font-style: italic; line-height: 1.4; letter-spacing: 0.01em; }
.lds-body-s-mi  { font-size: var(--lds-fs-body-s); font-weight: 500; font-style: italic; line-height: 1.4; letter-spacing: 0.01em; }
.lds-label-text { font-size: var(--lds-fs-label); font-weight: 600; line-height: 1; letter-spacing: 0.01em; }
.lds-body-xs    { font-size: var(--lds-fs-body-xs); font-weight: 500; line-height: 1; letter-spacing: 0.02em; }
.lds-pretitle   { font-size: var(--lds-fs-pretitle); font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: uppercase; }
.lds-button-text { font-size: var(--lds-fs-button); font-weight: 500; line-height: 1; letter-spacing: 0; }
.lds-link       { font-size: var(--lds-fs-link); font-weight: 500; line-height: 1; letter-spacing: 0.01em; }

/* ── Layout ───────────────────────────────────────────────────────────────── */

.lds-container {
	width: 100%;
	max-width: calc(var(--lds-container) + 2 * var(--lds-gutter));
	margin-inline: auto;
	padding-inline: var(--lds-gutter);
}
.lds-section + .lds-section { margin-top: var(--lds-section-gap); }

.lds-sr-only {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}