/* ==========================================================================
   Tomex: tokeny wygladu. Jedno zrodlo kolorow, fontow, odstepow i zaokraglen.
   Marka bez zmian: wegiel (czern o cieplym, zielonkawym odcieniu), zielen
   koniczyny #84c447, Poppins w naglowkach i przyciskach, Manrope w tresci.
   Opis systemu i zasady: DESIGN.md w katalogu projektu.
   ========================================================================== */

/* Fonty zastepcze o metrykach zblizonych do Poppins i Manrope. Zanim doczyta sie
   font z Google, tekst zajmuje prawie to samo miejsce, wiec uklad nie przeskakuje. */
@font-face {
	font-family: "Poppins Fallback";
	src: local("Arial");
	size-adjust: 112.2%;
	ascent-override: 93.6%;
	descent-override: 31.2%;
	line-gap-override: 8.9%;
}

@font-face {
	font-family: "Manrope Fallback";
	src: local("Arial");
	size-adjust: 103.4%;
	ascent-override: 103.2%;
	descent-override: 29%;
	line-gap-override: 0%;
}

:root {
	/* Wegiel: tla od najciemniejszego */
	--tx-coal-950: #090b08;
	--tx-coal-900: #0e110c;
	--tx-coal-850: #131710;
	--tx-coal-800: #191e15;
	--tx-coal-700: #232a1e;
	--tx-line: rgb(232 239 224 / 0.1);
	--tx-line-strong: rgb(232 239 224 / 0.2);

	/* Zielen koniczyny: przyciski, ceny, stan "aktualne" */
	--tx-green: #84c447;
	--tx-green-hover: #96d25a;
	--tx-green-press: #77b43c;
	--tx-green-soft: rgb(132 196 71 / 0.14);
	--tx-green-line: rgb(132 196 71 / 0.45);
	--tx-on-green: #0b1406;

	/* Tekst na ciemnym tle */
	--tx-white: #ffffff;
	--tx-text: #f1f4ed;
	--tx-text-2: #c4cabc;
	--tx-text-3: #9aa190;

	/* Jasne powierzchnie i tekst na jasnym tle (kafelki produktow) */
	--tx-paper: #f6f7f2;
	--tx-ink: #151912;
	--tx-ink-2: #4a5144;
	--tx-line-light: #e1e4d9;
	--tx-green-ink: #2f6d14;
	--tx-alert-ink: #b42318;

	/* Stany */
	--tx-alert: #ff9e90;
	--tx-star: #fbbc04;

	/* Fonty */
	--tx-font-display: "Poppins", "Poppins Fallback", Arial, sans-serif;
	--tx-font-body: "Manrope", "Manrope Fallback", Arial, sans-serif;

	/* Skala pisma (telefon -> duzy ekran) */
	--tx-fs-display: clamp(3.25rem, 2.35rem + 3.9vw, 5.75rem);
	--tx-fs-h2: clamp(1.875rem, 1.5rem + 1.8vw, 3.125rem);
	--tx-fs-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
	--tx-fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	--tx-fs-body: 1.0625rem;
	--tx-fs-small: 0.9375rem;
	--tx-fs-label: 0.9375rem;

	/* Ksztalty: przyciski i pola 14 px, karty 20 px, elementy w kartach 12 px */
	--tx-r-sm: 12px;
	--tx-r: 14px;
	--tx-r-lg: 20px;
	--tx-r-pill: 999px;

	/* Cienie: miekkie, w dol, tylko dla zdjec i plywajacych warstw */
	--tx-shadow-photo: 0 2px 6px rgb(0 0 0 / 0.28), 0 28px 56px -30px rgb(0 0 0 / 0.85);
	--tx-shadow-float: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 24px 48px -24px rgb(0 0 0 / 0.75);

	/* Ruch */
	--tx-ease: cubic-bezier(0.23, 1, 0.32, 1);
	--tx-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
	--tx-fast: 160ms;
	--tx-base: 240ms;

	/* Uklad */
	--tx-container: 1240px;
	--tx-gutter: clamp(16px, 4vw, 32px);
	--tx-section: clamp(64px, 7.5vw, 112px);
}