more granular

css/durations.css

@@ -1,4 +1,4 @@
-:where(html) {
+:where(:root) {
 	--minute: 60s;
 	--hour: calc(60 * var(--minute));
 	--day: calc(24 * var(--hour));

css/font/families.css

@@ -0,0 +1,7 @@
+:where(:root) {
+	--font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
+		Noto Sans, sans-serif;
+	--font-serif: ui-serif, serif;
+	--font-mono: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace,
+		SF Mono, Monaco, Droid Sans Mono, Source Code Pro, monospace;
+}

css/font/index.css

@@ -0,0 +1,6 @@
+@import 'families.css';
+@import 'weight.css';
+@import 'lineheight.css';
+@import 'letterspacing.css';
+@import '../sizes/font.css';
+@import '../sizes/fontfluid.css';

css/font/letterspacing.css

@@ -0,0 +1,10 @@
+:where(:root) {
+	--font-letterspacing-0: -0.05em;
+	--font-letterspacing-1: 0.025em;
+	--font-letterspacing-2: 0.05em;
+	--font-letterspacing-3: 0.075em;
+	--font-letterspacing-4: 0.15em;
+	--font-letterspacing-5: 0.5em;
+	--font-letterspacing-6: 0.75em;
+	--font-letterspacing-7: 1em;
+}

css/font/lineheight.css

@@ -0,0 +1,9 @@
+:where(:root) {
+	--font-lineheight-00: 0.95;
+	--font-lineheight-0: 1.1;
+	--font-lineheight-1: 1.25;
+	--font-lineheight-2: 1.375;
+	--font-lineheight-3: 1.5;
+	--font-lineheight-4: 1.75;
+	--font-lineheight-5: 2;
+}

css/font/weight.css

@@ -0,0 +1,11 @@
+:where(:root) {
+	--font-weight-1: 100;
+	--font-weight-2: 200;
+	--font-weight-3: 300;
+	--font-weight-4: 400;
+	--font-weight-5: 500;
+	--font-weight-6: 600;
+	--font-weight-7: 700;
+	--font-weight-8: 800;
+	--font-weight-9: 900;
+}

css/index.css

@@ -1,6 +1,6 @@
 @import 'media-queries.css';
-@import 'fonts.css';
-@import 'sizes.css';
+@import 'font/index.css';
+@import 'sizes/index.css';
 @import 'aspect-ratios.css';
 @import 'z-index.css';
 @import 'borders.css';

css/index.v2.css

@@ -1,10 +1,15 @@
 @import 'media-queries.css';
-@import 'fonts.css';
-@import 'sizes.css';
+@import 'font/families.css';
+@import 'font/weight.css';
+@import 'sizes/font.css';
+@import 'sizes/fontfluid.css';
+@import 'sizes/size.css';
+@import 'sizes/fluid.css';
+@import 'sizes/header.css';
+@import 'sizes/content.css';
 @import 'aspect-ratios.css';
 @import 'z-index.css';
 @import 'borders.css';
 @import 'shadows.css';
 @import 'motion/easings.css';
 @import 'color/palette.oklch.css';
-@import 'color/gradients.css';

css/sizes/content.css

@@ -0,0 +1,5 @@
+:where(:root) {
+	--size-content-1: 20ch;
+	--size-content-2: 45ch;
+	--size-content-3: 60ch;
+}

css/sizes/fluid.css

@@ -0,0 +1,12 @@
+:where(:root) {
+	--size-fluid-1: clamp(0.5rem, 1vw, 1rem);
+	--size-fluid-2: clamp(1rem, 2vw, 1.5rem);
+	--size-fluid-3: clamp(1.5rem, 3vw, 2rem);
+	--size-fluid-4: clamp(2rem, 4vw, 3rem);
+	--size-fluid-5: clamp(4rem, 5vw, 5rem);
+	--size-fluid-6: clamp(5rem, 7vw, 7.5rem);
+	--size-fluid-7: clamp(7.5rem, 10vw, 10rem);
+	--size-fluid-8: clamp(10rem, 20vw, 15rem);
+	--size-fluid-9: clamp(15rem, 30vw, 20rem);
+	--size-fluid-10: clamp(20rem, 40vw, 30rem);
+}

css/sizes/font.css

@@ -0,0 +1,12 @@
+:where(:root) {
+	--font-size-00: 0.5rem;
+	--font-size-0: 0.75rem;
+	--font-size-1: 1rem;
+	--font-size-2: 1.1rem;
+	--font-size-3: 1.25rem;
+	--font-size-4: 1.5rem;
+	--font-size-5: 2rem;
+	--font-size-6: 2.5rem;
+	--font-size-7: 3rem;
+	--font-size-8: 3.5rem;
+}

css/sizes/fontfluid.css

@@ -0,0 +1,6 @@
+:where(:root) {
+	--font-size-fluid-0: clamp(0.75rem, 2vw, 1rem);
+	--font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
+	--font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);
+	--font-size-fluid-3: clamp(2rem, 9vw, 3.5rem);
+}

css/sizes/header.css

@@ -0,0 +1,5 @@
+:where(:root) {
+	--size-header-1: 20ch;
+	--size-header-2: 25ch;
+	--size-header-3: 35ch;
+}

css/sizes/index.css

@@ -0,0 +1,6 @@
+@import 'size.css';
+@import 'fluid.css';
+@import 'content.css';
+@import 'header.css';
+@import 'media.css';
+@import 'relative.css';

css/sizes/media.css

@@ -0,0 +1,9 @@
+:where(:root) {
+	--size-xxs: 240px;
+	--size-xs: 360px;
+	--size-sm: 480px;
+	--size-md: 768px;
+	--size-lg: 1024px;
+	--size-xl: 1440px;
+	--size-xxl: 1920px;
+}

css/sizes/relative.css

@@ -0,0 +1,19 @@
+:where(:root) {
+	--size-relative-000: -0.5ch;
+	--size-relative-00: -0.25ch;
+	--size-relative-1: 0.25ch;
+	--size-relative-2: 0.5ch;
+	--size-relative-3: 1ch;
+	--size-relative-4: 1.25ch;
+	--size-relative-5: 1.5ch;
+	--size-relative-6: 1.75ch;
+	--size-relative-7: 2ch;
+	--size-relative-8: 3ch;
+	--size-relative-9: 4ch;
+	--size-relative-10: 5ch;
+	--size-relative-11: 7.5ch;
+	--size-relative-12: 10ch;
+	--size-relative-13: 15ch;
+	--size-relative-14: 20ch;
+	--size-relative-15: 30ch;
+}

css/sizes/size.css

@@ -0,0 +1,19 @@
+:where(:root) {
+	--size-000: -0.5rem;
+	--size-00: -0.25rem;
+	--size-1: 0.25rem;
+	--size-2: 0.5rem;
+	--size-3: 1rem;
+	--size-4: 1.25rem;
+	--size-5: 1.5rem;
+	--size-6: 1.75rem;
+	--size-7: 2rem;
+	--size-8: 3rem;
+	--size-9: 4rem;
+	--size-10: 5rem;
+	--size-11: 7.5rem;
+	--size-12: 10rem;
+	--size-13: 15rem;
+	--size-14: 20rem;
+	--size-15: 30rem;
+}