src/system-spacing.css
@layer --system {
	@supports (margin: 1cap) {
		:root {
			--_elememt-spacing-block-size: calc(1em - 1cap);
			--_elememt-spacing-inline-size: calc(1em - 1ch);
			--_interactive-spacing-block-size: calc(var(--_elememt-spacing-block-size) * 1.5);
			--_interactive-spacing-inline-size: calc(var(--_elememt-spacing-inline-size) * 2.75);
		}
	}
	@supports not (margin: 1cap) {
		:root {
			--_elememt-spacing-block-size: 0.4ex;
			--_elememt-spacing-inline-size: 0.5ch;
			--_interactive-spacing-block-size: 0.8ex;
			--_interactive-spacing-inline-size: 1.5ch;
		}
	}
	:root {
		/* UNITS */
		--system-spacing-single: clamp(8px, 1rem, 24px);
		--system-spacing-double: clamp(16px, 2rem, 48px);

		/* PAGE */
		--system-spacing-page-block: 0;
		--system-spacing-page-inline: max(var(--system-spacing-single), 5vw);

		/* HEADING */
		--system-spacing-heading-block-start: max(var(--system-spacing-double), 3ex);
		--system-spacing-heading-block-end: var(--system-spacing-main);

		/* MAIN */
		--system-spacing-main: clamp(var(--system-spacing-single), 1ex, var(--system-spacing-double));
		--system-spacing-main-block: clamp(var(--system-spacing-single), 1ex, var(--system-spacing-double));
		--system-spacing-main-inline: clamp(var(--system-spacing-single), 1ex, var(--system-spacing-double));

		/* SECTION */
		--system-spacing-section-block: max(var(--system-spacing-double), 2.5ex);
		--system-spacing-section-inline: 0;

		/* GAP */
		--system-spacing-column-gap: clamp(var(--system-spacing-single), 3cqw, var(--system-spacing-double));
		--system-spacing-row-gap: clamp(var(--system-spacing-single), 3cqw, var(--system-spacing-double));

		/* ELEMENTS (Flow: inline) */
		--system-spacing-element-block: var(--_elememt-spacing-block-size);
		--system-spacing-element-inline: var(--_elememt-spacing-inline-size);
		--system-spacing-element: var(--system-spacing-element-block) var(--system-spacing-element-inline);

		/* ELEMENTS (Flow: inline / block) */
		--system-spacing-interactive-block: var(--_interactive-spacing-block-size);
		--system-spacing-interactive-inline: var(--_interactive-spacing-inline-size);
		--system-spacing-interactive: var(--system-spacing-interactive-block) var(--system-spacing-interactive-inline);
	}
}
