moved dimensions and radi to their own file

index.css

@@ -3,6 +3,8 @@
 @import url('src/system-typography.css');
 @import url('src/system-stroke.css');
 @import url('src/system-spacing.css');
+@import url('src/system-dimensions.css');
+@import url('src/system-radi.css');
 @import url('src/system-custom-colors.css');
 
 @import url("src/system-selectors.css");

src/system-dimensions.css

@@ -0,0 +1,6 @@
+@layer --system {
+	:root{
+		--system-dimension-min-width: 320px; /* 320px: 16px => 5vw/cqw */
+		--system-dimension-content-width: 85ch; /* Approx. 756px: 16px => 2.12cqw */
+	}
+}

src/system-radi.css

@@ -0,0 +1,5 @@
+@layer --system {
+	:root{
+		--system-radius: clamp(3px, 0.6666ex, var(--system-spacing-single));
+	}
+}

src/system-spacing.css

@@ -1,32 +1,33 @@
 @layer --system {
 	:root{
 		/* UNITS */
-		--system-spacing-single: clamp(8px, 1rem, 16px);
-		--system-spacing-double: clamp(16px, 2rem, 32px);
+		--system-spacing-single: clamp(8px, 1rem, 24px);
+		--system-spacing-double: clamp(16px, 2rem, 48px);
 
 		/* PAGE */
-		--system-spacing-layout: max(var(--system-spacing-single), 5vw);
+		--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), 2.5ex);
+		--system-spacing-heading-block-end: var(--system-spacing-main);
 
 		/* MAIN */
-		--system-spacing-content: clamp(var(--system-spacing-single), 1ex, var(--system-spacing-double));
+		--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);
-
-		/* HEADING */
-		--system-spacing-heading-block-start: max(var(--system-spacing-double), 2.5ex);
+		--system-spacing-section-inline: 0;
 
 		/* GAP */
-		--system-spacing-column-gap: clamp(var(--system-spacing-single), 5cqw, var(--system-spacing-double));
-		--system-spacing-row-gap: clamp(var(--system-spacing-single), 5cqw, var(--system-spacing-double));
+		--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 */
 		--system-spacing-element: 0.5ex 0.5ch;
 		--system-spacing-button: 0.8ex 1.5ch;
 
-		--system-dimension-min-width: 320px;
-		--system-dimension-content-width: 85ch;
-
-		--system-radius: clamp(3px, 0.6666ex, var(--system-spacing-single));
 	}
 }