/*
 * Reanimatik, tokeny design systemu.
 * Wartości bazowe zmierzone na starej stronie, patrz docs/audit/DESIGN-DNA.md.
 */

@font-face {
	font-family: 'Rethink Sans';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/rethink-sans-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Rethink Sans';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/rethink-sans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* --- Kolory ---
	   Tlo jest o ton cieplejsze od kafli, ale roznica jest juz tylko wyczuwalna,
	   nie widoczna. Wczesniej #f6f5f2 na przemian z #edebe6 rozbijalo strone na
	   pasy: kazda druga sekcja czytala sie jak osobny blok, a nie jak ciag dalszy.
	   Karte od tla odciaga teraz cien, nie zmiana jasnosci tla. */
	--c-bg: #fbfaf9;
	--c-bg-rgb: 251, 250, 249;
	--c-bg-alt: #f4f2ef;
	--c-surface: #ffffff;
	--c-border: #eae7e2;
	--c-border-strong: #cfccc6;
	/* Kreska, ktora ma tylko powiedziec "tu konczy sie sekcja". Slabsza od
	   --c-border, bo obwodka kafla i granica sekcji to dwie rozne sily. */
	--c-hairline: #f0ede8;

	--c-ink: #0a0a0a;
	--c-body: #494949;
	/* #6b6b6b siadalo pod progiem WCAG AA na drugim tle, a kickery i godziny sa
	   pisane trzynastka, wiec to wlasnie one obrywaly. Dzisiejsze 666666 daje
	   5,14:1 na --c-bg-alt i 5,51:1 na --c-bg, czyli zapas nad progiem 4,5:1. */
	--c-muted: #666666;
	--c-inverse: #ffffff;

	/* Aurora marki: brzoskwinia, pomarańcz, czerwień. Baza #ffbc7d ze starej strony. */
	--c-peach: #ffd9b8;
	--c-accent: #ffbc7d;
	--c-orange: #ff8f4d;
	--c-ember: #f4603c;
	/* Chlodny kontrapunkt mgly. Sama ciepla paleta rozlana na pol ekranu czyta sie
	   jak filtr nalozony na strone. Dopiero roznica temperatur miedzy brzoskwinia
	   a tym przygaszonym bletem daje wrazenie glebi, a nie plamy. W tresci i na
	   przyciskach ten kolor nie wystepuje, zyje wylacznie w tle. */
	--c-haze: #dfe3f5;
	/* Gwiazdki oceny. Ani --c-accent (za blady, na bialym kaflu znika), ani
	   --c-ember (czerwony, czyta sie jak ostrzezenie). Zloto miedzy nimi. */
	--c-star: #e89a2c;

	--c-success: #1d7a4c;
	--c-danger: #b3261e;

	/* --- Gradienty --- */
	--grad-aurora: linear-gradient(158deg, var(--c-peach) 0%, var(--c-accent) 36%, var(--c-orange) 68%, var(--c-ember) 100%);
	/* Rozcienczona aurora pod ikony. Pelnej nie da sie powtorzyc dwanascie razy
	   na jednym ekranie, bo z siatki uslug robi sie jarmark. */
	--grad-tint: linear-gradient(150deg, #ffe6cd 0%, #ffd0a6 100%);

	/* --- Typografia --- */
	--font-sans: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

	/* Skala płynna 390px do 1440px.
	   Stara strona miała H1 90px i H2 65px, oba w wadze 400, i tak stało tu przez
	   cały początek projektu. Wielkie litery w cienkiej kresce czytają się jak
	   plakat, a nie jak narzędzie: nagłówek zajmował cztery wiersze, a mimo to
	   nie ważył nic. Dzisiejsze 46px w wadze 700 zajmuje mniej miejsca i mówi
	   głośniej. Robert wybrał to z trzech wariantów 14.08.2026. */
	--fs-display: clamp(2.375rem, 1.79rem + 2.38vw, 3.625rem);
	--fs-h1: clamp(2rem, 1.675rem + 1.33vw, 2.875rem);
	--fs-h2: clamp(1.625rem, 1.393rem + 0.95vw, 2.25rem);
	--fs-h3: clamp(1.375rem, 1.16rem + 0.88vw, 1.75rem);
	--fs-h4: clamp(1.125rem, 1.06rem + 0.29vw, 1.25rem);
	--fs-lead: clamp(1.125rem, 1.02rem + 0.44vw, 1.3125rem);
	--fs-body: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
	--fs-small: 0.9375rem;
	--fs-kicker: 0.8125rem;

	--lh-tight: 1.05;
	--lh-heading: 1.14;
	--lh-body: 1.65;

	--ls-display: -0.032em;
	/* Grubsza kreska potrzebuje ciaśniejszego światła, bo litery same z siebie
	   zajmują więcej miejsca. Przy dawnym -0.024em nagłówek w wadze 700 rozjeżdżał się
	   na szerokość i tracił zwartość. */
	--ls-heading: -0.032em;
	--ls-kicker: 0.14em;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* --- Odstępy, skala 4/8 --- */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 2.5rem;
	--sp-8: 3rem;
	--sp-9: 4rem;
	--sp-10: 5rem;
	/* 72 do 144 px. Przy dawnym suficie 112 px odstep miedzy sekcjami byl mniejszy
	   niz wysokosc jednego naglowka H2, wiec strona czytala sie jak lista blokow
	   dosunietych do siebie. Powietrze jest tu jedynym materialem, ktorym
	   oddzielamy sekcje, odkad tla przestaly sie roznic. */
	--sp-section: clamp(4.5rem, 2rem + 9vw, 9rem);
	/* Padding kafla. Osobny token, bo kafel, sekcja i siatka rosna w innym tempie. */
	--sp-card: clamp(1.5rem, 1.15rem + 1.4vw, 2rem);

	/* --- Układ --- */
	/* Jedna szerokosc dla calej strony: logo, kazdy naglowek, kazda karta i stopka
	   stoja na tej samej pionowej linii. Wczesniej czesc sekcji siedziala w 1280 px,
	   wiec lewa krawedz skakala o 70 px miedzy sasiadujacymi pasami tla. */
	--container: 1140px;
	/* Rem, nie ch. Jednostka ch liczy sie od wielkosci pisma samego elementu, wiec
	   ta sama klasa dawala 658 px wokol okruszkow pisanych trzynastka i 777 px
	   wokol tresci wpisu. Dwie kolumny do czytania na jednej stronie rozjezdzaly
	   sie o 119 px. 45rem to mniej wiecej 66 znakow przy tekscie wpisu. */
	--container-prose: 45rem;
	--gutter: clamp(1.25rem, 0.8rem + 1.8vw, 2rem);

	/* --- Kształty ---
	   Stara strona mierzyla 7px i tyle tu stalo przez caly poczatek projektu.
	   Przy dzisiejszych kaflach, ktore maja po 32px paddingu, takie zaokraglenie
	   czytalo sie jak ostry rog: promien byl czterokrotnie mniejszy od marginesu
	   tresci, wiec oko widzialo prostokat. 12px na drobiazgach i 20px na kaflach
	   to ta sama proporcja, co na kartach starej strony glownej. */
	--radius-sm: 8px;
	--radius: 12px;
	--radius-lg: 20px;
	--radius-pill: 999px;

	/* Skala wyniesienia. Stara strona nie miała cieni w ogóle i przez to cała
	   czytała się płasko: wszystko leżało na jednej płaszczyźnie, więc nic nie
	   wyglądało na ważniejsze od reszty. Cienie mają dawać wrażenie warstw,
	   a nie obwódki wokół kafla.
	   Baza jest ocieplona (28, 25, 23), nie czarna. Czysta czern na kremowym tle
	   robi szara obwodke wokol kafla, a nie cien: brakuje jej tej samej
	   temperatury, co plaszczyzna pod spodem. Rozmyt jest duzy, krycie male,
	   wiec cien widac dopiero katem oka i to jest caly zamysl. */
	--shadow-nav: 0 1px 0 rgba(28, 25, 23, 0.06);
	--shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.04), 0 4px 12px rgba(28, 25, 23, 0.04);
	--shadow-md: 0 2px 6px rgba(28, 25, 23, 0.04), 0 12px 32px rgba(28, 25, 23, 0.06);
	--shadow-lg: 0 8px 24px rgba(28, 25, 23, 0.06), 0 32px 64px rgba(28, 25, 23, 0.1);
	--shadow-pop: 0 12px 32px rgba(28, 25, 23, 0.1);

	/* --- Ruch --- */
	--dur-fast: 120ms;
	--dur: 220ms;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* --- Focus --- */
	--focus-ring: 3px solid var(--c-ink);
	--focus-offset: 3px;

	--z-nav: 100;
	--z-overlay: 200;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0ms;
		--dur: 0ms;
	}
}