/*
 * Custom properties - zrodlo prawdy: Pixel Kit (brief.md sekcja 3).
 */

:root {
	/* Kolory podstawowe */
	--kolor-postac: #FF623D;      /* primary / brand / CTA */
	--kolor-tusz: #121212;        /* czarny - ramki, tekst, kontrast */
	--kolor-papier: #FFFFFF;      /* biel - tlo paneli */

	/* Kategoria: technologia */
	--kolor-technologia-jasny: #2DAABB;
	--kolor-technologia-ciemny: #1166A5;

	/* Kategoria: klimat */
	--kolor-klimat-jasny: #67C98E;
	--kolor-klimat-ciemny: #258D69;

	/* Kategoria: zdrowie */
	--kolor-zdrowie-jasny: #FF7350;
	--kolor-zdrowie-ciemny: #E34E3B;

	/* Kategoria: spoleczenstwo */
	--kolor-spoleczenstwo-jasny: #FFCE73;
	--kolor-spoleczenstwo-ciemny: #FAB54F;

	/* Odcienie pomocnicze */
	--kolor-szary-jasny: #d6d6d6;
	--kolor-szary-ciemny: #8d8d8d;
	--kolor-tekst-cichy: #4a4a4a;      /* tekst wyciszony na jasnym/bialym tle */
	--kolor-tekst-cichy-jasny: #c9c9c9; /* tekst wyciszony na czarnym tle strony */
	--kolor-tlo-strona: var(--kolor-tusz); /* tlo strony/sekcji - czarne (Pixel Kit) */

	/* Pary jasny/ciemny uzywane WYLACZNIE do bevelu na ::before przyciskow
	   (components.css) - tam gdzie kategoria mial juz jasny/ciemny do
	   wypelnienia (technologia, klimat, zdrowie), dolozony jest tu tylko
	   brakujacy trzeci odcien (highlight jasniejszy niz "jasny", lub cien
	   ciemniejszy niz "ciemny"). Postac (primary) i tusz nie mialy zadnej
	   pary - dodane od zera, obliczone jako bazowy kolor zmieszany z
	   bielą/czernią o 15-30%. */
	--kolor-postac-jasny: #FF9177;
	--kolor-postac-ciemny: #B3452B;
	--kolor-technologia-highlight: #6CC4CF;
	--kolor-klimat-highlight: #95D9B0;
	--kolor-spoleczenstwo-highlight: #FFDD9D;
	--kolor-zdrowie-highlight: #FF9D85;
	--kolor-zdrowie-cien: #9F3729;
	--kolor-tusz-jasny: #3a3a3a;
	--kolor-tusz-ciemny: #000000;

	/* Hover/focus na elementach interaktywnych zmienia wylacznie geometrie
	   (przesuniecie/cien), NIE kolor tla. Wartosci "-jasny"/"-ciemny"/
	   "-highlight"/"-cien" powyzej to stale kolory bevelu (bordery
	   gora/dol/lewo/prawo), nie efekt interakcji. */

	/* Typografia - naglowkowy font uzywa tej samej rodziny co tekstowy,
	   ale w gruboszy wadze (Press Start 2P mial rozjezdzajace sie polskie
	   znaki diakrytyczne). */
	--font-display: 'Pixelify Sans', ui-monospace, monospace;
	--font-text: 'Pixelify Sans', ui-monospace, monospace;

	/* Ramka i geometria pixel-art */
	--ld-border: 4px;
	--ld-clip-path: polygon(
		0 4px, 4px 4px, 4px 0,
		calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px,
		100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%,
		4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px)
	);

	/* "Postrzepiona"/"podarta" krawedz dla elementow klikalnych (przyciski,
	   taby, X/zamkniecia, przelacznik menu) - zastepuje --ld-clip-path TYLKO
	   tam, statyczne panele/ramki tresci zostaja przy powyzszym. Ksztalt to
	   16 punktow na kazda krawedz, pozycja wzdluz krawedzi w %, glebokosc
	   naciecia w px (0-3px, dwie nakladajace sie fale o roznej
	   czestotliwosci - stad nieregularny, "organiczny" a nie mechanicznie
	   powtarzalny profil pojedynczej krawedzi). Glebokosc naciecia CELOWO
	   nie przekracza 3px - to najmniejsza grubosc ramki (box-shadow inset)
	   uzywana w motywie (przyciski 30-40px maja inset 3px, wieksze 4px) -
	   gdyby naciecie bylo glebsze niz ramka, ramka znikalaby punktowo w
	   najgiebszych miejscach (wersje z nacieciem 5-6px daja efekt
	   "zebatki" z trojkatnymi przerwami w ramce zamiast ciaglej, cienkiej
	   linii). Pozycje w % (nie w px) - wzor skaluje sie proporcjonalnie do
	   dowolnego rozmiaru elementu (male X 30x30, duzy CTA 300x70), przy
	   zachowaniu tej samej gestosci "postrzepienia" wzdluz calego obwodu. */
	--ld-clip-path-torn: polygon(
		0 0,
		5.88% 2.2px, 11.76% 1.58px, 17.65% 1.44px, 23.53% 1.39px,
		29.41% 0.89px, 35.29% 0.54px, 41.18% 1.27px, 47.06% 2.58px,
		52.94% 2.91px, 58.82% 1.75px, 64.71% 0.45px, 70.59% 0.42px,
		76.47% 1.3px, 82.35% 1.85px, 88.24% 1.79px, 94.12% 1.85px,
		100% 0,
		calc(100% - 2.2px) 5.88%, calc(100% - 1.58px) 11.76%, calc(100% - 1.44px) 17.65%, calc(100% - 1.39px) 23.53%,
		calc(100% - 0.89px) 29.41%, calc(100% - 0.54px) 35.29%, calc(100% - 1.27px) 41.18%, calc(100% - 2.58px) 47.06%,
		calc(100% - 2.91px) 52.94%, calc(100% - 1.75px) 58.82%, calc(100% - 0.45px) 64.71%, calc(100% - 0.42px) 70.59%,
		calc(100% - 1.3px) 76.47%, calc(100% - 1.85px) 82.35%, calc(100% - 1.79px) 88.24%, calc(100% - 1.85px) 94.12%,
		100% 100%,
		94.12% calc(100% - 2.2px), 88.24% calc(100% - 1.58px), 82.35% calc(100% - 1.44px), 76.47% calc(100% - 1.39px),
		70.59% calc(100% - 0.89px), 64.71% calc(100% - 0.54px), 58.82% calc(100% - 1.27px), 52.94% calc(100% - 2.58px),
		47.06% calc(100% - 2.91px), 41.18% calc(100% - 1.75px), 35.29% calc(100% - 0.45px), 29.41% calc(100% - 0.42px),
		23.53% calc(100% - 1.3px), 17.65% calc(100% - 1.85px), 11.76% calc(100% - 1.79px), 5.88% calc(100% - 1.85px),
		0 100%,
		2.2px 94.12%, 1.58px 88.24%, 1.44px 82.35%, 1.39px 76.47%,
		0.89px 70.59%, 0.54px 64.71%, 1.27px 58.82%, 2.58px 52.94%,
		2.91px 47.06%, 1.75px 41.18%, 0.45px 35.29%, 0.42px 29.41%,
		1.3px 23.53%, 1.85px 17.65%, 1.79px 11.76%, 1.85px 5.88%
	);

	/* "Schodkowy" róg (2 stopnie na kazdy naroznik) zastepuje
	   --ld-clip-path-torn na elementach klikalnych (przyciski, taby,
	   zamkniecia, przelacznik menu) - patrz components.css/layout.css.
	   Cztery warianty rozmiarowe, kazdy to ten sam wzor przeskalowany o
	   staly wspolczynnik (bazowe liczby 24/12/6/18 pomnozone przez
	   1, 2/3, 1/2, 1/3): duzy (lg, ~.ld-btn--lg, .ld-galeria__item) uzywa
	   wartosci bazowych bez zmian; sredni (md, ~.ld-btn--md, przycisk CF7);
	   maly (sm, ~.ld-btn--sm, .ld-tab); bardzo maly (xs, ~30-44px kwadratowe
	   przyciski - przelacznik menu, X zamkniecia) - na tych ostatnich pelna
	   skala zdominowalaby caly ksztalt, stad 1/3. */
	--ld-clip-path-pixel-lg: polygon(
		24px 0, calc(100% - 24px) 0,
		calc(100% - 24px) 6px, calc(100% - 12px) 6px,
		calc(100% - 12px) 18px, 100% 18px,
		100% calc(100% - 18px),
		calc(100% - 12px) calc(100% - 18px),
		calc(100% - 12px) calc(100% - 6px),
		calc(100% - 24px) calc(100% - 6px),
		calc(100% - 24px) 100%, 24px 100%,
		24px calc(100% - 6px), 12px calc(100% - 6px),
		12px calc(100% - 18px), 0 calc(100% - 18px),
		0 18px, 12px 18px, 12px 6px, 24px 6px
	);
	--ld-clip-path-pixel-md: polygon(
		16px 0, calc(100% - 16px) 0,
		calc(100% - 16px) 4px, calc(100% - 8px) 4px,
		calc(100% - 8px) 12px, 100% 12px,
		100% calc(100% - 12px),
		calc(100% - 8px) calc(100% - 12px),
		calc(100% - 8px) calc(100% - 4px),
		calc(100% - 16px) calc(100% - 4px),
		calc(100% - 16px) 100%, 16px 100%,
		16px calc(100% - 4px), 8px calc(100% - 4px),
		8px calc(100% - 12px), 0 calc(100% - 12px),
		0 12px, 8px 12px, 8px 4px, 16px 4px
	);
	--ld-clip-path-pixel-sm: polygon(
		12px 0, calc(100% - 12px) 0,
		calc(100% - 12px) 3px, calc(100% - 6px) 3px,
		calc(100% - 6px) 9px, 100% 9px,
		100% calc(100% - 9px),
		calc(100% - 6px) calc(100% - 9px),
		calc(100% - 6px) calc(100% - 3px),
		calc(100% - 12px) calc(100% - 3px),
		calc(100% - 12px) 100%, 12px 100%,
		12px calc(100% - 3px), 6px calc(100% - 3px),
		6px calc(100% - 9px), 0 calc(100% - 9px),
		0 9px, 6px 9px, 6px 3px, 12px 3px
	);
	--ld-clip-path-pixel-xs: polygon(
		8px 0, calc(100% - 8px) 0,
		calc(100% - 8px) 2px, calc(100% - 4px) 2px,
		calc(100% - 4px) 6px, 100% 6px,
		100% calc(100% - 6px),
		calc(100% - 4px) calc(100% - 6px),
		calc(100% - 4px) calc(100% - 2px),
		calc(100% - 8px) calc(100% - 2px),
		calc(100% - 8px) 100%, 8px 100%,
		8px calc(100% - 2px), 4px calc(100% - 2px),
		4px calc(100% - 6px), 0 calc(100% - 6px),
		0 6px, 4px 6px, 4px 2px, 8px 2px
	);

	/* Gorny limit szerokosci "kolumn tekstowych" (dlugie akapity prozy, nie
	   caly kontener sekcji) - konkretna wartosc w px (75% z 1920px =
	   1440px), NIE jednostka vw/%, zeby nie skalowac sie z oknem
	   przegladarki. Zmienna zyje w JEDNYM miejscu - na dedykowanym
	   kontenerze .ld-container--tekst (base.css), uzywanym SAMODZIELNIE
	   (obok, nie wewnatrz .ld-container, ktory ma wlasny max-width 1180px -
	   dziecko nie moze byc szersze niz rodzic) tam gdzie sekcja ma dlugi
	   akapit opisowy - patrz base.css i section-*.php. */
	--ld-text-max-width: 1440px;

	/* Odstepy */
	--ld-container-width: 1180px;
	--ld-space-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
	--ld-space-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1.25rem);
	--ld-space-md: clamp(1.25rem, 1rem + 1.25vw, 2rem);
	--ld-space-lg: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
	--ld-space-xl: clamp(3rem, 2rem + 5vw, 6rem);

	--ld-radius-pill: 999px;
}