/* --------------------------------------------------------------------------
 * Välistysasteikko — kehittäjän tunnukset.
 *
 * theme.json sisältää vain ne neljä askelmaa, jotka näkyvät editorissa
 * (20, 40, 60, 80). Tässä määritellään niiden väliin ja ulkopuolelle
 * jäävät askelmat lohkojen omaan CSS:ään.
 *
 * Numerointi kertoo sijainnin: --froggy-space-50 on editorin askelmien
 * 40 ja 60 välissä.
 *
 * SÄÄNTÖ: näitä käytetään vain komponenttien sisäisiin välistyksiin.
 * Kaikki mitä käyttäjä voi editorissa säätää, pysyy theme.json:n neljässä
 * askelmassa — katso settings.spacing.spacingSizes.
 *
 * Arvot on laskettu samalla kaavalla kuin theme.json:n askelmat:
 * minimi 375px:n leveydellä, maksimi 1440px:n leveydellä.
 * ----------------------------------------------------------------------- */

:root {
	--froggy-space-05: calc(
		var(--wp--preset--spacing--20) * 0.5
	); /*   4 →   6px */
	--froggy-space-20: var(--wp--preset--spacing--20); /*   8 →  12px */
	--froggy-space-30: clamp(
		0.75rem,
		0.62rem + 0.56vw,
		1.125rem
	); /*  12 →  18px */
	--froggy-space-40: var(--wp--preset--spacing--40); /*  16 →  24px */
	--froggy-space-50: clamp(1.25rem, 0.99rem + 1.13vw, 2rem); /*  20 →  32px */
	--froggy-space-60: var(--wp--preset--spacing--60); /*  24 →  42px */
	--froggy-space-70: clamp(
		2rem,
		1.52rem + 2.07vw,
		3.375rem
	); /*  32 →  54px */
	--froggy-space-80: var(--wp--preset--spacing--80); /*  40 →  72px */
	--froggy-space-90: clamp(3.5rem, 2.62rem + 3.76vw, 6rem); /*  56 →  96px */
}