/**
 * Wspólne tokeny wyglądu wtyczki.
 *
 * ⚠️ JEDEN plik dla wszystkich modułów — i to jest cały jego powód istnienia.
 *
 * Zanim powstał, każdy moduł miał własną paletę: cztery zestawy kolorów, siedem
 * różnych zaokrągleń i trzy odcienie tekstu. Pasek dostawy, panel gratisów
 * i drabinka wyglądały jak z trzech różnych wtyczek, choć stoją jeden pod drugim
 * w tym samym koszyku.
 *
 * Ładowany jako zależność pozostałych arkuszy, więc trafia na stronę raz i tylko
 * wtedy, gdy którykolwiek moduł faktycznie coś renderuje.
 *
 * Motyw nadpisuje dowolny token u siebie — wystarczy jedna reguła `:root`.
 *
 * @package WB_Promotions
 */

:root {
	/*
	 * STANY. Kolor niesie informację, zanim klient przeczyta zdanie:
	 * różowy — czegoś brakuje, miętowy — warunek spełniony.
	 */
	--wbp-state-pending: #edb5b4;
	--wbp-state-done: #bce2da;

	/* Komunikat o błędzie — jedyny kolor semantyczny poza dwoma stanami. */
	--wbp-state-error: #b32d2e;

	/* Powierzchnie. */
	--wbp-surface: #ffffff;
	--wbp-surface-sunk: #f4f4f3;
	--wbp-line: #e3e3e1;

	/* Typografia. */
	--wbp-text: #0c0c0c;
	--wbp-text-muted: #6f7175;

	/*
	 * Kanty. Płaskie z założenia — pasek dostawy nadaje ton, a reszta go trzyma.
	 * Sklep, który woli zaokrąglenia, zmienia jedną wartość i dotyczy to
	 * wszystkich modułów naraz.
	 */
	--wbp-radius: 0;

	/* Odstęp sekcji od reszty strony. */
	--wbp-gap: 1.25rem;

	/* Szerokość, na której zatrzymują się sekcje pełnowymiarowe. */
	--wbp-max: 1280px;
}