/*
 * Typografia — UI Kit KFB Labs (Figma: Rk3e0Grh4x9UvnXXcMTVmx, node 84:135).
 * Sekcje: font/family, font/weight, font/size, font/line-height (Desktop + Mode).
 */

:root {
	--font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--font-heading: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--font-family-title: var(--font-heading);

	/* font / family (Figma) — title: Rubik, body: Poppins */
	/* font / weight */
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-medium: 500;

	/* font / size — Desktop (px) */
	--font-size-xs: 12px;
	--font-size-sm: 14px;
	--font-size-md: 16px;
	--font-size-lg: 20px;
	--font-size-xl: 24px;
	--font-size-2xl: 32px;
	--font-size-3xl: 40px;
	--font-size-4xl: 48px;
	--font-size-5xl: 64px;
	--font-size-6xl: 80px;

	/* font / line-height — Desktop (px) */
	--line-height-xs: 16px;
	--line-height-sm: 20px;
	--line-height-md: 24px;
	--line-height-lg: 28px;
	--line-height-xl: 32px;
	--line-height-2xl: 40px;
	--line-height-3xl: 48px;
	--line-height-4xl: 56px;
	--line-height-5xl: 72px;
	--line-height-6xl: 88px;

	/* --- Aliasy semantyczne (kompatybilność z blokami / szablonami) --- */
	--text-hero-title: var(--font-size-6xl);
	--text-hero-title-leading: var(--line-height-6xl);

	--text-intro-title: var(--font-size-5xl);
	--text-intro-title-leading: var(--line-height-5xl);

	--text-step-title: var(--font-size-4xl);
	--text-step-title-leading: var(--line-height-4xl);

	--text-section-title: var(--font-size-4xl);
	--text-section-title-leading: var(--line-height-4xl);

	--text-cta-title: var(--font-size-5xl);
	--text-cta-title-leading: var(--line-height-5xl);

	--text-card-title: var(--font-size-2xl);
	--text-card-title-leading: var(--line-height-2xl);

	--text-stat-num: var(--font-size-5xl);
	--text-stat-label: var(--font-size-sm);

	--text-body-lead: var(--font-size-lg);
	--text-body-lead-leading: var(--line-height-lg);

	--text-body: var(--font-size-md);
	--text-body-tight-leading: var(--line-height-md);

	--text-nav: var(--font-size-md);
	--text-nav-leading: var(--line-height-md);

	--text-subsection: var(--font-size-sm);
	--text-subsection-leading: var(--line-height-sm);

	--text-button: var(--font-size-sm);

	--text-footer-brand: var(--font-size-lg);

	--text-caption-12: var(--font-size-xs);
	--text-caption-11: 11px;
	--text-caption-10: 10px;

	--letter-marquee: 0.12em;
	--letter-indicator: 0.08em;
	--letter-tag-pill: 0.07em;
	--letter-step-num: 0.12em;
	--letter-stat-label: 0.07em;
	--letter-cta-small: 0.1em;
	--letter-footer-col: 0.1em;
}

/* Mode — rozmiary i interlinie z kolumny „Mode” (węższy viewport) */
@media (max-width: 768px) {
	:root {
		--font-size-xs: 10px;
		--font-size-sm: 12px;
		--font-size-md: 14px;
		--font-size-lg: 16px;
		--font-size-xl: 20px;
		--font-size-2xl: 24px;
		--font-size-3xl: 28px;
		--font-size-4xl: 32px;
		--font-size-5xl: 36px;
		--font-size-6xl: 48px;

		--line-height-xs: 14px;
		--line-height-sm: 20px;
		--line-height-md: 22px;
		--line-height-lg: 24px;
		--line-height-xl: 24px;
		--line-height-2xl: 28px;
		--line-height-3xl: 32px;
		--line-height-4xl: 40px;
		--line-height-5xl: 44px;
		--line-height-6xl: 56px;
	}
}

body {
	font-family: var(--font-sans);
	color: var(--color-text-main);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	color: var(--color-text-main);
}

h1 {
	font-size: var(--text-hero-title);
	font-weight: var(--font-weight-regular);
	line-height: var(--text-hero-title-leading);
}

h2 {
	font-size: var(--text-section-title);
	font-weight: var(--font-weight-regular);
	line-height: var(--text-section-title-leading);
}

h3 {
	font-size: var(--text-step-title);
	font-weight: var(--font-weight-regular);
	line-height: var(--text-step-title-leading);
}

h4 {
	font-size: var(--text-card-title);
	font-weight: var(--font-weight-regular);
	line-height: var(--text-card-title-leading);
}

h5 {
	font-size: var(--text-subsection);
	font-weight: var(--font-weight-regular);
	line-height: var(--text-subsection-leading);
}

h6 {
	font-size: var(--text-body);
	font-weight: var(--font-weight-medium);
	line-height: var(--text-body-tight-leading);
}

p {
	margin: 0 0 1.5rem;
	font-size: var(--text-body);
	line-height: var(--text-body-tight-leading);
}

p:last-child {
	margin-bottom: 0;
}

strong,
b {
	/* Pogrubienie spoza tabeli 3 wag — Poppins zwykle ma 600/700. */
	font-weight: 600;
}

/* Utility — komponenty landingowe */
.text-hero-title {
	font-family: var(--font-heading);
	font-size: var(--text-hero-title);
	font-weight: var(--font-weight-regular);
	line-height: var(--text-hero-title-leading);
}

.text-display-cta {
	font-family: var(--font-heading);
	font-size: var(--text-cta-title);
	font-weight: var(--font-weight-regular);
	line-height: var(--text-cta-title-leading);
}

.text-lead {
	font-size: var(--text-body-lead);
	line-height: var(--text-body-lead-leading);
}

.text-body-muted {
	font-size: var(--text-body-lead);
	line-height: var(--text-body-lead-leading);
	color: var(--color-text-muted);
}

.text-nav {
	font-family: var(--font-heading);
	font-size: var(--text-nav);
	line-height: var(--text-nav-leading);
}

.text-label-upper-12 {
	font-size: var(--text-caption-12);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-step-num);
	text-transform: uppercase;
}

.text-label-upper-11 {
	font-size: var(--text-caption-11);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-tag-pill);
	text-transform: uppercase;
}

.text-marquee {
	font-size: var(--text-caption-12);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-marquee);
	text-transform: uppercase;
}

.text-stat-num {
	font-family: var(--font-heading);
	font-size: var(--text-stat-num);
	font-weight: var(--font-weight-light);
	line-height: 1;
}

.text-stat-label {
	font-size: var(--text-stat-label);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-stat-label);
	text-transform: uppercase;
}

.text-button {
	font-family: var(--font-sans);
	font-size: var(--text-button);
	font-weight: var(--font-weight-medium);
}