/**
 * Topdermal Redesign — design tokens
 *
 * Extracted from Georgy's exact Figma CSS pastes across the Home
 * redesign work (Banner/Menu/Hero/Catalog 2026-09-03; Brands/Advantages/
 * Contacts/FAQ 2026-09-04) — not re-derived or approximated. Every
 * component should reference these variables instead of repeating the
 * same raw values; add a new token here the first time a Figma value is
 * confirmed to repeat across 2+ components, not preemptively.
 */

:root {
	/* Typography */
	--td-font-family: 'Instrument Sans', sans-serif;

	--td-fs-section-title: 28px;
	--td-lh-section-title: 36px;
	--td-fw-section-title: 700;

	--td-fs-card-title: 20px;
	--td-lh-card-title: 26px;
	--td-fw-card-title: 700;

	--td-fs-body: 15px;
	--td-lh-body: 24px;
	--td-fw-body: 400;

	--td-fs-body-strong: 15px;
	--td-lh-body-strong: 24px;
	--td-fw-body-strong: 600;

	--td-fs-button: 16px;
	--td-lh-button: 24px;
	--td-fw-button: 600;

	/* Colors */
	--td-color-text: #000000;
	--td-color-accent-purple: #B56ABB;
	--td-color-accent-teal: #2DADC1;
	--td-color-card-bg: #F7F7F7;
	--td-color-card-gradient: linear-gradient(90deg, rgba(243, 130, 254, 0.1) 0%, rgba(156, 136, 254, 0.1) 100%);
	--td-color-button-bg: rgba(0, 0, 0, 0.08);
	--td-color-banner-bg: rgba(0, 0, 0, 0.03);
	--td-color-icon-stroke: rgba(0, 0, 0, 0.5);

	/* Radii */
	--td-radius-card: 24px;
	--td-radius-button: 12px;
	--td-radius-underline: 5px;

	/**
	 * FIXED 2026-09-11 — corrected against Maxim Kislov's (designer)
	 * actual Figma review comments on the live `home-test` build
	 * (`feedback.docx`, 22 numbered items), not the original guessed
	 * rhythm values. `--td-space-section-gap` (24→36px): confirmed 3
	 * separate times independently — Categories→Advantages, Advantages→
	 * Product Tabs, Product Tabs→Contacts all explicitly flagged
	 * "Отступ 36px"/"должен быть 36px". `--td-space-item-gap` (12→24px):
	 * confirmed via "Отступ между такими блоками везде должен быть 24px"
	 * on the product-card grid gap. `--td-space-stack-gap` (20px):
	 * already correct — independently confirmed via "Отступ между
	 * заголовком и описанием везде должно быть 20px", no change needed.
	 * One open question NOT applied here: a separate, smaller gap
	 * (product image spacing) was flagged "12px?" — phrased as a
	 * question by the designer himself, not a confirmed instruction like
	 * the others, so left alone rather than guessed.
	 */
	--td-space-section-gap: 36px;
	--td-space-item-gap: 24px;
	--td-space-stack-gap: 20px;
	--td-space-edge-padding: 24px;

	/* Layout */
	--td-container-width: 1152px;
	--td-button-height: 52px;
	--td-hero-button-height: 69px;
	--td-icon-size: 24px;
	--td-icon-size-lg: 48px;

	/* Breakpoints — reference values for max-width media queries.
	   CSS custom properties can't be used inside @media conditions
	   directly, so these document the agreed values; write the actual
	   media queries with the literal px numbers, kept in sync with
	   this list by convention. */
	--td-bp-desktop: 1440px;
	--td-bp-tablet: 1024px;
	--td-bp-mobile: 390px;
}