Barebone Baseline

src/styles/typography.css

@@ -0,0 +1,58 @@
+:root {
+  /* === Font Families === */
+  --font-header: var(--font-geist-sans);
+  --font-display: var(--font-blaka);
+  --font-body: var(--font-geist-mono);
+  --font-mono: var(--font-geist-mono);
+  --font-symbols: var();
+
+  /* === Type Scale === */
+  --typo-size-responsive: clamp(1rem, 2.5vw, 1.25rem);
+  --typo-size-base: 16px;
+  --typo-size-8xl: 8em;
+  --typo-size-7xl: 6.375em;
+  --typo-size-6xl: 5.0625em;
+  --typo-size-5xl: 4em;
+  --typo-size-4xl: 3.1875em;
+  --typo-size-3xl: 2.5em;
+  --typo-size-2xl: 2em;
+  --typo-size-xl: 1.5625em;
+  --typo-size-lg: 1.25em;
+  --typo-size-md: 1em;
+  --typo-size-sm: 0.8125em;
+  --typo-size-xs: 0.625em;
+  --typo-size-2xs: 0.5em;
+
+  /* === Font Weights === */
+  --typo-weight-thin: 100;
+  --typo-weight-extralight: 200;
+  --typo-weight-light: 300;
+  --typo-weight-normal: 400;
+  --typo-weight-medium: 500;
+  --typo-weight-semibold: 600;
+  --typo-weight-bold: 700;
+  --typo-weight-extrabold: 800;
+  --typo-weight-black: 900;
+
+  /* === Line Height === */
+  --typo-leading-compressed: 1;
+  --typo-leading-tight: 1.125;
+  --typo-leading-snug: 1.25;
+  --typo-leading-cozy: 1.375;
+  --typo-leading-normal: 1.5;
+  --typo-leading-relaxed: 1.625;
+  --typo-leading-comfortable: 1.75;
+  --typo-leading-loose: 1.875;
+  --typo-leading-spacious: 2;
+
+  /* === Vertical Spacing Multipliers === */
+  --vspace-compressed: 0.25;
+  --vspace-tight: 0.5;
+  --vspace-snug: 0.75;
+  --vspace-cozy: 1;
+  --vspace-normal: 1.25;
+  --vspace-relaxed: 1.5;
+  --vspace-comfortable: 1.75;
+  --vspace-loose: 2;
+  --vspace-spacious: 2.5;
+}