@layer utils {
	:root {
		--radius-base: 0.25rem; /* 4px */

		--radius-0:		0rem;							/* 0px */
		--radius-0-5:	calc(var(--radius-base) * 0.5);	/* 0.125rem | 2px */
		--radius-1:		calc(var(--radius-base) * 1);	/* 0.25rem | 4px */
		--radius-1-5:	calc(var(--radius-base) * 1.5);	/* 0.375rem | 6px */
		--radius-2:		calc(var(--radius-base) * 2);	/* 0.5rem | 8px */
		--radius-3:		calc(var(--radius-base) * 3);	/* 0.75rem | 12px */
		--radius-4:		calc(var(--radius-base) * 4);	/* 1rem | 16px */
		--radius-5:		calc(var(--radius-base) * 5);	/* 1.25rem | 20px */
		--radius-6:		calc(var(--radius-base) * 6);	/* 1.5rem | 24px */
		--radius-8:		calc(var(--radius-base) * 8);	/* 2rem | 32px */
		--radius-10:	calc(var(--radius-base) * 10);	/* 2.5rem | 40px */
		--radius-12:	calc(var(--radius-base) * 12);	/* 3rem | 48px */
		--radius-16:	calc(var(--radius-base) * 16);	/* 4rem | 64px */
		--radius-20:	calc(var(--radius-base) * 20);	/* 5rem | 80px */
		--radius-full:	9999px;							/* For pill/circular shapes */
	}
}
