Initial commit

styles/typography.css

@@ -0,0 +1,102 @@
+:root {
+  /* Font sizes */
+  --font-size-body: 1rem;
+  --font-size-small: 0.875rem;
+  --font-size-lead: 1.125rem;
+  --font-size-h1: clamp(
+    2.566rem,
+    calc(
+      2.566rem + (3.247rem - 2.566rem) * ((100vw - 768px) / (1024px - 768px))
+    ),
+    3.247rem
+  );
+  --font-size-h2: clamp(
+    2.027rem,
+    calc(
+      2.027rem + (2.566rem - 2.027rem) * ((100vw - 768px) / (1024px - 768px))
+    ),
+    2.566rem
+  );
+
+  --font-size-h3: clamp(
+    1.602rem,
+    calc(
+      1.602rem + (2.027rem - 1.602rem) * ((100vw - 768px) / (1024px - 768px))
+    ),
+    2.027rem
+  );
+
+  --font-size-h4: clamp(
+    1.266rem,
+    calc(
+      1.266rem + (1.602rem - 1.266rem) * ((100vw - 768px) / (1024px - 768px))
+    ),
+    1.602rem
+  );
+
+  --line-height-body: 1.5;
+  --line-height-heading: 1.2;
+
+  --letter-spacing-tight: -0.02em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.025em;
+  --letter-spacing-wider: 0.05em;
+  --letter-spacing-widest: 0.12em;
+
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  --font-body-color: #000000;
+  --font-heading-color: #302e2e;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+p,
+li {
+  font-size: var(--font-size-body);
+  line-height: var(--line-height-body);
+}
+
+small,
+.text-small {
+  font-size: var(--font-size-small);
+  line-height: 1.4;
+}
+
+.lead,
+.text-lead {
+  font-size: var(--font-size-lead);
+  line-height: 1.6;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: var(--line-height-heading);
+  color: var(--font-heading-color);
+  font-family: var(--font-heading);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+h1 {
+  font-size: var(--font-size-h1);
+}
+h2 {
+  font-size: var(--font-size-h2);
+}
+h3 {
+  font-size: var(--font-size-h3);
+}
+h4 {
+  font-size: var(--font-size-h4);
+}