diff --git a/modules/blox-tailwind/assets/css/blox/biography.css b/modules/blox-tailwind/assets/css/blox/biography.css
index 8fbaef10..23116967 100644
--- a/modules/blox-tailwind/assets/css/blox/biography.css
+++ b/modules/blox-tailwind/assets/css/blox/biography.css
@@ -99,20 +99,20 @@
 
 /* Enhanced focus states for accessibility */
 .resume-biography-modern a:focus-visible {
-  outline: 2px solid rgb(var(--color-primary-500));
+  outline: 2px solid var(--color-primary-500);
   outline-offset: 2px;
   border-radius: 0.5rem;
 }
 
 /* Improved text selection styling */
 .resume-biography-modern ::selection {
-  background-color: rgb(var(--color-primary-200) / 0.3);
-  color: rgb(var(--color-primary-900));
+  background-color: color-mix(in oklch, var(--color-primary-200) 30%, transparent);
+  color: var(--color-primary-900);
 }
 
 .dark .resume-biography-modern ::selection {
-  background-color: rgb(var(--color-primary-800) / 0.3);
-  color: rgb(var(--color-primary-100));
+  background-color: color-mix(in oklch, var(--color-primary-800) 30%, transparent);
+  color: var(--color-primary-100);
 }
 
 /* Enhanced gradient text support */
@@ -125,11 +125,11 @@
 /* Ensure text remains readable on fallback */
 @supports not (background-clip: text) {
   .resume-biography-modern .bg-clip-text {
-    color: rgb(var(--color-neutral-900));
+    color: var(--color-neutral-900);
   }
 
   .dark .resume-biography-modern .bg-clip-text {
-    color: rgb(var(--color-neutral-100));
+    color: var(--color-neutral-100);
   }
 }
 
diff --git a/modules/blox-tailwind/assets/css/blox/navbar.css b/modules/blox-tailwind/assets/css/blox/navbar.css
index 6addf98a..ddb3f27b 100644
--- a/modules/blox-tailwind/assets/css/blox/navbar.css
+++ b/modules/blox-tailwind/assets/css/blox/navbar.css
@@ -54,11 +54,11 @@ input#nav-toggle:checked ~ #nav-menu {
 }
 
 .nav-link:hover {
-  color: rgb(var(--color-primary-700));
+  color: var(--color-primary-700);
 }
 
 .dark .nav-link:hover {
-  color: rgb(var(--color-primary-300));
+  color: var(--color-primary-300);
 }
 
 .nav-dropdown {
@@ -92,7 +92,7 @@ input#nav-toggle:checked ~ #nav-menu {
 }
 
 .dark .nav-dropdown-item:hover {
-  background-color: rgb(var(--color-primary-500));
+  background-color: var(--color-primary-500);
 }
 
 .nav-dropdown-link {
@@ -100,5 +100,5 @@ input#nav-toggle:checked ~ #nav-menu {
 }
 
 .nav-dropdown-link:hover {
-  color: rgb(var(--color-primary-700));
+  color: var(--color-primary-700);
 }
diff --git a/modules/blox-tailwind/assets/css/chroma.css b/modules/blox-tailwind/assets/css/chroma.css
index b68090be..c7a9b9f3 100644
--- a/modules/blox-tailwind/assets/css/chroma.css
+++ b/modules/blox-tailwind/assets/css/chroma.css
@@ -7,8 +7,8 @@
 .prose pre {
   @apply relative rounded-md;
 
-  color: rgb(var(--color-neutral-700));
-  background-color: rgb(var(--color-neutral-50));
+  color: var(--color-neutral-700);
+  background-color: var(--color-neutral-50);
 }
 
 .dark .prose .chroma,
diff --git a/modules/blox-tailwind/assets/css/color-utilities.css b/modules/blox-tailwind/assets/css/color-utilities.css
index 7309f220..6b527128 100644
--- a/modules/blox-tailwind/assets/css/color-utilities.css
+++ b/modules/blox-tailwind/assets/css/color-utilities.css
@@ -9,21 +9,21 @@
 @layer utilities {
   /* Custom Hugo Blox Dark Color */
   .bg-hb-dark {
-    background-color: rgb(var(--color-hb-dark, 23 24 28));
+    background-color: var(--color-hb-dark, rgb(23 24 28));
   }
   .text-hb-dark {
-    color: rgb(var(--color-hb-dark, 23 24 28));
+    color: var(--color-hb-dark, rgb(23 24 28));
   }
   .border-hb-dark {
-    border-color: rgb(var(--color-hb-dark, 23 24 28));
+    border-color: var(--color-hb-dark, rgb(23 24 28));
   }
 
   /* Dark mode variants */
   .dark\:bg-hb-dark:where(.dark, .dark *) {
-    background-color: rgb(var(--color-hb-dark, 23 24 28));
+    background-color: var(--color-hb-dark, rgb(23 24 28));
   }
   .dark\:text-hb-dark:where(.dark, .dark *) {
-    color: rgb(var(--color-hb-dark, 23 24 28));
+    color: var(--color-hb-dark, rgb(23 24 28));
   }
 }
 
diff --git a/modules/blox-tailwind/assets/css/components/cards.css b/modules/blox-tailwind/assets/css/components/cards.css
index d6d5497e..8b120b79 100644
--- a/modules/blox-tailwind/assets/css/components/cards.css
+++ b/modules/blox-tailwind/assets/css/components/cards.css
@@ -10,34 +10,34 @@
   @apply flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 text-current no-underline dark:shadow-transparent hover:shadow-gray-100 dark:hover:shadow-transparent shadow-gray-100 active:shadow-sm active:shadow-gray-200 transition-all duration-200;
   @apply hover:border-gray-300 bg-transparent shadow-sm hover:bg-slate-50 hover:shadow-md;
 
-  border-color: rgb(var(--color-neutral-700));
+  border-color: var(--color-neutral-700);
 }
 
 .dark .hb-card {
-  border-color: rgb(var(--color-neutral-700));
+  border-color: var(--color-neutral-700);
 }
 
 .dark .hb-card:hover {
-  border-color: rgb(var(--color-neutral-600));
-  background-color: rgb(var(--color-neutral-800));
+  border-color: var(--color-neutral-600);
+  background-color: var(--color-neutral-800);
 }
 
 .hb-card-title {
   @apply flex font-semibold items-start gap-2 text-gray-700 hover:text-gray-900 items-center;
 
-  color: rgb(var(--color-neutral-700));
+  color: var(--color-neutral-700);
 }
 
 .hb-card-title:hover {
-  color: rgb(var(--color-neutral-900));
+  color: var(--color-neutral-900);
 }
 
 .dark .hb-card-title {
-  color: rgb(var(--color-neutral-200));
+  color: var(--color-neutral-200);
 }
 
 .dark .hb-card-title:hover {
-  color: rgb(var(--color-neutral-50));
+  color: var(--color-neutral-50);
 }
 
 .hb-card-subtitle {
@@ -49,7 +49,7 @@
 }
 
 .hb-card svg {
-  color: rgb(var(--color-neutral-700));
+  color: var(--color-neutral-700);
   width: 1.5rem;
   transition: color 0.3s ease;
 }
@@ -59,7 +59,7 @@
 }
 
 .dark .hb-card svg {
-  color: rgb(var(--color-neutral-300));
+  color: var(--color-neutral-300);
 }
 
 .dark .hb-card:hover svg {
diff --git a/modules/blox-tailwind/assets/css/components/copy.css b/modules/blox-tailwind/assets/css/components/copy.css
index c6e92bfa..6ba660e4 100644
--- a/modules/blox-tailwind/assets/css/components/copy.css
+++ b/modules/blox-tailwind/assets/css/components/copy.css
@@ -24,12 +24,12 @@
 .copy-button:focus,
 .copy-button:active,
 .copy-button:active:hover {
-  background-color: rgb(var(--color-primary-100));
+  background-color: var(--color-primary-100);
 }
 
 .dark .copy-button:hover,
 .dark .copy-button:focus,
 .dark .copy-button:active,
 .dark .copy-button:active:hover {
-  background-color: rgb(var(--color-primary-600));
+  background-color: var(--color-primary-600);
 }
diff --git a/modules/blox-tailwind/assets/css/components/glassmorphism.css b/modules/blox-tailwind/assets/css/components/glassmorphism.css
index ecfe356a..a0529d8e 100644
--- a/modules/blox-tailwind/assets/css/components/glassmorphism.css
+++ b/modules/blox-tailwind/assets/css/components/glassmorphism.css
@@ -10,7 +10,12 @@
 
 .glassmorphism-primary {
   @apply relative overflow-hidden;
-  background: linear-gradient(135deg, rgb(var(--color-primary-500) / 0.9), rgb(var(--color-primary-600) / 0.95), rgb(var(--color-primary-700) / 0.9));
+  background: linear-gradient(
+    135deg,
+    color-mix(in oklch, var(--color-primary-500) 90%, transparent),
+    color-mix(in oklch, var(--color-primary-600) 95%, transparent),
+    color-mix(in oklch, var(--color-primary-700) 90%, transparent)
+  );
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
 }
@@ -26,9 +31,9 @@
   @apply relative overflow-hidden;
   background: linear-gradient(
     135deg,
-    rgb(var(--color-secondary-500) / 0.9),
-    rgb(var(--color-secondary-600) / 0.95),
-    rgb(var(--color-secondary-700) / 0.9)
+    color-mix(in oklch, var(--color-secondary-500) 90%, transparent),
+    color-mix(in oklch, var(--color-secondary-600) 95%, transparent),
+    color-mix(in oklch, var(--color-secondary-700) 90%, transparent)
   );
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
@@ -178,12 +183,12 @@
 
 .cta-glassmorphism .group {
   /* Ensure proper text contrast in light mode */
-  color: rgb(var(--color-gray-900));
+  color: var(--color-gray-900);
 }
 
 .dark .cta-glassmorphism .group {
   /* Maintain white text in dark mode */
-  color: rgb(var(--color-gray-100));
+  color: var(--color-gray-100);
 }
 
 /* Enhanced button glassmorphism for light mode visibility */
diff --git a/modules/blox-tailwind/assets/css/components/page.css b/modules/blox-tailwind/assets/css/components/page.css
index f8e952ab..a1159d20 100644
--- a/modules/blox-tailwind/assets/css/components/page.css
+++ b/modules/blox-tailwind/assets/css/components/page.css
@@ -89,9 +89,9 @@
 details > summary {
   @apply cursor-pointer font-semibold;
 
-  color: rgb(var(--color-primary-700));
+  color: var(--color-primary-700);
 }
 
 .dark details > summary {
-  color: rgb(var(--color-primary-300));
+  color: var(--color-primary-300);
 }
diff --git a/modules/blox-tailwind/assets/css/components/sidebar-left.css b/modules/blox-tailwind/assets/css/components/sidebar-left.css
index 61ff5dec..7978b7fe 100644
--- a/modules/blox-tailwind/assets/css/components/sidebar-left.css
+++ b/modules/blox-tailwind/assets/css/components/sidebar-left.css
@@ -31,11 +31,11 @@
 }
 
 .hb-sidebar-list::before {
-  background-color: rgb(var(--color-neutral-200));
+  background-color: var(--color-neutral-200);
 }
 
 .dark .hb-sidebar-list::before {
-  background-color: rgb(var(--color-neutral-700));
+  background-color: var(--color-neutral-700);
 }
 
 .hb-scrollbar {
@@ -70,7 +70,7 @@
 }
 
 .dark .hb-docs-link:hover {
-  background-color: rgb(var(--color-primary-100) / 5%);
+  background-color: color-mix(in oklch, var(--color-primary-100) 5%, transparent);
 }
 
 .hb-sidebar-mobile-menu {
@@ -82,11 +82,11 @@
 }
 
 .hb-sidebar-mobile-toc::before {
-  background-color: rgb(var(--color-neutral-200));
+  background-color: var(--color-neutral-200);
 }
 
 .dark .hb-sidebar-mobile-toc::before {
-  background-color: rgb(var(--color-neutral-800));
+  background-color: var(--color-neutral-800);
 }
 
 .hb-sidebar-custom-link {
diff --git a/modules/blox-tailwind/assets/css/components/steps.css b/modules/blox-tailwind/assets/css/components/steps.css
index 3c38aefa..6d54605c 100644
--- a/modules/blox-tailwind/assets/css/components/steps.css
+++ b/modules/blox-tailwind/assets/css/components/steps.css
@@ -1,11 +1,11 @@
 .hb-steps {
   @apply ml-4 mb-12 pl-6 border-l border-gray-200 [counter-reset:hb_step];
 
-  border-left-color: rgb(var(--color-neutral-200));
+  border-left-color: var(--color-neutral-200);
 }
 
 .dark .hb-steps {
-  border-left-color: rgb(var(--color-neutral-600));
+  border-left-color: var(--color-neutral-600);
 }
 
 .hb-steps h3 {
@@ -18,11 +18,11 @@
     @apply text-base font-normal text-center -indent-px;
     @apply mt-[3px] ml-[-41px];
 
-    color: rgb(var(--color-neutral-700));
+    color: var(--color-neutral-700);
     content: counter(hb-step);
   }
 }
 
 .dark .hb-steps h3::before {
-  color: rgb(var(--color-neutral-200));
+  color: var(--color-neutral-200);
 }
diff --git a/modules/blox-tailwind/assets/css/config/theme.css b/modules/blox-tailwind/assets/css/config/theme.css
index 930aa77e..b33585d5 100644
--- a/modules/blox-tailwind/assets/css/config/theme.css
+++ b/modules/blox-tailwind/assets/css/config/theme.css
@@ -3,7 +3,7 @@
 /* Theme Configuration */
 @theme {
   /* Custom Colors */
-  --color-hb-dark: 23 24 28;
+  --color-hb-dark: rgb(23 24 28);
 
   /* Standard Tailwind Color Scales - Provide variables as valid CSS colors */
   /* Gray */
diff --git a/modules/blox-tailwind/assets/css/framework/base.css b/modules/blox-tailwind/assets/css/framework/base.css
index 4f6ce0c3..e111e024 100644
--- a/modules/blox-tailwind/assets/css/framework/base.css
+++ b/modules/blox-tailwind/assets/css/framework/base.css
@@ -22,33 +22,33 @@
 @layer components {
   .prose a {
     text-decoration: underline;
-    text-decoration-color: rgb(var(--color-primary-300));
+    text-decoration-color: var(--color-primary-300);
     font-weight: 500;
   }
 
   .prose a:hover {
-    color: rgb(var(--color-primary-600));
+    color: var(--color-primary-600);
     text-decoration: none;
     border-radius: 0.09rem;
   }
 
   .prose mark {
-    color: rgb(var(--color-neutral-900));
-    background-color: rgb(var(--color-primary-200));
+    color: var(--color-neutral-900);
+    background-color: var(--color-primary-200);
     padding: 0.1rem 0.2rem;
     border-radius: 0.25rem;
   }
 
   .dark .prose-invert a {
-    text-decoration-color: rgb(var(--color-neutral-500));
+    text-decoration-color: var(--color-neutral-500);
   }
 
   .dark .prose-invert a:hover {
-    color: rgb(var(--color-primary-300));
+    color: var(--color-primary-300);
   }
 
   .dark .prose-invert mark {
-    background-color: rgb(var(--color-primary-400));
+    background-color: var(--color-primary-400);
     color: black;
   }
 }
diff --git a/modules/blox-tailwind/assets/css/views/attachments.css b/modules/blox-tailwind/assets/css/views/attachments.css
index 0ce324de..d8f682c6 100644
--- a/modules/blox-tailwind/assets/css/views/attachments.css
+++ b/modules/blox-tailwind/assets/css/views/attachments.css
@@ -1,20 +1,20 @@
 .hb-attachment-link {
   @apply inline-block font-semibold uppercase outline-none mr-4 mb-1.5 transition-all text-sm tracking-wide focus:outline-none;
 
-  color: rgb(var(--color-primary-600));
+  color: var(--color-primary-600);
 }
 
 .hb-attachment-link:hover {
-  color: rgb(var(--color-primary-700));
+  color: var(--color-primary-700);
   text-decoration: underline;
 }
 
 .dark .hb-attachment-link {
-  color: rgb(var(--color-primary-400));
+  color: var(--color-primary-400);
 }
 
 .dark .hb-attachment-link:hover {
-  color: rgb(var(--color-primary-300));
+  color: var(--color-primary-300);
 }
 
 /* Small links - used in list views */
diff --git a/starters/academic-cv/content/_index.md b/starters/academic-cv/content/_index.md
index 4356c673..ae9488f6 100644
--- a/starters/academic-cv/content/_index.md
+++ b/starters/academic-cv/content/_index.md
@@ -118,6 +118,6 @@ sections:
     design:
       card:
         # Card background color (CSS class)
-        css_class: 'bg-primary-300'
+        css_class: 'bg-primary-300 dark:bg-primary-700'
         css_style: ''
 ---
diff --git a/starters/academic-cv/content/blog/second-brain/index.md b/starters/academic-cv/content/blog/second-brain/index.md
index f174a9f6..8128fd6f 100644
--- a/starters/academic-cv/content/blog/second-brain/index.md
+++ b/starters/academic-cv/content/blog/second-brain/index.md
@@ -70,11 +70,6 @@ Anh here's a more advanced mindmap with formatting, code blocks, and math:
     - multiline
       text
     - `inline code`
-    -
-      ```js
-      console.log('hello');
-      console.log('code block');
-      ```
     - Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
 ```
 </code>
@@ -95,11 +90,6 @@ renders as
     - multiline
       text
     - `inline code`
-    -
-      ```js
-      console.log('hello');
-      console.log('code block');
-      ```
     - Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
 ```