/*
 * TIERE — Design Tokens
 *
 * Breakpoints (dokumentacja — custom properties nie działają wewnątrz
 * warunków @media, więc te same wartości są wpisane wprost w plikach
 * assets/css/layout/*.css i components/*.css):
 *   sm: 640px   md: 900px   lg: 1200px   xl: 1600px
 *
 * System kontenerów — dwa pułapy szerokości, żaden nie jest wzięty wprost
 * z wymiarów canvasu Figmy (referencja wizualna, nie źródło liczb CSS):
 *   --container-max-width (1440px)      — standard, sekcje tekstowe/marketingowe
 *   --container-max-width-wide (1600px) — wide, siatki produktowe/zdjęciowe (PDP, archiwum)
 * 1440px to powszechnie przyjęty w web designie pułap dla treści (odpowiednik
 * Tailwind `max-w-7xl` / zbliżony do największego containera Bootstrapa).
 * 1600px reużywa istniejącego breakpointu `xl` zamiast wprowadzać nową liczbę.
 * Sekcje bez własnego tła full-bleed (hero, media-wide) nie używają żadnego
 * z tych pułapów — zostają 100% szerokości viewportu. Layout jest w pełni
 * płynny poniżej i powyżej obu wartości.
 */

:root {
	/* Kolory */
	--color-ink: #1e1e1c;
	--color-cream: #f1f6f1;
	--color-brand-red: #ff1a1a;
	--color-red-dark: #c81b1b;
	--color-white: #ffffff;
	--color-panel-gray: #d9d9d9; /* tło paneli ze zdjęciem produktu (WooCommerce) */
	--color-muted: #9b9898;      /* etykiety tabs produktu, stany nieaktywne */

	--color-text: var(--color-ink);
	--color-text-inverse: var(--color-white);

	/* Typografia */
	/* Pliki fontu Stolzl: assets/fonts/stolzl/, reguły @font-face na końcu
	   tego pliku. */
	--font-family-base: "Stolzl", "Helvetica Neue", Arial, sans-serif;

	/* Book i Regular mają w plikach fontu tę samą wagę (400), a w Figmie to
	   dwa różne kroje - Book dostaje własną wartość 450 w @font-face. */
	--font-weight-book: 450;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 700;

	/* Skala fluid (clamp) wyprowadzona z rozmiarów referencyjnych Figmy */
	--text-display: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);  /* ~28px -> 44px */
	--text-h1: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);       /* ~24px -> 34px */
	--text-h2: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);       /* ~24px -> 34px */
	--text-nav: clamp(1rem, 0.9rem + 0.3vw, 1.25rem);         /* ~16px -> 20px */
	--text-button: clamp(1rem, 0.9rem + 0.3vw, 1.25rem);      /* ~16px -> 20px */
	--text-card-title: clamp(1rem, 0.9rem + 0.3vw, 1.25rem);  /* ~16px -> 20px */
	--text-body: 0.875rem;                                     /* 14px */
	--text-caption: 0.75rem;                                   /* 12px */
	--text-product-subtitle: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); /* ~18px -> 22px, "By {twórca}" na stronie produktu */
	--text-product-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);     /* ~16px -> 18px, etykiety tabs + treść taba */

	--line-height-tight: 1.2;
	--line-height-heading: 1.28;
	--line-height-body: 1.5;

	/* System spacingu — skala modularna (baza 4px), ustalona na podstawie
	   proporcji widocznych w referencji Figma, nie odczytana 1:1 ze
	   współrzędnych x/y (Figma nie ma zdefiniowanych tokenów spacingu). */
	--space-1: 0.25rem;  /* 4px */
	--space-2: 0.5rem;   /* 8px */
	--space-3: 0.75rem;  /* 12px */
	--space-4: 1rem;     /* 16px */
	--space-5: 1.5rem;   /* 24px */
	--space-6: 2rem;     /* 32px */
	--space-7: 3rem;     /* 48px */
	--space-8: 4rem;     /* 64px */
	--space-9: 6rem;     /* 96px */
	--space-10: 8rem;    /* 128px */

	/* Radius — 0 wszędzie, zgodnie z wytyczną klienta */
	--radius-0: 0;

	/* Layout */
	--container-max-width: 90rem;       /* 1440px — standard, patrz komentarz na górze pliku */
	--container-max-width-wide: 100rem; /* 1600px — wide, patrz komentarz na górze pliku */
	--container-padding-inline: clamp(1.25rem, 1rem + 3vw, 6rem);

	/* Przyciski — jedyny realnie zmierzony padding w źródle Figmy (~20.4 / 8.16px) */
	--button-padding-inline: 1.275rem;
	--button-padding-block: 0.5rem;

	/*
	 * Jednostka projektu. Wymiary z Figmy wpisujemy jako calc(N * var(--u)),
	 * gdzie N to wartość w px z ramki mobile (360) albo desktop (1728).
	 * Poniżej 900px układ mobile skaluje się proporcjonalnie do szerokości
	 * okna (1:1 przy 360px). Od 900px obowiązują wartości desktopowe,
	 * pomniejszane proporcjonalnie poniżej 1728px i 1:1 od 1728px w górę.
	 */
	--u: calc(100vw / 360);
}

@media (min-width: 900px) {
	:root {
		--u: min(1px, calc(100vw / 1728));
	}
}

@font-face {
	font-family: "Stolzl";
	src: url("../fonts/stolzl/stolzl_regular.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Stolzl";
	src: url("../fonts/stolzl/stolzl_book.otf") format("opentype");
	font-weight: 450;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Stolzl";
	src: url("../fonts/stolzl/stolzl_medium.otf") format("opentype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Stolzl";
	src: url("../fonts/stolzl/stolzl_bold.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}