Added base styles, variables, and mixins

src/styles/variables/typography.css

@@ -0,0 +1,71 @@
+:root {
+  /* === TYPOGRAPHY === */
+
+  /* == Font Families == */
+  --font-header: var(--font-geist-sans);
+  --font-display: var(--font-blaka);
+  --font-body: var(--font-iosevka-slab);
+  --font-mono: var(--font-iosevka-mono);
+
+  /* == Font Sizes == */
+  --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;
+
+  /* == Letter Spacing == */
+  --typo-spacing-tightest: -0.05em;
+  --typo-spacing-tighter: -0.025em;
+  --typo-spacing-tight: -0.0125em;
+  --typo-spacing-normal: 0em;
+  --typo-spacing-relaxed: 0.025em;
+  --typo-spacing-comfortable: 0.05em;
+  --typo-spacing-loose: 0.1em;
+  --typo-spacing-looser: 0.15em;
+  --typo-spacing-loosest: 0.2em;
+
+  /* == Line Height == */
+  --typo-leading-compressed: 1.0;
+  --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.0;
+
+  /* == Vertical Spacing == */
+  --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;
+
+}