/*
 * Warianty tła sekcji: kremowe / białe / ciemnofioletowe.
 *
 * Jedno miejsce prawdy dla wszystkich bloków z opcją "Tło sekcji".
 * Klasa is-tlo-{wariant} ustawia wyłącznie ZMIENNE - właściwe reguły
 * (co jest tłem, co tekstem, co kartą) zostają w style.css każdego bloku.
 *
 * Blok dołącza ten arkusz przez block.json ("style"), uchwyt jest
 * rejestrowany w inc/blocks.php. Plik nie zawiera żadnych selektorów
 * poza trzema klasami wariantów - ładuje się tylko tam, gdzie jest blok.
 *
 * Zmienne:
 *   --gg-tlo           tło całej sekcji
 *   --gg-tekst         kolor nagłówków, etykiet i tekstu
 *   --gg-karta         tło kart / kafelków wewnątrz sekcji
 *   --gg-linia         obramowania i linie podziału
 *   --gg-akcent-tekst  akcent sfery w wersji czytelnej na danym tle
 */

.is-tlo-kremowy {
	--gg-tlo: var( --wp--preset--color--base );
	--gg-tekst: var( --wp--preset--color--primary );
	--gg-karta: var( --wp--preset--color--white );
	--gg-linia: var( --wp--preset--color--muted );
	--gg-akcent-tekst: var( --gg-accent );
}

.is-tlo-bialy {
	--gg-tlo: var( --wp--preset--color--white );
	--gg-tekst: var( --wp--preset--color--primary );
	--gg-karta: var( --wp--preset--color--base );
	--gg-linia: var( --wp--preset--color--muted );
	--gg-akcent-tekst: var( --gg-accent );
}

.is-tlo-fioletowy {
	--gg-tlo: var( --wp--preset--color--primary );
	--gg-tekst: var( --wp--preset--color--base );
	/* Półprzezroczyste - karta ma być o ton jaśniejsza od tła, nie osobnym kolorem. */
	--gg-karta: rgba( 245, 239, 230, 0.06 );
	--gg-linia: rgba( 245, 239, 230, 0.2 );
	--gg-akcent-tekst: var( --gg-accent );
}

/*
 * Akcent sfery "Zdrowie" (ciemna zieleń) ma na fiolecie kontrast 1.7:1 -
 * nieczytelny. Na ciemnym tle zastępujemy go kremowym kolorem bazowym.
 */
.sfera-zdrowie .is-tlo-fioletowy {
	--gg-akcent-tekst: var( --wp--preset--color--base );
}