/**
 * System wizualny — fundamenty (v1.8 Tydzień 5). Skala typografii, odstępów,
 * promieni i cieni jako zmienne CSS, gotowe do zastosowania w
 * widget-styles.css w Tygodniu 6 — ten plik świadomie NIE jest jeszcze
 * enqueue'owany nigdzie (patrz IOT_DW_Shortcode::maybe_enqueue_assets()),
 * dokładnie jak przewiduje plan (Tydzień 5 = fundamenty, Tydzień 6 =
 * zastosowanie).
 *
 * Rozszerza, nie duplikuje, personalizację z v1.5 (public/css/widget-theme.css,
 * --iot-dw-bg/--iot-dw-text/--iot-dw-accent/--iot-dw-radius/--iot-dw-font-size,
 * patrz IOT_DW_Style_Settings): te pięć zmiennych zostają JEDYNYM miejscem,
 * gdzie użytkownik ustawia kolor/rozmiar/promień — tokeny poniżej są
 * WEWNĘTRZNE (nie konfigurowalne z panelu admina) i celowo wyrażone w `em`,
 * więc skalują się razem z `--iot-dw-font-size`, który już ustawia
 * font-size na `.iot-dw-widget` (patrz widget-theme.css) — większa czcionka
 * wybrana przez użytkownika automatycznie powiększa też odstępy, nie tylko
 * tekst. Żaden z tokenów poniżej nie niesie koloru tekstu/tła, więc żaden
 * nie wpływa na kontrast WCAG ustalony w v1.7 Tydzień 8 (docs/archiwum/audyt-a11y-v1-7.md)
 * — jedyny "kolor" tutaj to cień (czarny o niskiej krycistości), niemierzony
 * progami kontrastu tekstu, bo nie jest tekstem/tłem.
 */

.iot-dw-widget {
	/*
	 * Skala typografii — mnożniki względem --iot-dw-font-size (bazowy
	 * rozmiar widgetu), nie osobne wartości px. Nazwy odpowiadają istniejącym
	 * rozmiarom już używanym w widget-styles.css (2xs=stopka/branding,
	 * xs=etykiety, sm=wartości list/gauge-label, lg=wartość gauge/wykresu,
	 * xl=hero-liczba karty) — Tydzień 6 podmienia te zahardkodowane wartości
	 * na poniższe zmienne, nie wprowadza nowej skali od zera.
	 */
	--iot-dw-text-2xs: 0.75em;
	--iot-dw-text-xs: 0.85em;
	--iot-dw-text-sm: 0.9em;
	--iot-dw-text-md: 1em;
	--iot-dw-text-lg: 1.4em;
	--iot-dw-text-xl: 2em;

	/* Wagi czcionki — nazwane, nie gołe liczby, żeby Tydzień 6 nie zgadywał, która wartość do czego. */
	--iot-dw-weight-regular: 400;
	--iot-dw-weight-medium: 500;
	--iot-dw-weight-semibold: 600;
	--iot-dw-weight-bold: 700;

	/*
	 * Skala odstępów (padding/gap/margin) — też w `em`, z tego samego powodu
	 * co skala typografii. 3xs/2xs pokrywają drobne odstępy (etykieta pod
	 * wartością, jednostka obok liczby), lg/xl pokrywają padding
	 * karty/siatki i odstęp między widgetami w gridzie.
	 */
	--iot-dw-space-3xs: 0.15em;
	--iot-dw-space-2xs: 0.25em;
	--iot-dw-space-xs: 0.35em;
	--iot-dw-space-sm: 0.5em;
	--iot-dw-space-md: 0.75em;
	--iot-dw-space-lg: 1em;
	--iot-dw-space-xl: 1.5em;

	/*
	 * Promień dla WEWNĘTRZNYCH elementów chrome (np. tło błędu w liście/
	 * siatce), niezależny od --iot-dw-radius (to zostaje wyłącznie
	 * user-facing promień karty/listy/sparkline/siatki, patrz
	 * IOT_DW_Style_Settings) — dwa osobne pokrętła, bo są dwoma różnymi
	 * rzeczami: jedno użytkownik świadomie ustawia w Appearance, drugie to
	 * wewnętrzny detal stylu, którego nikt nie powinien musieć konfigurować.
	 */
	--iot-dw-radius-sm: 4px;

	/*
	 * Cienie/elevation — trzy poziomy, od subtelnego (odróżnienie karty od
	 * tła strony) po wyraźny (stan hover/focus, jeśli Tydzień 6 go doda).
	 * Niska krycistość czerni działa rozsądnie na jasnym TLE; na ciemnym
	 * tle (personalizacja v1.5) cień robi się prawie niewidoczny, co jest
	 * akceptowalnym, nieszkodliwym zachowaniem cieni (nie tekstu/kontrastu),
	 * nie regresją.
	 */
	--iot-dw-shadow-sm: 0 1px 2px rgba( 0, 0, 0, 0.06 );
	--iot-dw-shadow-md: 0 2px 8px rgba( 0, 0, 0, 0.08 );
	--iot-dw-shadow-lg: 0 8px 24px rgba( 0, 0, 0, 0.12 );
}