diff --git a/modules/blox/assets/css/blox/navbar.css b/modules/blox/assets/css/blox/navbar.css
index 278f7391..986ddac7 100644
--- a/modules/blox/assets/css/blox/navbar.css
+++ b/modules/blox/assets/css/blox/navbar.css
@@ -6,7 +6,7 @@
 
 .navbar-brand {
   /* @apply text-black dark:text-white text-xl font-semibold; */
-  color: var(--color-header-fg);
+  color: var(--hb-color-header-fg);
   @apply text-xl font-semibold;
 }
 
@@ -42,8 +42,8 @@ input#nav-toggle:checked ~ #nav-menu {
 }
 
 #site-header.header {
-  background-color: var(--color-header-bg);
-  color: var(--color-header-fg);
+  background-color: var(--hb-color-header-bg);
+  color: var(--hb-color-header-fg);
   @apply py-3 shadow;
 }
 
@@ -55,7 +55,7 @@ input#nav-toggle:checked ~ #nav-menu {
 
 .nav-link {
   /* @apply dark:text-white block p-3 font-semibold transition lg:px-2 lg:py-3; */
-  color: var(--color-header-fg);
+  color: var(--hb-color-header-fg);
   @apply block p-3 font-semibold transition lg:px-2 lg:py-3;
 }
 
diff --git a/modules/blox/assets/css/config/theme.css b/modules/blox/assets/css/config/theme.css
index 58c84d45..d6956229 100644
--- a/modules/blox/assets/css/config/theme.css
+++ b/modules/blox/assets/css/config/theme.css
@@ -323,26 +323,26 @@
   /* Note: Providing these palettes in @theme ensures theme-pack mappings like var(--color-rose-600) always resolve */
 
   /* Font families */
-  --font-family-sans: inter var, ui-sans-serif, system-ui, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
-  --font-heading: var(--font-family-sans);
-  --font-body: var(--font-family-sans);
-  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  --font-nav: var(--font-heading);
+  --hb-font-family-sans: inter var, ui-sans-serif, system-ui, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
+  --hb-font-heading: var(--hb-font-family-sans);
+  --hb-font-body: var(--hb-font-family-sans);
+  --hb-font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --hb-font-nav: var(--hb-font-heading);
 
   /* Font weights */
-  --font-weight-heading: 700;
-  --font-weight-body: 400;
+  --hb-font-weight-heading: 700;
+  --hb-font-weight-body: 400;
   --hb-font-weight-body-bold: 600;
 
   /* Line heights */
-  --font-leading-heading: 1.2;
-  --font-leading-body: 1.6;
-  --font-leading-code: 1.5;
+  --hb-font-leading-heading: 1.2;
+  --hb-font-leading-body: 1.6;
+  --hb-font-leading-code: 1.5;
 
   /* Letter spacing */
-  --font-tracking-heading: -0.02em;
-  --font-tracking-body: 0;
-  --font-tracking-caps: 0.05em;
+  --hb-font-tracking-heading: -0.02em;
+  --hb-font-tracking-body: 0;
+  --hb-font-tracking-caps: 0.05em;
 
   /* Font sizes */
   --font-size-xs: 0.75rem;
diff --git a/modules/blox/assets/css/framework/base.css b/modules/blox/assets/css/framework/base.css
index 877cad19..fc74aa19 100644
--- a/modules/blox/assets/css/framework/base.css
+++ b/modules/blox/assets/css/framework/base.css
@@ -5,14 +5,14 @@
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizelegibility;
     /* Apply the runtime font vars injected by Hugo's typography partial */
-    font-family: var(--font-body);
+    font-family: var(--hb-font-body);
   }
 
   body {
-    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);
+    font-family: var(--hb-font-body);
+    font-weight: var(--hb-font-weight-body, 400);
+    line-height: var(--hb-font-leading-body, 1.6);
+    letter-spacing: var(--hb-font-tracking-body, 0);
   }
 
   h1,
@@ -21,17 +21,17 @@
   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);
+    font-family: var(--hb-font-heading);
+    font-weight: var(--hb-font-weight-heading, 700);
+    line-height: var(--hb-font-leading-heading, 1.2);
+    letter-spacing: var(--hb-font-tracking-heading, -0.02em);
   }
 
   code,
   pre,
   kbd,
   samp {
-    font-family: var(--font-code);
+    font-family: var(--hb-font-code);
   }
 }
 
diff --git a/modules/blox/assets/css/framework/components.css b/modules/blox/assets/css/framework/components.css
index a6f8bdc8..ec25cb11 100644
--- a/modules/blox/assets/css/framework/components.css
+++ b/modules/blox/assets/css/framework/components.css
@@ -8,7 +8,7 @@
 
   .section-subheading {
     font-size: 1.25rem;
-    font-weight: var(--font-weight-heading, 700);
+    font-weight: var(--hb-font-weight-heading, 700);
   }
 
   /* Home section background styles */
diff --git a/modules/blox/layouts/_partials/components/headers/navbar-simple.html b/modules/blox/layouts/_partials/components/headers/navbar-simple.html
index 68af52cd..a41ec77d 100644
--- a/modules/blox/layouts/_partials/components/headers/navbar-simple.html
+++ b/modules/blox/layouts/_partials/components/headers/navbar-simple.html
@@ -9,7 +9,7 @@
   <div class="flex w-full flex-wrap items-center justify-between px-3">
     <!-- Hamburger button for mobile view -->
     <button
-      class="block border-0 bg-transparent px-2 text-[var(--color-header-fg)] hover:no-underline hover:shadow-none focus:no-underline focus:shadow-none focus:outline-none focus:ring-0 lg:hidden"
+      class="block border-0 bg-transparent px-2 text-[var(--hb-color-header-fg)] hover:no-underline hover:shadow-none focus:no-underline focus:shadow-none focus:outline-none focus:ring-0 lg:hidden"
       type="button"
       data-te-collapse-init
       data-te-target="#collapse-main-navbar"
@@ -51,7 +51,7 @@
           class="my-4 pl-2 lg:my-0 lg:pl-2 lg:pr-1"
           data-te-nav-item-ref>
           <a
-            class="lg:px-2 text-[var(--color-header-fg)] hover:text-primary-500
+            class="lg:px-2 text-[var(--hb-color-header-fg)] hover:text-primary-500
             [&.active]:font-bold [&.active]:text-primary-500 {{ $activeClass }}"
             aria-current="page"
             href="{{ .URL | relLangURL }}"
@@ -63,7 +63,7 @@
         {{ if $show_search }}
         <li class="my-4 pl-2 lg:my-0 lg:pl-2 lg:pr-1">
           <a
-            class="lg:px-2 text-[var(--color-header-fg)] hover:text-primary-500
+            class="lg:px-2 text-[var(--hb-color-header-fg)] hover:text-primary-500
             [&.active]:font-bold [&.active]:text-primary-500"
             aria-current="page"
             href="#"
@@ -74,7 +74,7 @@
         {{ end }}
         {{ $show_mode_toggle := site.Params.hugoblox.header.theme_toggle | default true }}
         {{ if $show_mode_toggle }}
-        <li class="lg:px-2 text-[var(--color-header-fg)] hover:text-primary-500
+        <li class="lg:px-2 text-[var(--hb-color-header-fg)] hover:text-primary-500
             [&.active]:font-bold [&.active]:text-primary-500">
           <button class="theme-toggle mt-1" accesskey="t" title="">
                     <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
@@ -102,7 +102,7 @@
         {{/* Theme Picker */}}
         {{ if site.Params.hugoblox.header.theme_picker }}
         <li class="lg:px-2">
-          <select onchange="document.documentElement.setAttribute('data-theme-pack', this.value); localStorage.setItem('hb-theme-pack', this.value);" class="bg-transparent text-[var(--color-header-fg)] border-none focus:ring-0 cursor-pointer text-sm font-medium">
+          <select onchange="document.documentElement.setAttribute('data-theme-pack', this.value); localStorage.setItem('hb-theme-pack', this.value);" class="bg-transparent text-[var(--hb-color-header-fg)] border-none focus:ring-0 cursor-pointer text-sm font-medium">
             <option value="">Theme</option>
             {{ range $name, $data := site.Data.themes }}
               <option value="{{ $name }}">{{ $name | humanize }}</option>
@@ -125,7 +125,7 @@
 
         {{ $show_translations := site.Params.hugoblox.header.language_switcher | default true }}
         {{ if .IsTranslated | and $show_translations }}
-        <li class="lg:px-2 text-[var(--color-header-fg)] hover:text-primary-500
+        <li class="lg:px-2 text-[var(--hb-color-header-fg)] hover:text-primary-500
             [&.active]:font-bold [&.active]:text-primary-500">
           {{- partial "components/language-chooser.html" (dict "page" .) -}}
         </li>
diff --git a/modules/blox/layouts/_partials/components/headers/navbar.html b/modules/blox/layouts/_partials/components/headers/navbar.html
index 9f2c7976..d01c3fc8 100644
--- a/modules/blox/layouts/_partials/components/headers/navbar.html
+++ b/modules/blox/layouts/_partials/components/headers/navbar.html
@@ -33,7 +33,7 @@
     <input id="nav-toggle" type="checkbox" class="hidden" />
     <label
       for="nav-toggle"
-      class="order-3 cursor-pointer flex items-center lg:hidden text-[var(--color-header-fg)] lg:order-1">
+      class="order-3 cursor-pointer flex items-center lg:hidden text-[var(--hb-color-header-fg)] lg:order-1">
       <svg id="show-button" class="h-6 fill-current block" viewBox="0 0 20 20">
         <title>Open Menu</title>
         <path d="M0 3h20v2H0V3z m0 6h20v2H0V9z m0 6h20v2H0V0z"></path>
@@ -143,7 +143,7 @@
       {{ with $show_search }}
       <button
         aria-label="toggle search"
-        class="inline-block px-3 text-xl text-[var(--color-header-fg)] hover:text-primary-500 cursor-pointer"
+        class="inline-block px-3 text-xl text-[var(--hb-color-header-fg)] hover:text-primary-500 cursor-pointer"
         data-search-toggle>
         <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512" fill="currentColor"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
       </button>
@@ -151,7 +151,7 @@
 
       {{ $show_mode_toggle := site.Params.hugoblox.header.theme_toggle | default true }}
       {{ if $show_mode_toggle }}
-      <div class="px-3 text-[var(--color-header-fg)] hover:text-primary-500
+      <div class="px-3 text-[var(--hb-color-header-fg)] hover:text-primary-500
             [&.active]:font-bold [&.active]:text-primary-500">
         <button class="theme-toggle mt-1" accesskey="t" title="appearance">
           <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
@@ -179,7 +179,7 @@
       {{/* Theme Picker */}}
       {{ if site.Params.hugoblox.header.theme_picker }}
       <div class="px-3">
-        <select onchange="document.documentElement.setAttribute('data-theme-pack', this.value); localStorage.setItem('hb-theme-pack', this.value);" class="bg-transparent text-[var(--color-header-fg)] border-none focus:ring-0 cursor-pointer text-sm font-medium">
+        <select onchange="document.documentElement.setAttribute('data-theme-pack', this.value); localStorage.setItem('hb-theme-pack', this.value);" class="bg-transparent text-[var(--hb-color-header-fg)] border-none focus:ring-0 cursor-pointer text-sm font-medium">
           <option value="">Theme</option>
           {{ range $name, $data := site.Data.themes }}
             <option value="{{ $name }}">{{ $name | humanize }}</option>
@@ -203,7 +203,7 @@
 
       {{ $show_translations := site.Params.hugoblox.header.language_switcher | default true }}
       {{ if .IsTranslated | and $show_translations }}
-      <div class="pl-1 mr-5 text-[var(--color-header-fg)] hover:text-primary-500
+      <div class="pl-1 mr-5 text-[var(--hb-color-header-fg)] hover:text-primary-500
             [&.active]:font-bold [&.active]:text-primary-500">
         {{- partial "components/language-chooser.html" (dict "page" .) -}}
       </div>
diff --git a/modules/blox/layouts/_partials/functions/theme_variables.html b/modules/blox/layouts/_partials/functions/theme_variables.html
index c86f131c..4da4d8b4 100644
--- a/modules/blox/layouts/_partials/functions/theme_variables.html
+++ b/modules/blox/layouts/_partials/functions/theme_variables.html
@@ -14,13 +14,13 @@
 {{ end }}
 
 {{/* 2. Semantic Surface Variables */}}
---color-background: {{ $data.surfaces.background | default "#ffffff" }};
---color-foreground: {{ $data.surfaces.foreground | default "#000000" }};
+--hb-color-background: {{ $data.surfaces.background | default "#ffffff" }};
+--hb-color-foreground: {{ $data.surfaces.foreground | default "#000000" }};
 
 {{/* Header */}}
---color-header-bg: {{ $data.surfaces.header.background | default $data.surfaces.background | default "#ffffff" }};
---color-header-fg: {{ $data.surfaces.header.foreground | default $data.surfaces.foreground | default "#000000" }};
+--hb-color-header-bg: {{ $data.surfaces.header.background | default $data.surfaces.background | default "#ffffff" }};
+--hb-color-header-fg: {{ $data.surfaces.header.foreground | default $data.surfaces.foreground | default "#000000" }};
 
 {{/* Footer */}}
---color-footer-bg: {{ $data.surfaces.footer.background | default $data.surfaces.background | default "#f3f4f6" }};
---color-footer-fg: {{ $data.surfaces.footer.foreground | default $data.surfaces.foreground | default "#000000" }};
+--hb-color-footer-bg: {{ $data.surfaces.footer.background | default $data.surfaces.background | default "#f3f4f6" }};
+--hb-color-footer-fg: {{ $data.surfaces.footer.foreground | default $data.surfaces.foreground | default "#000000" }};
diff --git a/modules/blox/layouts/_partials/functions/typography.html b/modules/blox/layouts/_partials/functions/typography.html
index 5669730e..290d3da0 100644
--- a/modules/blox/layouts/_partials/functions/typography.html
+++ b/modules/blox/layouts/_partials/functions/typography.html
@@ -190,25 +190,25 @@
 <style>
   :root {
     /* Typography — Font Families */
-    --font-heading: {{ $heading_css | safeCSS }};
-    --font-body: {{ $body_css | safeCSS }};
-    --font-code: {{ $code_css | safeCSS }};
-    --font-nav: {{ $nav_css | safeCSS }};
+    --hb-font-heading: {{ $heading_css | safeCSS }};
+    --hb-font-body: {{ $body_css | safeCSS }};
+    --hb-font-code: {{ $code_css | safeCSS }};
+    --hb-font-nav: {{ $nav_css | safeCSS }};
 
     /* Typography — Font Weights */
-    --font-weight-heading: {{ $heading_weight }};
-    --font-weight-body: {{ $body_weight }};
+    --hb-font-weight-heading: {{ $heading_weight }};
+    --hb-font-weight-body: {{ $body_weight }};
     --hb-font-weight-body-bold: {{ $body_weight_bold }};
 
     /* Typography — Line Heights */
-    --font-leading-heading: {{ $leading.heading }};
-    --font-leading-body: {{ $leading.body }};
-    --font-leading-code: {{ $leading.code }};
+    --hb-font-leading-heading: {{ $leading.heading }};
+    --hb-font-leading-body: {{ $leading.body }};
+    --hb-font-leading-code: {{ $leading.code }};
 
     /* Typography — Letter Spacing */
-    --font-tracking-heading: {{ $tracking.heading | safeCSS }};
-    --font-tracking-body: {{ $tracking.body | safeCSS }};
-    --font-tracking-caps: {{ $tracking.caps | safeCSS }};
+    --hb-font-tracking-heading: {{ $tracking.heading | safeCSS }};
+    --hb-font-tracking-body: {{ $tracking.body | safeCSS }};
+    --hb-font-tracking-caps: {{ $tracking.caps | safeCSS }};
 
     /* Typography — Font Sizes */
     --hb-font-size-base: {{ $font_size_base | safeCSS }};
@@ -216,6 +216,6 @@
     --hb-font-size-lg: {{ $font_size_lg | safeCSS }};
 
     /* Typography — Font Family Alias (Tailwind v4 compat) */
-    --font-family-sans: {{ $body_css | safeCSS }};
+    --hb-font-family-sans: {{ $body_css | safeCSS }};
   }
 </style>
diff --git a/modules/blox/layouts/baseof.html b/modules/blox/layouts/baseof.html
index 66490c3b..974e3431 100644
--- a/modules/blox/layouts/baseof.html
+++ b/modules/blox/layouts/baseof.html
@@ -6,7 +6,7 @@
       data-wc-theme-default="{{ (lower site.Params.hugoblox.theme.mode) | default "system" }}"
       data-hbb-relurl="{{ "" | relURL }}">
   {{ partial "site_head" . }}
-  <body class="bg-[var(--color-background)] text-[var(--color-foreground)] page-wrapper" id="top">
+  <body class="bg-[var(--hb-color-background)] text-[var(--hb-color-foreground)] page-wrapper" id="top">
     <div id="page-bg"></div>
     <div class="page-header {{ if site.Params.hugoblox.header.sticky }}sticky top-0 z-30{{ end }}">
       {{/* Load header block */}}