shared.css

:root {
	/* base spacing size */
	--space: 1rem;

	/* spacings derived from base size */
	--space-1: calc(0.25 * var(--space)); /* 4px */
	--space-2: calc(0.5 * var(--space)); /* 8px */
	--space-4: calc(1 * var(--space)); /* 16px */
	--space-6: calc(1.5 * var(--space)); /* 24px */
	--space-8: calc(2 * var(--space)); /* 32px */
	--space-12: calc(3 * var(--space)); /* 48px */
	--space-16: calc(4 * var(--space)); /* 64px */

	/* base font size */
	--text: 1rem;

	/* font sizes derived from base size */
	--text-xs: calc(0.75 * var(--text)); /* 12px */
	--text-sm: calc(0.875 * var(--text)); /* 14px */
	--text-base: calc(1 * var(--text)); /* 16px */
	--text-lg: calc(1.125 * var(--text)); /* 18px */
	--text-xl: calc(1.5 * var(--text)); /* 24px */
	--text-2xl: calc(2 * var(--text)); /* 32px */
	--text-3xl: calc(2.75 * var(--text)); /* 44px */
	--text-4xl: calc(4 * var(--text)); /* 64px */

	/* line heights */
	--leading-label: 1.3;
	--leading-paragraph: 1.5;

	/* shades (monochrome colors) */
	--shade-0: hsl(0 0% 100%);
	--shade-50: hsl(0 0% 96.9%);
	--shade-100: hsl(0 0% 92.2%);
	--shade-200: hsl(0 0% 82%);
	--shade-300: hsl(0 0% 72.2%);
	--shade-400: hsl(0 0% 63.1%);
	--shade-500: hsl(0 0% 52.9%);
	--shade-600: hsl(0 0% 43.1%);
	--shade-700: hsl(0 0% 32.9%);
	--shade-800: hsl(0 0% 23.1%);
	--shade-900: hsl(0 0% 13.3%);
	--shade-950: hsl(0 0% 9%);
}

@media (max-width: 768px) {
	body:not(.embedded) {
		/* responsive base font size change test */
		--text: 0.875rem;
	}
}