/*
 * Fortuna UI — patroon op donkergroene vlakken (datablok groen, gesplitste kaart, voet, schapopener, lege afbeelding).
 * Zeer subtiel en klein. Alles via tokens (tokens.css): --fu-patroon-kleur, --fu-patroon-maat, --fu-patroon-lijn, --fu-patroon-glans.
 *
 * Kiezen: zet op <html> data-patroon="arcering" | "stippen" | "ruit" (zonder attribuut: alleen de gloed),
 * of zet een van de klassen fu-patroon--arcering / --stippen / --ruit op één vlak.
 * Laad dit bestand ná block.css, feature.css, site-footer.css en shelf.css.
 */
.fu-block--brand,
.fu-split,
.fu-footer,
.fu-shelf__item--brand,
.is-leeg {
	background-image: var(--fu-patroon-glans);
}

[data-patroon="arcering"] :is(.fu-block--brand, .fu-split, .fu-footer, .fu-shelf__item--brand, .is-leeg),
.fu-patroon--arcering {
	background-image:
		repeating-linear-gradient(135deg, transparent 0 calc(var(--fu-patroon-maat) - var(--fu-patroon-lijn)), var(--fu-patroon-kleur) calc(var(--fu-patroon-maat) - var(--fu-patroon-lijn)) var(--fu-patroon-maat)),
		var(--fu-patroon-glans);
}

[data-patroon="ruit"] :is(.fu-block--brand, .fu-split, .fu-footer, .fu-shelf__item--brand, .is-leeg),
.fu-patroon--ruit {
	background-image:
		repeating-linear-gradient(45deg, transparent 0 calc(var(--fu-patroon-maat) - var(--fu-patroon-lijn)), var(--fu-patroon-kleur) calc(var(--fu-patroon-maat) - var(--fu-patroon-lijn)) var(--fu-patroon-maat)),
		repeating-linear-gradient(135deg, transparent 0 calc(var(--fu-patroon-maat) - var(--fu-patroon-lijn)), var(--fu-patroon-kleur) calc(var(--fu-patroon-maat) - var(--fu-patroon-lijn)) var(--fu-patroon-maat)),
		var(--fu-patroon-glans);
}

[data-patroon="stippen"] :is(.fu-block--brand, .fu-split, .fu-footer, .fu-shelf__item--brand, .is-leeg),
.fu-patroon--stippen {
	background-image:
		radial-gradient(circle at center, var(--fu-patroon-kleur) var(--fu-patroon-lijn), transparent calc(var(--fu-patroon-lijn) + var(--fu-patroon-zacht))),
		var(--fu-patroon-glans);
	background-size: var(--fu-patroon-maat) var(--fu-patroon-maat), auto;
}