Added base styles, variables, and mixins

src/styles/mixins/containers.css

@@ -0,0 +1,7 @@
+@define-mixin responsive-wrapper $vspacing: 0 $hspacing: var(--spacing-comfortable) {
+  @mixin mx auto;
+
+  max-width: clamp(60ch, 90vw, 90ch);
+  padding: $vspacing $hspacing;
+  font-size: var(--typo-size-responsive);
+}

src/styles/mixins/grids.css

@@ -0,0 +1,20 @@
+@define-mixin grid-col $col $spacing {
+  display: grid;
+  grid-template-columns: repeat($col, minmax(0, 1fr));
+  gap: $spacing;
+}
+
+
+@define-mixin grid-rows $row $spacing {
+  display: grid;
+  grid-template-rows: repeat(1, minmax(0, 1fr));
+  gap: $spacing;
+}
+
+@define-mixin grid-col-span $span {
+  grid-column: span $span / span $span;
+}
+
+@define-mixin grid-row-span $span {
+  grid-row: span $span / span $span;
+}

src/styles/mixins/spacing.css

@@ -0,0 +1,86 @@
+@∂efine-mixin m $spacing {
+  margin: $spacing;
+}
+
+@∂efine-mixin mt $spacing {
+  margin-top: $spacing;
+}
+
+@∂efine-mixin mb $spacing {
+  margin-bottom: $spacing;
+}
+
+@define-mixin ml $spacing {
+  margin-left: $spacing;
+}
+
+@define-mixin mr $spacing {
+  margin-right: $spacing;
+}
+
+@define-mixin my $spacing {
+  margin-block: $spacing;
+}
+
+@define-mixin mx $spacing {
+  margin-inline: $spacing;
+}
+
+@define-mixin ms $spacing {
+  margin-line-start: $spacing;
+}
+
+@define-mixin me $spacing {
+  margin-line-end: $spacing;
+}
+
+@define-mixin space-x $spacing $reverse: 0 {
+  & > :not(:last-child) {
+    margin-inline-start: calc($spacing * $reverse);
+    margin-inline-end: calc($spacing * (1 - $reverse));
+  }
+}
+
+@∂efine-mixin p $spacing {
+  padding: $spacing;
+}
+
+@∂efine-mixin pt $spacing {
+  padding-top: $spacing;
+}
+
+@∂efine-mixin pb $spacing {
+  padding-bottom: $spacing;
+}
+
+@define-mixin pl $spacing {
+  padding-left: $spacing;
+}
+
+@define-mixin pr $spacing {
+  padding-right: $spacing;
+}
+
+@define-mixin py $spacing {
+  padding-block: $spacing;
+}
+
+@define-mixin px $spacing {
+  padding-inline: $spacing;
+}
+
+@define-mixin ps $spacing {
+  padding-line-start: $spacing;
+}
+
+@define-mixin pe $spacing {
+  padding-line-end: $spacing;
+}
+
+@define-mixin space-y $spacing $reverse: 0 {
+  & > :not(:last-child) {
+    margin-block-start: calc($spacing * $reverse);
+    margin-block-end: calc($spacing * (1 - $reverse));
+  }
+}
+

src/styles/mixins/typography.css

@@ -0,0 +1,78 @@
+@define-mixin text-8xl $leading: 1 {
+  font-size: var(--typo-size-8xl);
+  line-height: calc($leading * 1.0435);
+  letter-spacing: -0.0219em;
+}
+
+@define-mixin text-7xl $leading: 1 {
+  font-size: var(--typo-size-7xl);
+  line-height: calc($leading * 1.098);
+  letter-spacing: -0.0198em;
+}
+
+@define-mixin text-6xl $leading: 1 {
+  font-size: var(--typo-size-6xl);
+  line-height: calc($leading * 1.0864);
+  letter-spacing: -0.0172em;
+}
+
+@define-mixin text-5xl $leading:1 {
+  font-size: var(--typo-size-5xl);
+  line-height: calc($leading * 1.125);
+  letter-spacing: -0.0137em;
+}
+
+@define-mixin text-4xl $leading:1 {
+  font-size: var(--typo-size-4xl);
+  line-height: calc($leading * 1.1765);
+  letter-spacing: -0.0096em;
+}
+
+@define-mixin text-3xl $leading:1 {
+  font-size: var(--typo-size-3xl);
+  line-height: calc($leading * 1.2);
+  letter-spacing: -0.004em;
+}
+
+@define-mixin text-2xl $leading:1 {
+  font-size: var(--typo-size-2xl);
+  line-height: calc($leading * 1.25);
+  letter-spacing: 0.0025em;
+}
+
+@define-mixin text-xl {
+  font-size: var(--typo-size-xl);
+  line-height: calc($leading * 1.28);
+  letter-spacing: 0.0116em;
+}
+
+@define-mixin text-lg {
+  font-size: var(--typo-size-lg);
+  line-height: calc($leading * 1.4);
+  letter-spacing: 0.022em;
+}
+
+@define-mixin text-md {
+  font-size: var(--typo-size-md);
+  line-height: calc($leading * 1.5);
+  letter-spacing: 0.035em;
+}
+
+@define-mixin text-sm {
+  font-size: var(--typo-size-sm);
+  line-height: calc($leading * 1.5385);
+  letter-spacing: 0.05em;
+}
+
+@define-mixin text-xs {
+  font-size: var(--typo-size-xs);
+  line-height: calc($leading * 2);
+  letter-spacing: 0.074em;
+}
+
+@define-mixin text-2xs {
+  font-size: var(--typo-size-2xs);
+  line-height: calc($leading * 2);
+  letter-spacing: 0.1em;
+}
+