feat(typography): extend typography system with Google Fonts and font packs

modules/blox/assets/css/framework/base.css

@@ -4,15 +4,40 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizelegibility;
+    /* Apply the runtime font vars injected by Hugo's typography partial */
+    font-family: var(--font-body);
   }
 
   body {
-    line-height: 1.5;
+    font-family: var(--font-body);
+    font-weight: var(--font-weight-body, 400);
+    line-height: var(--font-leading-body, 1.6);
+    letter-spacing: var(--font-tracking-body, 0);
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-heading);
+    font-weight: var(--font-weight-heading, 700);
+    line-height: var(--font-leading-heading, 1.2);
+    letter-spacing: var(--font-tracking-heading, -0.02em);
+  }
+
+  code,
+  pre,
+  kbd,
+  samp {
+    font-family: var(--font-code);
   }
 }
 
 /* Gradient Mesh Animations */
 @keyframes float {
+
   0%,
   100% {
     transform: translateY(0) translateX(0);
@@ -61,7 +86,7 @@
   .prose a {
     text-decoration: underline;
     text-decoration-color: var(--color-primary-300);
-    font-weight: 500;
+    font-weight: var(--hb-font-weight-body-bold, 600);
   }
 
   .prose a:hover {
@@ -100,4 +125,4 @@
   .prose code:not(:where(pre *))::after {
     content: none;
   }
-}
+}

modules/blox/assets/css/framework/components.css

@@ -1,5 +1,6 @@
 /* Hugo Blox Framework Custom Classes */
 @layer components {
+
   /* Section styles for Hugo Blox blocks */
   .hbb-section {
     padding-top: 6rem;
@@ -8,7 +9,7 @@
 
   .section-subheading {
     font-size: 1.25rem;
-    font-weight: 700;
+    font-weight: var(--font-weight-heading, 700);
   }
 
   /* Home section background styles */
@@ -129,4 +130,4 @@
   section.dark {
     background-color: transparent;
   }
-}
+}