/**
 * Ebene 2 – Semantische Tokens (responsive)
 *
 * Zeiger auf Primitive. Breakpoints ändern ausschließlich die REFERENZ,
 * nie den Wert eines Primitivs. Line-Heights werden per calc() aus der
 * jeweiligen Font-Size abgeleitet und folgen damit jedem Breakpoint
 * automatisch – ohne eigene Media-Query.
 *
 * Breakpoints (desktop-first, in em – folgen der Browser-Schriftgröße):
 *   Desktop  : Standard
 *   Tablet   : max-width 64em    (1024px)
 *   Mobile   : max-width 48.75em (780px)
 *   Breit    : min-width 100em   (1600px)
 * CSS-Variablen sind in Media-Queries nicht erlaubt – die Werte stehen
 * deshalb hier dokumentiert und werden in Komponenten 1:1 verwendet.
 */
:root {
	/* ------------------------------------------------- Typografie-Rollen */
	--font-size-display: var(--font-size-10xl);  /* Hero-Label */
	--font-size-title-xl: var(--font-size-10xl); /* Media-Text, Werte, Newsletter */
	--font-size-title-lg: var(--font-size-9xl);  /* Produkt-Slider */
	--font-size-title-md: var(--font-size-8xl);  /* Seitentitel Textseite, Produktname */
	--font-size-title-sm: var(--font-size-5xl);  /* Kompakt-Titel, H2 im Fließtext */
	--font-size-title-xs: var(--font-size-xl);   /* Produktkarte, H3 im Fließtext */
	--font-size-heading: var(--font-size-title-sm); /* JEDE Sektions-H2 (websiteweit einheitlich) */
	--font-size-lead: var(--font-size-5xl);      /* Editorial-Intro */
	--font-size-lead-sm: var(--font-size-xl);    /* Intro: kleine Handschrift */
	--font-size-body-lg: var(--font-size-lg);    /* Fließtext */
	--font-size-body: var(--font-size-sm);
	--font-size-small: var(--font-size-xs);
	--font-size-caption: var(--font-size-2xs);

	--font-size-nav: var(--font-size-lg);
	--font-size-label: var(--font-size-lg);      /* Tabs, Filter */
	--font-size-button: var(--font-size-md);
	--font-size-price: var(--font-size-8xl);
	--font-size-price-minor: var(--font-size-xl);
	--font-size-footer: var(--font-size-lg);

	--line-height-display: calc(var(--font-size-display) * 0.95);
	--line-height-title-xl: calc(var(--font-size-title-xl) * 1);
	--line-height-title-lg: calc(var(--font-size-title-lg) * 1.05);
	--line-height-title-md: calc(var(--font-size-title-md) * 1.1);
	--line-height-title-sm: calc(var(--font-size-title-sm) * 1.15);
	--line-height-title-xs: calc(var(--font-size-title-xs) * 1.2);
	--line-height-heading: calc(var(--font-size-heading) * 1.15);
	--line-height-lead: calc(var(--font-size-lead) * 1.28);
	--line-height-lead-sm: calc(var(--font-size-lead-sm) * 1.4);
	--line-height-body-lg: calc(var(--font-size-body-lg) * 1.5);
	--line-height-body: calc(var(--font-size-body) * 1.5);
	--line-height-small: calc(var(--font-size-small) * 1.45);
	--line-height-caption: calc(var(--font-size-caption) * 1.4);
	--line-height-ui: 1; /* Buttons, Navigation, Labels */

	/* -------------------------------------------------- Layout & Rhythmus */
	--gutter: var(--space-11);             /* seitlicher Seitenrand */
	--section-gap: var(--space-14);        /* Abstand zwischen Sektionen */
	--section-gap-tight: var(--space-12);
	--stack-lg: var(--space-8);            /* Abstand Text → Buttons */
	--stack-md: var(--space-6);            /* Absatzabstand */
	--stack-sm: var(--space-4);
	--grid-gap: var(--space-11);
	--grid-gap-sm: var(--space-3);
	--header-block-padding: var(--space-4);
	--logo-width-header: 2.75rem;
	--logo-width-footer: 6.5rem;
	--size-portrait: 22rem;                /* Bild+Text mit Hochformat-Bild */
	--size-portrait-tab: 14rem;            /* Porträt im Produkt-Tab */
}

/* Breit */
@media (min-width: 100em) {
	:root {
		--gutter: var(--space-13);
	}
}

/* Tablet */
@media (max-width: 64em) {
	:root {
		--font-size-display: var(--font-size-8xl);
		--font-size-title-xl: var(--font-size-8xl);
		--font-size-title-lg: var(--font-size-7xl);
		--font-size-title-md: var(--font-size-6xl);
		--font-size-title-sm: var(--font-size-4xl);
		--font-size-lead: var(--font-size-3xl);
		--font-size-nav: var(--font-size-md);
		--font-size-price: var(--font-size-6xl);

		--gutter: var(--space-9);
		--section-gap: var(--space-13);
		--grid-gap: var(--space-10);
	}
}

/* Mobile */
@media (max-width: 48.75em) {
	:root {
		--font-size-display: var(--font-size-6xl);
		--font-size-title-xl: var(--font-size-6xl);
		--font-size-title-lg: var(--font-size-5xl);
		--font-size-title-md: var(--font-size-4xl);
		--font-size-title-sm: var(--font-size-3xl);
		--font-size-title-xs: var(--font-size-lg);
		--font-size-lead: var(--font-size-2xl);
		--font-size-lead-sm: var(--font-size-lg);
		--font-size-body-lg: var(--font-size-md);
		--font-size-nav: var(--font-size-xl);
		--font-size-label: var(--font-size-md);
		--font-size-button: var(--font-size-sm);
		--font-size-price: var(--font-size-6xl);
		--font-size-footer: var(--font-size-md);

		--gutter: var(--space-7);
		--section-gap: var(--space-11);
		--section-gap-tight: var(--space-10);
		--stack-lg: var(--space-6);
		--grid-gap: var(--space-8);
		--logo-width-header: 3rem;
		--logo-width-footer: 6.4rem;
		--size-portrait: 18rem;
	}
}