/*
 * Kuvings — tokeny systemu wizualnego (kierunek „Laboratorium testów”, wersja v2).
 * Źródło: plansza „C · v2 REVO830” z Claude Design (design/v2-revo830/).
 *
 * REGUŁY
 * - Czerwień --kv-action: przycisk zakupu z kodem (jeden na ekranie) oraz etykiety
 *   wyróżnień autora z planszy v2: „Mój wybór”, „Z mojego doświadczenia”, „Werdykt”.
 *   Nie do ikon, ramek ani błędów.
 * - Paleta neutralna: biel, blat, grafit, tusz + czerwień akcji. Nie dopisuj kolorów.
 *   Rodzaj informacji (plus, minus, uwaga, wskazówka) oznacza etykieta i znak, nie kolor.
 * - Plex Mono tylko do kodu rabatowego i znaków + − ! i. Liczby w Plex Sans (tabular-nums).
 * - Rozmiary fontu tylko ze skali --kv-size-*; telefon bazowo, desktop od 1024 px.
 * - Odstępy tylko ze skali 4 px: 4, 8, 16, 24, 40, 64.
 * - Prefiks --kv- nie koliduje ze zmiennymi Kadence (--global-palette*).
 *
 * Fonty: IBM Plex Sans i Plex Mono z plików wtyczki (fonty.css), bez Google Fonts.
 */

:root {
	/* Kolory — role */
	--kv-bg: #FFFFFF;
	--kv-surface: #F3F4F5;      /* „blat”: tła kart, paski etykiet, nagłówki tabel */
	--kv-surface-2: #E6E8EA;    /* etykiety-pigułki, przycisk szary */
	--kv-ink: #15181B;          /* „tusz”: nagłówki, ramki boxów głównych; 17,8:1 na białym */
	--kv-body: #33383D;         /* tekst akapitów */
	--kv-muted: #5A6067;        /* „grafit”: etykiety, podpisy; 6,4:1 na białym */
	--kv-line: #DADDE0;         /* separatory, obramowania */
	--kv-action: #D10A10;       /* WYŁĄCZNIE przyciski do sklepu; 5,6:1 z białym tekstem */
	--kv-action-hover: #A8080D;
	--kv-ink-hover: #33383D;
	--kv-on-action: #FFFFFF;

	/* Typografia */
	--kv-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--kv-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--kv-weight-regular: 400;
	--kv-weight-medium: 500;
	--kv-weight-bold: 600;
	--kv-weight-heading: 500;   /* nagłówki v2 */

	/* Skala — telefon 360 px */
	--kv-size-display: 30px;  --kv-lh-display: 1.12;
	--kv-size-h1: 28px;       --kv-lh-h1: 1.18;
	--kv-size-h2: 22px;       --kv-lh-h2: 1.25;
	--kv-size-h3: 17px;       --kv-lh-h3: 1.3;
	--kv-size-body: 16px;     --kv-lh-body: 1.6;
	--kv-size-small: 15px;    --kv-lh-small: 1.5;
	--kv-size-caption: 13px;  --kv-lh-caption: 1.45;
	--kv-size-label: 13px;    /* etykiety-pigułki */
	--kv-size-num: 14px;      /* liczby w tabelach */
	--kv-size-stat: 24px;     /* liczby w kartach porównania */
	--kv-size-num-lg: 44px;   /* liczba pomiaru */
	--kv-size-quote: 19px;    /* cytat autora, werdykt */

	/* Odstępy — skala 4 px */
	--kv-space-1: 4px;
	--kv-space-2: 8px;
	--kv-space-3: 16px;
	--kv-space-4: 24px;
	--kv-space-5: 40px;
	--kv-space-6: 64px;

	/* Kształty */
	--kv-radius-button: 8px;
	--kv-radius-inner: 12px;    /* panel w boxie, zdjęcie w boxie */
	--kv-radius-card: 16px;     /* boxy, tabela */
	--kv-radius-media: 24px;    /* tło packshotu */
	--kv-radius-round: 999px;
	--kv-focus: 2px solid var(--kv-ink);
	--kv-shadow-sticky: 6px 0 8px -6px rgba(21, 24, 27, .22);

	/* Zgodność wstecz: stare nazwy z pierwszej wersji porównywarki */
	--kv-size-1: var(--kv-size-num-lg);
	--kv-size-2: var(--kv-size-h2);
	--kv-size-3: var(--kv-size-body);
	--kv-size-4: var(--kv-size-caption);
}

@media (min-width: 1024px) {
	:root {
		--kv-size-display: 52px;  --kv-lh-display: 1.06;
		--kv-size-h1: 44px;       --kv-lh-h1: 1.1;
		--kv-size-h2: 30px;       --kv-lh-h2: 1.2;
		--kv-size-h3: 26px;       --kv-lh-h3: 1.25;
		--kv-size-body: 18px;     --kv-lh-body: 1.6;
		--kv-size-small: 16px;    --kv-lh-small: 1.5;
		--kv-size-caption: 14px;
		--kv-size-label: 14px;
		--kv-size-num: 16px;
		--kv-size-stat: 36px;
		--kv-size-num-lg: 56px;
		--kv-size-quote: 22px;
	}
}