/* MAPPED — zastosowania: wartości aliasów przypisane do konkretnych elementów i kontekstów.
   Tu żyją też zmiany na breakpointach (@media). Każda wartość to var() do tokens-alias.css. */

/* --- Nagłówki (Figma: kolekcja "Typography", tryby Mobile i Desktop) ---
   H1 i H2 zmieniają rozmiar między mobile a desktopem (od 1024px).
   "Title" to jeden stały styl 20px: dostaje go tag h3, a także elementy, które wyglądają jak
   nagłówek, ale nie są nim w HTML (mixin title). Nie ma H4 — używamy tylko h1, h2 i h3. */
:root {
	/* Mobile */
	--font-size-h1: var(--font-size-6xl); /* 40 */
	--line-height-h1: var(--line-height-px-52);

	--font-size-h2: var(--font-size-4xl); /* 32 */
	--line-height-h2: var(--line-height-px-40);

	--font-size-title: var(--font-size-xl); /* 20, stały */
	--line-height-title: var(--line-height-pct-130);
}

@media (min-width: 1024px) {
	:root {
		--font-size-h1: var(--font-size-10xl); /* 60 */
		--line-height-h1: var(--line-height-px-72);

		--font-size-h2: var(--font-size-8xl); /* 48 */
		--line-height-h2: var(--line-height-px-56);
	}
}

/* --- Układ sekcji --- */
:root {
	--section-padding-inline: var(--spacing-xl); /* 24 */
}

@media (min-width: 768px) {
	:root {
		--section-padding-inline: var(--spacing-2xl); /* 32 */
	}
}

@media (min-width: 1024px) {
	:root {
		--section-padding-inline: var(--spacing-3xl); /* 48 */
	}
}

@media (min-width: 1440px) {
	:root {
		--section-padding-inline: var(--spacing-5xl); /* 80 */
	}
}

/* --- Kolory komponentów (Figma: kolekcja "Mapped", tryby Light i Dark) ---
   Komponenty biorą kolory stąd, a nie bezpośrednio z palet. Tryb Light to domyślny :root.
   Tryb Dark włącza się atrybutem data-theme="dark" na dowolnym elemencie (np. sekcji), a data-theme="light"
   przywraca Light wewnątrz ciemnej sekcji. Zmienne się dziedziczą, więc wystarczy atrybut na kontenerze. W bloku Dark są tylko
   tokeny, które różnią się od Light (resztę element dziedziczy bez zmian).
   Uwaga: odcienie szarości, błędu i sukcesu odwołują się na razie do palety brand, bo w aliasach
   nie ma jeszcze skal neutral / error / success (primary jest w aliasach). Rating idzie przez alias --rating. */
:root,
[data-theme='light'] {
	/* Text */
	--color-text-headings: var(--color-neutral-900);
	--color-text-tags: var(--color-neutral-700);
	--color-text-body: var(--color-neutral-600);
	--color-text-hint: var(--color-neutral-500);
	--color-text-action: var(--color-primary-400);
	--color-text-action-hover: var(--color-primary-500);
	--color-text-disabled: var(--color-neutral-300);
	--color-text-error: var(--color-red-700);
	--color-text-success: var(--color-green-500);
	--color-text-on-action: var(--color-neutral-100);
	--color-text-on-action-subtle: var(--color-neutral-300);
	--color-text-link: var(--color-neutral-900);
	--color-text-placeholder: var(--color-neutral-400);

	/* Icons */
	--color-icons-default: var(--color-neutral-900);
	--color-icons-accent: var(--color-primary-400);
	--color-icons-tags: var(--color-neutral-700);
	--color-icons-action: var(--color-primary-400);
	--color-icons-action-hover: var(--color-primary-500);
	--color-icons-box: var(--color-primary-200);
	--color-icons-disabled: var(--color-neutral-300);
	--color-icons-error: var(--color-red-500);
	--color-icons-success: var(--color-green-500);
	--color-icons-on-action: var(--color-neutral-100);
	--color-icons-rating: var(--rating);
	--color-icons-rating-empty: var(--color-neutral-200);

	/* Background */
	--color-background-default: var(--color-white);
	--color-background-secondary: var(--color-neutral-50);
	--color-background-tags: var(--color-primary-100);
	--color-background-action: var(--color-primary-400);
	--color-background-action-hover: var(--color-primary-500);
	--color-background-action-hover-subtle: var(--color-primary-100);
	--color-background-error: var(--color-red-50);
	--color-background-success: var(--color-green-50);
	--color-background-disabled: var(--color-neutral-200);

	/* Border */
	--color-border-primary: var(--color-neutral-300);
	--color-border-tags: var(--color-primary-100);
	--color-border-accent: var(--color-primary-400);
	--color-border-action: var(--color-primary-400);
	--color-border-action-hover: var(--color-primary-500);
	--color-border-focus: var(--color-primary-500);
	--color-border-error: var(--color-red-700);
	--color-border-success: var(--color-green-600);
	--color-border-disabled: var(--color-neutral-500);
}

[data-theme='dark'] {
	/* Text */
	--color-text-headings: var(--color-neutral-100);
	--color-text-tags: var(--color-neutral-200);
	--color-text-body: var(--color-neutral-300);
	--color-text-hint: var(--color-neutral-400);
	--color-text-disabled: var(--color-neutral-700);
	--color-text-error: var(--color-red-300);
	--color-text-success: var(--color-green-700);
	--color-text-link: var(--color-neutral-100);
	--color-text-placeholder: var(--color-neutral-500);

	/* Icons */
	--color-icons-default: var(--color-neutral-100);
	--color-icons-tags: var(--color-neutral-200);
	--color-icons-box: var(--color-primary-500);
	--color-icons-disabled: var(--color-neutral-700);
	--color-icons-error: var(--color-red-400);

	/* Background */
	--color-background-default: var(--color-black);
	--color-background-secondary: var(--color-neutral-800);
	--color-background-tags: var(--color-neutral-900);
	--color-background-action-hover-subtle: var(--color-primary-600);
	--color-background-error: var(--color-red-950);
	--color-background-success: var(--color-green-900);
	--color-background-disabled: var(--color-neutral-700);

	/* Border */
	--color-border-primary: var(--color-neutral-600);
	--color-border-tags: var(--color-neutral-900);
	--color-border-action-hover: var(--color-primary-300);
	--color-border-focus: var(--color-primary-300);
	--color-border-disabled: var(--color-neutral-700);
}

/* --- Wg Figmy: Mapped → Border radius oraz kolekcja Responsive (tryby Mobile / Desktop) ---
   Mobile to wartość domyślna, Desktop włącza się od 1024px. */
:root {
	--border-radius-cards: var(--border-radius-lg);
	--border-radius-images: var(--border-radius-lg);
	--border-radius-containers: var(--border-radius-lg);

	/* Nagłówki H3–H6 (H1, H2 i tytuł są wyżej, w sekcji Nagłówki) */
	--font-size-h3: 1.5rem; /* 24 */
	--line-height-h3: 1.75rem; /* 28 */
	--font-size-h4: 1.25rem; /* 20 */
	--line-height-h4: 1.75rem; /* 28 */
	--font-size-h5: 1.125rem; /* 18 */
	--line-height-h5: 1.75rem; /* 28 */
	--font-size-h6: 1rem; /* 16 */
	--line-height-h6: 1.5rem; /* 24 */

	/* Karta: padding */
	--spacing-card-padding-sm: var(--spacing-lg); /* 16 */
	--spacing-card-padding-md: var(--spacing-xl); /* 24 */
	--spacing-card-padding-lg: var(--spacing-xl); /* 24 (desktop 32) */

	/* Karta: odstępy wewnątrz */
	--spacing-card-gap-inner-sm: var(--spacing-sm); /* 8 */
	--spacing-card-gap-inner-md: var(--spacing-md); /* 12 */
	--spacing-card-gap-inner-lg: var(--spacing-lg); /* 16 */
	--spacing-card-gap-inner-xl: var(--spacing-xl); /* 24 */
	--spacing-card-gap-inner-2xl: var(--spacing-2xl); /* 32 */

	/* Karta: odstęp między kartami */
	--spacing-card-gap-outside-md: var(--spacing-2xl); /* 32 (desktop 24) */
	--spacing-card-gap-outside-lg: var(--spacing-2xl); /* 32 */

	/* Układ */
	--spacing-gap-content: var(--spacing-xl); /* 24 */
	--spacing-gap-group: var(--spacing-2xl); /* 32 (desktop 48) */
	--spacing-gap-containers: var(--spacing-3xl); /* 48 (desktop 64) */
	--spacing-gap-sections: var(--spacing-4xl); /* 64 (desktop 96) */
	--spacing-gap-hero: var(--spacing-7xl); /* 128 (desktop 192) */

	--grid-device: 320px;
}

@media (min-width: 1024px) {
	:root {
		--font-size-h3: 2rem; /* 32 */
		--line-height-h3: 2.5rem; /* 40 */
		--font-size-h4: 1.5rem; /* 24 */
		--line-height-h4: 2rem; /* 32 */
		--font-size-h5: 1.25rem; /* 20 */
		--line-height-h5: 1.75rem; /* 28 */
		--font-size-h6: 1.125rem; /* 18 */
		--line-height-h6: 1.75rem; /* 28 */

		--spacing-card-padding-lg: var(--spacing-2xl); /* 32 */
		--spacing-card-gap-outside-md: var(--spacing-xl); /* 24 */

		--spacing-gap-group: var(--spacing-3xl); /* 48 */
		--spacing-gap-containers: var(--spacing-4xl); /* 64 */
		--spacing-gap-sections: var(--spacing-6xl); /* 96 */
		--spacing-gap-hero: var(--spacing-8xl); /* 192 */

		--grid-device: 1440px;
	}
}