From 0f843e7ce17e6dd3225423b8bc6031dd812ceb3a Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Sat, 7 Mar 2026 15:58:48 +0100
Subject: [PATCH] fix(cards): add shadow-sm to all card elements across 24
 files

Design system requires shadow-sm + border on all cards.
Also fixes bg-white -> bg-surface-50 and bg-surface-100 -> bg-surface-50
where card backgrounds used wrong tokens.

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
---
 _includes/components/comments.njk             |  8 ++---
 _includes/components/fediverse-modal.njk      |  8 ++---
 .../components/funkwhale-stats-content.njk    | 20 ++++++------
 _includes/components/post-navigation.njk      |  8 ++---
 _includes/components/sections/ai-usage.njk    | 18 +++++------
 .../components/sections/cv-education.njk      | 10 +++---
 .../components/sections/cv-interests.njk      |  2 +-
 .../sections/cv-projects-personal.njk         |  8 ++---
 .../components/sections/cv-projects-work.njk  |  8 ++---
 _includes/components/sections/cv-projects.njk |  8 ++---
 _includes/components/sections/cv-skills.njk   |  2 +-
 _includes/components/webmentions.njk          | 12 +++----
 _includes/layouts/home.njk                    |  2 +-
 _includes/layouts/page.njk                    | 20 ++++++------
 blogroll.njk                                  |  8 ++---
 changelog.njk                                 |  4 +--
 digest-index.njk                              |  6 ++--
 funkwhale.njk                                 |  6 ++--
 github.njk                                    | 12 +++----
 interactions.njk                              | 18 +++++------
 listening.njk                                 | 12 +++----
 readlater.njk                                 |  8 ++---
 starred.njk                                   | 32 +++++++++----------
 youtube.njk                                   |  2 +-
 24 files changed, 121 insertions(+), 121 deletions(-)

diff --git a/_includes/components/comments.njk b/_includes/components/comments.njk
index ddf074c..d339185 100644
--- a/_includes/components/comments.njk
+++ b/_includes/components/comments.njk
@@ -36,7 +36,7 @@
             <label for="comment-me" class="block text-sm font-medium mb-1">Your website</label>
             <input id="comment-me" type="url" x-model="meUrl"
                    placeholder="https://yourdomain.com" required
-                   class="w-full px-3 py-2 border rounded-lg dark:bg-surface-800 dark:border-surface-600">
+                   class="w-full px-3 py-2 border rounded-lg dark:bg-surface-800 dark:border-surface-700 dark:text-surface-100">
           </div>
           <button type="submit" class="button" x-bind:disabled="authLoading">
             <span x-show="!authLoading">Sign In</span>
@@ -56,7 +56,7 @@
         <form x-on:submit.prevent="submitComment()">
           <textarea x-model="commentText" rows="4" required
                     placeholder="Share your thoughts... (supports **bold**, *italic*, and [links](url))"
-                    class="w-full px-3 py-2 border rounded-lg mb-2 dark:bg-surface-800 dark:border-surface-600"
+                    class="w-full px-3 py-2 border rounded-lg mb-2 dark:bg-surface-800 dark:border-surface-700 dark:text-surface-100"
                     x-bind:maxlength="maxLength"></textarea>
           <div class="flex items-center justify-between">
             <span class="text-xs text-surface-500" x-text="commentText.length + '/' + maxLength"></span>
@@ -75,7 +75,7 @@
         </template>
 
         <template x-for="comment in comments" x-bind:key="comment.published">
-          <div class="p-4 bg-surface-100 dark:bg-surface-800 rounded-lg">
+          <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
             <div class="flex items-start gap-3">
               <template x-if="comment.author?.photo">
                 <img x-bind:src="comment.author.photo" x-bind:alt="comment.author.name"
@@ -90,7 +90,7 @@
                 <div class="flex items-center gap-2">
                   <a x-bind:href="comment.author?.url" class="font-medium text-sm hover:underline" target="_blank" rel="noopener"
                      x-text="comment.author?.name || comment.author?.url"></a>
-                  <time class="text-xs text-surface-500" x-bind:datetime="comment.published"
+                  <time class="text-xs text-surface-500 font-mono" x-bind:datetime="comment.published"
                         x-text="new Date(comment.published).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })"></time>
                 </div>
                 <div class="mt-1 text-sm prose dark:prose-invert" x-html="comment.content?.html || comment.content?.text"></div>
diff --git a/_includes/components/fediverse-modal.njk b/_includes/components/fediverse-modal.njk
index 30699e0..34489ef 100644
--- a/_includes/components/fediverse-modal.njk
+++ b/_includes/components/fediverse-modal.njk
@@ -29,7 +29,7 @@
         <div>
           <div class="flex flex-col gap-2 mb-3">
             <template x-for="item in savedDomains" :key="item.domain">
-              <div class="flex items-center gap-2 rounded-lg bg-surface-50 dark:bg-surface-700 hover:bg-surface-100 dark:hover:bg-surface-600 transition-colors">
+              <div class="flex items-center gap-2 rounded-lg bg-surface-50 dark:bg-surface-800 hover:bg-surface-100 dark:hover:bg-surface-600 transition-colors">
                 <button class="flex-1 px-3 py-2.5 text-left text-sm font-medium text-surface-900 dark:text-surface-100 cursor-pointer"
                         @click="useSaved(item.domain)"
                         x-text="item.domain"></button>
@@ -45,7 +45,7 @@
                   @click="showAddNew()">Use a different instance</button>
           <div class="flex mt-3">
             <button @click="showModal = false"
-                    class="w-full px-4 py-2 text-sm font-medium text-surface-600 dark:text-surface-300 bg-surface-100 dark:bg-surface-700 hover:bg-surface-200 dark:hover:bg-surface-600 rounded-lg transition-colors">
+                    class="w-full px-4 py-2 text-sm font-medium text-surface-600 dark:text-surface-300 bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-600 rounded-lg transition-colors">
               Cancel
             </button>
           </div>
@@ -60,13 +60,13 @@
                  @keydown.enter.prevent="confirm()"
                  type="text"
                  placeholder="mastodon.social"
-                 class="w-full px-3 py-2 border border-surface-300 dark:border-surface-600 rounded-lg bg-surface-50 dark:bg-surface-700 text-surface-900 dark:text-surface-100 placeholder-surface-400 focus:outline-none focus:ring-2 focus:ring-[#a730b8] focus:border-transparent text-sm">
+                 class="w-full px-3 py-2 border border-surface-300 dark:border-surface-600 rounded-lg bg-surface-50 dark:bg-surface-800 text-surface-900 dark:text-surface-100 placeholder-surface-400 text-sm">
           <template x-if="error">
             <p class="text-xs text-red-500 mt-1" x-text="error"></p>
           </template>
           <div class="flex gap-3 mt-4">
             <button @click="showInput ? (showInput = false) : (showModal = false)"
-                    class="flex-1 px-4 py-2 text-sm font-medium text-surface-600 dark:text-surface-300 bg-surface-100 dark:bg-surface-700 hover:bg-surface-200 dark:hover:bg-surface-600 rounded-lg transition-colors"
+                    class="flex-1 px-4 py-2 text-sm font-medium text-surface-600 dark:text-surface-300 bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-600 rounded-lg transition-colors"
                     x-text="showInput && savedDomains.length > 0 ? 'Back' : 'Cancel'">
             </button>
             <button @click="confirm()"
diff --git a/_includes/components/funkwhale-stats-content.njk b/_includes/components/funkwhale-stats-content.njk
index b7123a2..428655d 100644
--- a/_includes/components/funkwhale-stats-content.njk
+++ b/_includes/components/funkwhale-stats-content.njk
@@ -1,20 +1,20 @@
 {# Stats Summary Cards #}
 {% if summary %}
 <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4 mb-6 sm:mb-8">
-  <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 text-center">
-    <span class="text-2xl font-bold text-purple-600 dark:text-purple-400 block">{{ summary.totalPlays or 0 }}</span>
+  <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm text-center">
+    <span class="text-2xl font-bold font-mono text-purple-600 dark:text-purple-400 block">{{ summary.totalPlays or 0 }}</span>
     <span class="text-xs text-surface-500 uppercase tracking-wide">Plays</span>
   </div>
-  <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 text-center">
-    <span class="text-2xl font-bold text-purple-600 dark:text-purple-400 block">{{ summary.uniqueTracks or 0 }}</span>
+  <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm text-center">
+    <span class="text-2xl font-bold font-mono text-purple-600 dark:text-purple-400 block">{{ summary.uniqueTracks or 0 }}</span>
     <span class="text-xs text-surface-500 uppercase tracking-wide">Tracks</span>
   </div>
-  <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 text-center">
-    <span class="text-2xl font-bold text-purple-600 dark:text-purple-400 block">{{ summary.uniqueArtists or 0 }}</span>
+  <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm text-center">
+    <span class="text-2xl font-bold font-mono text-purple-600 dark:text-purple-400 block">{{ summary.uniqueArtists or 0 }}</span>
     <span class="text-xs text-surface-500 uppercase tracking-wide">Artists</span>
   </div>
-  <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 text-center">
-    <span class="text-2xl font-bold text-purple-600 dark:text-purple-400 block">{{ summary.totalDurationFormatted or '0m' }}</span>
+  <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm text-center">
+    <span class="text-2xl font-bold font-mono text-purple-600 dark:text-purple-400 block">{{ summary.totalDurationFormatted or '0m' }}</span>
     <span class="text-xs text-surface-500 uppercase tracking-wide">Listened</span>
   </div>
 </div>
@@ -26,7 +26,7 @@
   <h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-4">Top Artists</h3>
   <div class="space-y-2">
     {% for artist in topArtists | head(5) %}
-    <div class="flex items-center gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
+    <div class="flex items-center gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
       <span class="w-6 h-6 flex items-center justify-center text-sm font-bold text-surface-400 bg-surface-100 dark:bg-surface-700 rounded-full">{{ loop.index }}</span>
       <span class="flex-1 font-medium text-surface-900 dark:text-surface-100">{{ artist.name }}</span>
       <span class="text-sm text-surface-500">{{ artist.playCount }} plays</span>
@@ -44,7 +44,7 @@
     {% for album in topAlbums | head(5) %}
     <div class="text-center">
       {% if album.coverUrl %}
-      <img src="{{ album.coverUrl }}" alt="" class="w-full aspect-square object-cover rounded-lg mb-2" loading="lazy" eleventy:ignore>
+      <img src="{{ album.coverUrl }}" alt="" class="w-full aspect-square object-cover rounded-lg mb-2 shadow-lg" loading="lazy" eleventy:ignore>
       {% else %}
       <div class="w-full aspect-square bg-surface-200 dark:bg-surface-700 rounded-lg mb-2 flex items-center justify-center">
         <svg class="w-8 h-8 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/_includes/components/post-navigation.njk b/_includes/components/post-navigation.njk
index 0103704..4352d29 100644
--- a/_includes/components/post-navigation.njk
+++ b/_includes/components/post-navigation.njk
@@ -31,7 +31,7 @@
       {% endif %}
     {% endif %}
 
-    <a href="{{ _prevPost.url }}" class="group relative block rounded-lg overflow-hidden bg-surface-100 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors">
+    <a href="{{ _prevPost.url }}" class="group relative block rounded-lg overflow-hidden bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors shadow-sm">
       {% if _prevHasOg %}
       <img src="/og/{{ _prevOgSlug }}.png" alt="{{ _prevTitle }}" class="w-full aspect-[1.91/1] object-cover opacity-85 group-hover:opacity-100 transition-opacity" loading="lazy" decoding="async" eleventy:ignore>
       <span class="absolute top-2 left-2 text-[10px] sm:text-xs font-semibold uppercase tracking-wide bg-white/90 dark:bg-surface-900/90 text-surface-700 dark:text-surface-300 px-2 py-0.5 rounded">
@@ -43,7 +43,7 @@
         <span class="text-sm sm:text-base font-medium text-surface-900 dark:text-surface-100 group-hover:text-accent-600 dark:group-hover:text-accent-400 line-clamp-2 transition-colors">
           {{ _prevTitle }}
         </span>
-        <time class="text-xs text-surface-500 mt-1 block" datetime="{{ _prevPost.date | isoDate }}">{{ _prevPost.date | dateDisplay }}</time>
+        <time class="text-xs text-surface-500 mt-1 block font-mono" datetime="{{ _prevPost.date | isoDate }}">{{ _prevPost.date | dateDisplay }}</time>
       </div>
       {% endif %}
     </a>
@@ -77,7 +77,7 @@
       {% endif %}
     {% endif %}
 
-    <a href="{{ _nextPost.url }}" class="group relative block rounded-lg overflow-hidden bg-surface-100 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors">
+    <a href="{{ _nextPost.url }}" class="group relative block rounded-lg overflow-hidden bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors shadow-sm">
       {% if _nextHasOg %}
       <img src="/og/{{ _nextOgSlug }}.png" alt="{{ _nextTitle }}" class="w-full aspect-[1.91/1] object-cover opacity-85 group-hover:opacity-100 transition-opacity" loading="lazy" decoding="async" eleventy:ignore>
       <span class="absolute top-2 right-2 text-[10px] sm:text-xs font-semibold uppercase tracking-wide bg-white/90 dark:bg-surface-900/90 text-surface-700 dark:text-surface-300 px-2 py-0.5 rounded">
@@ -89,7 +89,7 @@
         <span class="text-sm sm:text-base font-medium text-surface-900 dark:text-surface-100 group-hover:text-accent-600 dark:group-hover:text-accent-400 line-clamp-2 transition-colors">
           {{ _nextTitle }}
         </span>
-        <time class="text-xs text-surface-500 mt-1 block" datetime="{{ _nextPost.date | isoDate }}">{{ _nextPost.date | dateDisplay }}</time>
+        <time class="text-xs text-surface-500 mt-1 block font-mono" datetime="{{ _nextPost.date | isoDate }}">{{ _nextPost.date | dateDisplay }}</time>
       </div>
       {% endif %}
     </a>
diff --git a/_includes/components/sections/ai-usage.njk b/_includes/components/sections/ai-usage.njk
index a8da404..305c798 100644
--- a/_includes/components/sections/ai-usage.njk
+++ b/_includes/components/sections/ai-usage.njk
@@ -10,23 +10,23 @@
     {{ sectionTitle }}
   </h2>
 
-  <div class="p-6 rounded-xl bg-surface-50 dark:bg-surface-800/50 border border-surface-200 dark:border-surface-700">
+  <div class="p-6 rounded-lg bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 shadow-sm">
     {# Stats grid — 4 columns #}
     <div class="grid gap-4 sm:grid-cols-4 mb-6">
-      <div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
-        <div class="text-2xl font-bold text-surface-900 dark:text-surface-100">{{ stats.total }}</div>
+      <div class="text-center p-3 rounded-lg bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 shadow-sm">
+        <div class="text-2xl font-bold font-mono text-surface-900 dark:text-surface-100">{{ stats.total }}</div>
         <div class="text-xs text-surface-500 dark:text-surface-400">Total posts</div>
       </div>
-      <div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
-        <div class="text-2xl font-bold text-amber-600 dark:text-amber-400">{{ stats.aiCount }}</div>
+      <div class="text-center p-3 rounded-lg bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 shadow-sm">
+        <div class="text-2xl font-bold font-mono text-amber-600 dark:text-amber-400">{{ stats.aiCount }}</div>
         <div class="text-xs text-surface-500 dark:text-surface-400">AI-involved</div>
       </div>
-      <div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
-        <div class="text-2xl font-bold text-emerald-600 dark:text-emerald-400">{{ stats.total - stats.aiCount }}</div>
+      <div class="text-center p-3 rounded-lg bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 shadow-sm">
+        <div class="text-2xl font-bold font-mono text-emerald-600 dark:text-emerald-400">{{ stats.total - stats.aiCount }}</div>
         <div class="text-xs text-surface-500 dark:text-surface-400">Human-only</div>
       </div>
-      <div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
-        <div class="text-2xl font-bold text-surface-900 dark:text-surface-100">{{ stats.percentage }}%</div>
+      <div class="text-center p-3 rounded-lg bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 shadow-sm">
+        <div class="text-2xl font-bold font-mono text-surface-900 dark:text-surface-100">{{ stats.percentage }}%</div>
         <div class="text-xs text-surface-500 dark:text-surface-400">AI ratio</div>
       </div>
     </div>
diff --git a/_includes/components/sections/cv-education.njk b/_includes/components/sections/cv-education.njk
index 3ff1ecf..a24d55f 100644
--- a/_includes/components/sections/cv-education.njk
+++ b/_includes/components/sections/cv-education.njk
@@ -16,7 +16,7 @@
     {% for item in cv.education %}
     {% if not filterType or item.educationType == filterType or not item.educationType %}
     {% set ci = loop.index0 % 8 %}
-    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 transition-colors overflow-hidden border-l-[3px]
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm transition-colors overflow-hidden border-l-[3px]
       {% if ci == 0 %}border-l-amber-400 dark:border-l-amber-500
       {% elif ci == 1 %}border-l-emerald-400 dark:border-l-emerald-500
       {% elif ci == 2 %}border-l-sky-400 dark:border-l-sky-500
@@ -40,11 +40,11 @@
         </div>
         <div class="flex items-center gap-2 shrink-0">
           {% if item.startDate %}
-          <span class="text-xs text-surface-500 hidden sm:inline">
+          <span class="text-xs text-surface-500 hidden sm:inline font-mono">
             {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
           </span>
           {% elif item.year %}
-          <span class="text-xs text-surface-500 hidden sm:inline">{{ item.year }}</span>
+          <span class="text-xs text-surface-500 hidden sm:inline font-mono">{{ item.year }}</span>
           {% endif %}
           <svg
             class="w-4 h-4 text-surface-400 transition-transform duration-200"
@@ -69,11 +69,11 @@
         class="px-4 pb-4"
       >
         {% if item.startDate %}
-        <p class="text-xs text-surface-500 mb-1 sm:hidden">
+        <p class="text-xs text-surface-500 mb-1 sm:hidden font-mono">
           {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
         </p>
         {% elif item.year %}
-        <p class="text-xs text-surface-500 mb-1 sm:hidden">{{ item.year }}</p>
+        <p class="text-xs text-surface-500 mb-1 sm:hidden font-mono">{{ item.year }}</p>
         {% endif %}
 
         {% if item.description %}
diff --git a/_includes/components/sections/cv-interests.njk b/_includes/components/sections/cv-interests.njk
index 997f791..611f16b 100644
--- a/_includes/components/sections/cv-interests.njk
+++ b/_includes/components/sections/cv-interests.njk
@@ -15,7 +15,7 @@
     {% if not filterType or (cv.interestTypes and cv.interestTypes[category] == filterType) or not cv.interestTypes or not cv.interestTypes[category] %}
     {# Cycle through 8 distinct colors per family using loop.index0 #}
     {% set ci = loop.index0 % 8 %}
-    <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
+    <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
       <h3 class="font-semibold text-sm uppercase tracking-wide text-surface-600 dark:text-surface-400 mb-2">
         {{ category }}
       </h3>
diff --git a/_includes/components/sections/cv-projects-personal.njk b/_includes/components/sections/cv-projects-personal.njk
index e3e6ab0..b51bcf2 100644
--- a/_includes/components/sections/cv-projects-personal.njk
+++ b/_includes/components/sections/cv-projects-personal.njk
@@ -26,7 +26,7 @@
   <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-start">
     {% for item in personalProjects | head(maxItems) %}
     {% set ci = loop.index0 % 8 %}
-    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 transition-colors overflow-hidden border-l-[3px]
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm transition-colors overflow-hidden border-l-[3px]
       {% if ci == 0 %}border-l-amber-400 dark:border-l-amber-500
       {% elif ci == 1 %}border-l-emerald-400 dark:border-l-emerald-500
       {% elif ci == 2 %}border-l-sky-400 dark:border-l-sky-500
@@ -62,7 +62,7 @@
         </div>
         <div class="flex items-center gap-2 shrink-0">
           {% if item.startDate %}
-          <span class="text-xs text-surface-500 hidden sm:inline">
+          <span class="text-xs text-surface-500 hidden sm:inline font-mono">
             {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
           </span>
           {% endif %}
@@ -89,7 +89,7 @@
         class="px-4 pb-4"
       >
         {% if item.startDate %}
-        <p class="text-xs text-surface-500 mb-1 sm:hidden">
+        <p class="text-xs text-surface-500 mb-1 sm:hidden font-mono">
           {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
         </p>
         {% endif %}
@@ -101,7 +101,7 @@
         {% if showTechnologies and item.technologies and item.technologies.length %}
         <div class="flex flex-wrap gap-1">
           {% for tech in item.technologies %}
-          <span class="text-xs px-2 py-0.5 rounded
+          <span class="text-xs px-2 py-0.5 rounded-full
             {% if ci == 0 %}bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300
             {% elif ci == 1 %}bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300
             {% elif ci == 2 %}bg-sky-50 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300
diff --git a/_includes/components/sections/cv-projects-work.njk b/_includes/components/sections/cv-projects-work.njk
index 47d7014..0cbe81a 100644
--- a/_includes/components/sections/cv-projects-work.njk
+++ b/_includes/components/sections/cv-projects-work.njk
@@ -26,7 +26,7 @@
   <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-start">
     {% for item in workProjects | head(maxItems) %}
     {% set ci = loop.index0 % 8 %}
-    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 transition-colors overflow-hidden border-l-[3px]
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm transition-colors overflow-hidden border-l-[3px]
       {% if ci == 0 %}border-l-amber-400 dark:border-l-amber-500
       {% elif ci == 1 %}border-l-emerald-400 dark:border-l-emerald-500
       {% elif ci == 2 %}border-l-sky-400 dark:border-l-sky-500
@@ -62,7 +62,7 @@
         </div>
         <div class="flex items-center gap-2 shrink-0">
           {% if item.startDate %}
-          <span class="text-xs text-surface-500 hidden sm:inline">
+          <span class="text-xs text-surface-500 hidden sm:inline font-mono">
             {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
           </span>
           {% endif %}
@@ -89,7 +89,7 @@
         class="px-4 pb-4"
       >
         {% if item.startDate %}
-        <p class="text-xs text-surface-500 mb-1 sm:hidden">
+        <p class="text-xs text-surface-500 mb-1 sm:hidden font-mono">
           {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
         </p>
         {% endif %}
@@ -101,7 +101,7 @@
         {% if showTechnologies and item.technologies and item.technologies.length %}
         <div class="flex flex-wrap gap-1">
           {% for tech in item.technologies %}
-          <span class="text-xs px-2 py-0.5 rounded
+          <span class="text-xs px-2 py-0.5 rounded-full
             {% if ci == 0 %}bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300
             {% elif ci == 1 %}bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300
             {% elif ci == 2 %}bg-sky-50 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300
diff --git a/_includes/components/sections/cv-projects.njk b/_includes/components/sections/cv-projects.njk
index 99cc152..7225efc 100644
--- a/_includes/components/sections/cv-projects.njk
+++ b/_includes/components/sections/cv-projects.njk
@@ -16,7 +16,7 @@
   <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-start">
     {% for item in cv.projects | head(maxItems) %}
     {% set ci = loop.index0 % 8 %}
-    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 transition-colors overflow-hidden border-l-[3px]
+    <div class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm transition-colors overflow-hidden border-l-[3px]
       {% if ci == 0 %}border-l-amber-400 dark:border-l-amber-500
       {% elif ci == 1 %}border-l-emerald-400 dark:border-l-emerald-500
       {% elif ci == 2 %}border-l-sky-400 dark:border-l-sky-500
@@ -52,7 +52,7 @@
         </div>
         <div class="flex items-center gap-2 shrink-0">
           {% if item.startDate %}
-          <span class="text-xs text-surface-500 hidden sm:inline">
+          <span class="text-xs text-surface-500 hidden sm:inline font-mono">
             {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
           </span>
           {% endif %}
@@ -79,7 +79,7 @@
         class="px-4 pb-4"
       >
         {% if item.startDate %}
-        <p class="text-xs text-surface-500 mb-1 sm:hidden">
+        <p class="text-xs text-surface-500 mb-1 sm:hidden font-mono">
           {{ item.startDate }}{% if item.endDate %} – {{ item.endDate }}{% else %} – Present{% endif %}
         </p>
         {% endif %}
@@ -91,7 +91,7 @@
         {% if showTechnologies and item.technologies and item.technologies.length %}
         <div class="flex flex-wrap gap-1">
           {% for tech in item.technologies %}
-          <span class="text-xs px-2 py-0.5 rounded
+          <span class="text-xs px-2 py-0.5 rounded-full
             {% if ci == 0 %}bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300
             {% elif ci == 1 %}bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300
             {% elif ci == 2 %}bg-sky-50 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300
diff --git a/_includes/components/sections/cv-skills.njk b/_includes/components/sections/cv-skills.njk
index 6b55cde..fc23acd 100644
--- a/_includes/components/sections/cv-skills.njk
+++ b/_includes/components/sections/cv-skills.njk
@@ -15,7 +15,7 @@
     {% if not filterType or (cv.skillTypes and cv.skillTypes[category] == filterType) or not cv.skillTypes or not cv.skillTypes[category] %}
     {# Cycle through 8 distinct colors per family using loop.index0 #}
     {% set ci = loop.index0 % 8 %}
-    <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
+    <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
       <h3 class="font-semibold text-sm uppercase tracking-wide text-surface-600 dark:text-surface-400 mb-2">
         {{ category }}
       </h3>
diff --git a/_includes/components/webmentions.njk b/_includes/components/webmentions.njk
index 971984b..04f3353 100644
--- a/_includes/components/webmentions.njk
+++ b/_includes/components/webmentions.njk
@@ -113,7 +113,7 @@
     </h3>
     <ul class="space-y-4">
       {% for reply in replies %}
-      <li class="p-4 bg-surface-100 dark:bg-surface-800 rounded-lg">
+      <li class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
         <div class="flex gap-3">
           <a href="{{ reply.author.url }}" target="_blank" rel="noopener">
             <img
@@ -135,7 +135,7 @@
                  class="text-xs text-surface-500 hover:underline"
                  target="_blank"
                  rel="noopener">
-                <time datetime="{{ reply.published }}">
+                <time class="font-mono" datetime="{{ reply.published }}">
                   {{ reply.published | date("MMM d, yyyy") }}
                 </time>
               </a>
@@ -165,7 +165,7 @@
            class="text-accent-600 dark:text-accent-400 hover:underline"
            target="_blank"
            rel="noopener">
-          {{ mention.author.name }} mentioned this on <time datetime="{{ mention.published }}">{{ mention.published | date("MMM d, yyyy") }}</time>
+          {{ mention.author.name }} mentioned this on <time class="font-mono" datetime="{{ mention.published }}">{{ mention.published | date("MMM d, yyyy") }}</time>
         </a>
       </li>
       {% endfor %}
@@ -177,13 +177,13 @@
 
 {# Webmention send form — collapsed by default #}
 <details class="mt-8">
-  <summary class="text-sm font-semibold text-surface-600 dark:text-surface-400 cursor-pointer hover:text-surface-700 dark:hover:text-surface-300 list-none [&::-webkit-details-marker]:hidden flex items-center gap-1.5">
+  <summary class="text-sm font-semibold text-surface-600 dark:text-surface-400 cursor-pointer hover:text-surface-700 dark:hover:text-surface-300 transition-colors list-none [&::-webkit-details-marker]:hidden flex items-center gap-1.5">
     <svg class="w-3.5 h-3.5 transition-transform [[open]>&]:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
     </svg>
     Send a Webmention
   </summary>
-  <div class="mt-3 p-4 bg-surface-100 dark:bg-surface-800 rounded-lg">
+  <div class="mt-3 p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
     <p class="text-xs text-surface-600 dark:text-surface-400 mb-3">
       Have you written a response to this post? Send a webmention by entering your post URL below.
     </p>
@@ -194,7 +194,7 @@
         name="source"
         placeholder="https://your-site.com/response"
         required
-        class="flex-1 px-3 py-2 text-sm bg-surface-50 dark:bg-surface-700 border border-surface-300 dark:border-surface-600 rounded focus:outline-none focus:ring-2 focus:ring-accent-500"
+        class="flex-1 px-3 py-2 text-sm bg-surface-50 dark:bg-surface-700 border border-surface-300 dark:border-surface-600 rounded"
       >
       <button
         type="submit"
diff --git a/_includes/layouts/home.njk b/_includes/layouts/home.njk
index 0932dbb..67c6bed 100644
--- a/_includes/layouts/home.njk
+++ b/_includes/layouts/home.njk
@@ -91,7 +91,7 @@ withSidebar: true
       <p class="text-sm text-surface-600 dark:text-surface-400 mb-2 line-clamp-2">{{ post.data.summary }}</p>
       {% endif %}
       <div class="flex items-center gap-3 text-xs text-surface-500">
-        <time datetime="{{ post.data.published or post.date }}">
+        <time class="font-mono" datetime="{{ post.data.published or post.date }}">
           {{ (post.data.published or post.date) | date("MMM d, yyyy") }}
         </time>
         {% if post.data.postType %}
diff --git a/_includes/layouts/page.njk b/_includes/layouts/page.njk
index 2907aa4..10660cf 100644
--- a/_includes/layouts/page.njk
+++ b/_includes/layouts/page.njk
@@ -17,7 +17,7 @@ withSidebar: true
     {% endif %}
     {% if updated %}
     <p class="text-sm text-surface-500 dark:text-surface-400 mt-2">
-      Last updated: <time class="dt-updated" datetime="{{ updated | isoDate }}">{{ updated | dateDisplay }}</time>
+      Last updated: <time class="dt-updated font-mono text-sm" datetime="{{ updated | isoDate }}">{{ updated | dateDisplay }}</time>
     </p>
     {% endif %}
   </header>
@@ -30,22 +30,22 @@ withSidebar: true
   {% if page.url == "/ai/" and collections.posts %}
   {% set stats = collections.posts | aiStats %}
   {% set aiPostsList = collections.posts | aiPosts %}
-  <section class="mt-8 sm:mt-12 p-6 rounded-xl bg-surface-50 dark:bg-surface-800/50 border border-surface-200 dark:border-surface-700">
+  <section class="mt-8 sm:mt-12 p-6 rounded-lg bg-surface-50 dark:bg-surface-800/50 border border-surface-200 dark:border-surface-700 shadow-sm">
     <h2 class="text-xl font-bold text-surface-900 dark:text-surface-100 mb-4">AI Usage Across Posts</h2>
     <div class="grid gap-4 sm:grid-cols-4 mb-6">
-      <div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
+      <div class="text-center p-3 rounded-lg bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 shadow-sm">
         <div class="text-2xl font-bold text-surface-900 dark:text-surface-100">{{ stats.total }}</div>
         <div class="text-xs text-surface-500 dark:text-surface-400">Total posts</div>
       </div>
-      <div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
+      <div class="text-center p-3 rounded-lg bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 shadow-sm">
         <div class="text-2xl font-bold text-amber-600 dark:text-amber-400">{{ stats.aiCount }}</div>
         <div class="text-xs text-surface-500 dark:text-surface-400">AI-involved</div>
       </div>
-      <div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
+      <div class="text-center p-3 rounded-lg bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 shadow-sm">
         <div class="text-2xl font-bold text-emerald-600 dark:text-emerald-400">{{ stats.total - stats.aiCount }}</div>
         <div class="text-xs text-surface-500 dark:text-surface-400">Human-only</div>
       </div>
-      <div class="text-center p-3 rounded-lg bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700">
+      <div class="text-center p-3 rounded-lg bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 shadow-sm">
         <div class="text-2xl font-bold text-surface-900 dark:text-surface-100">{{ stats.percentage }}%</div>
         <div class="text-xs text-surface-500 dark:text-surface-400">AI ratio</div>
       </div>
@@ -80,7 +80,7 @@ withSidebar: true
   {% set aiTools = aiTools or ai_tools %}
   {% set aiDescription = aiDescription or ai_description %}
   {% if aiTextLevel or aiCodeLevel or aiTools %}
-  <aside class="mt-6 p-4 rounded-lg bg-surface-50 dark:bg-surface-800/50 border border-surface-200 dark:border-surface-700">
+  <aside class="mt-6 p-4 rounded-lg bg-surface-50 dark:bg-surface-800/50 border border-surface-200 dark:border-surface-700 shadow-sm">
     <div class="flex items-center gap-2 mb-2">
       <svg class="w-4 h-4 text-surface-500 dark:text-surface-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714a2.25 2.25 0 00.659 1.591L19 14.5M14.25 3.104c.251.023.501.05.75.082M19 14.5l-2.47 2.47a2.25 2.25 0 01-1.59.659H9.06a2.25 2.25 0 01-1.591-.659L5 14.5m14 0V17a2 2 0 01-2 2H7a2 2 0 01-2-2v-2.5"/>
@@ -89,17 +89,17 @@ withSidebar: true
     </div>
     <div class="flex flex-wrap gap-3 text-xs text-surface-600 dark:text-surface-400">
       {% if aiTextLevel %}
-      <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-surface-100 dark:bg-surface-700">
+      <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-surface-100 dark:bg-surface-700">
         Text: {% if aiTextLevel === "0" %}None{% elif aiTextLevel === "1" %}Editorial{% elif aiTextLevel === "2" %}Co-drafted{% elif aiTextLevel === "3" %}AI-generated{% endif %}
       </span>
       {% endif %}
       {% if aiCodeLevel %}
-      <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-surface-100 dark:bg-surface-700">
+      <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-surface-100 dark:bg-surface-700">
         Code: {% if aiCodeLevel === "0" %}Human{% elif aiCodeLevel === "1" %}AI-assisted{% elif aiCodeLevel === "2" %}AI-generated{% endif %}
       </span>
       {% endif %}
       {% if aiTools %}
-      <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-surface-100 dark:bg-surface-700">
+      <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-surface-100 dark:bg-surface-700">
         Tools: {{ aiTools }}
       </span>
       {% endif %}
diff --git a/blogroll.njk b/blogroll.njk
index fb00140..255700a 100644
--- a/blogroll.njk
+++ b/blogroll.njk
@@ -15,7 +15,7 @@ permalink: /blogroll/
       Blogs I follow - <span x-text="blogs.length" class="font-medium"></span> feeds
     </p>
     <p class="text-xs text-surface-500 mt-2" x-show="status?.lastSync">
-      Last synced: <span x-text="formatDate(status?.lastSync, 'full')"></span>
+      Last synced: <span class="font-mono" x-text="formatDate(status?.lastSync, 'full')"></span>
     </p>
   </header>
 
@@ -65,7 +65,7 @@ permalink: /blogroll/
         <template x-for="blog in blogs" :key="blog.id">
           <a
             :href="blog.siteUrl || blog.feedUrl"
-            class="block bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 hover:border-orange-400 dark:hover:border-orange-600 transition-colors group"
+            class="block bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 p-4 hover:border-orange-400 dark:hover:border-orange-600 transition-colors group shadow-sm"
             target="_blank"
             rel="noopener"
           >
@@ -109,7 +109,7 @@ permalink: /blogroll/
       {# Category Items Tab (one for each category) #}
       <div x-show="activeTab.startsWith('category:') && !loading" class="space-y-4">
         <template x-for="item in categoryItems" :key="item.id">
-          <article class="bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 sm:p-6 hover:border-orange-400 dark:hover:border-orange-600 transition-colors">
+          <article class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 p-4 sm:p-6 hover:border-orange-400 dark:hover:border-orange-600 transition-colors shadow-sm">
             <div class="flex items-start gap-4">
               <div class="flex-1 min-w-0">
                 <div class="flex items-center gap-2 mb-1">
@@ -139,7 +139,7 @@ permalink: /blogroll/
                     </svg>
                     <span x-text="item.blog?.title || 'Unknown'"></span>
                   </a>
-                  <time :datetime="item.published" x-text="formatDate(item.published)"></time>
+                  <time class="font-mono text-sm" :datetime="item.published" x-text="formatDate(item.published)"></time>
                 </div>
                 <p x-show="item.summary" class="text-sm text-surface-600 dark:text-surface-400 line-clamp-3" x-text="item.summary"></p>
               </div>
diff --git a/changelog.njk b/changelog.njk
index 68c0a72..25fbfb6 100644
--- a/changelog.njk
+++ b/changelog.njk
@@ -48,7 +48,7 @@ withSidebar: false
 
     <ul class="space-y-4">
       <template x-for="commit in filteredCommits()" :key="commit.fullSha">
-        <li class="border border-surface-200 dark:border-surface-700 rounded-lg p-4">
+        <li class="bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 rounded-lg p-4 shadow-sm">
           <div class="flex items-start gap-3">
             <a :href="commit.url" target="_blank" rel="noopener"
                class="font-mono text-xs bg-surface-100 dark:bg-surface-800 px-1.5 py-0.5 rounded text-accent-600 dark:text-accent-400 hover:underline flex-shrink-0 mt-0.5"
@@ -64,7 +64,7 @@ withSidebar: false
                 <a :href="commit.repoUrl" target="_blank" rel="noopener"
                    class="text-xs px-2 py-0.5 rounded-full bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400 hover:text-accent-600 dark:hover:text-accent-400"
                    x-text="commit.repoName"></a>
-                <span class="text-xs text-surface-500" x-text="formatDate(commit.date)"></span>
+                <span class="text-xs text-surface-500 font-mono" x-text="formatDate(commit.date)"></span>
                 <span class="text-xs text-surface-400" x-text="'by ' + commit.author"></span>
               </div>
               <template x-if="commit.body">
diff --git a/digest-index.njk b/digest-index.njk
index c503312..3d53cf9 100644
--- a/digest-index.njk
+++ b/digest-index.njk
@@ -16,19 +16,19 @@ permalink: "digest/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumb
 <div>
   <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Weekly Digest</h1>
   <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
-    A weekly summary of all posts. Subscribe via <a href="/digest/feed.xml" class="text-orange-600 dark:text-orange-400 hover:underline">RSS</a> for one update per week.
+    A weekly summary of all posts. Subscribe via <a href="/digest/feed.xml" class="text-amber-600 dark:text-amber-400 hover:underline">RSS</a> for one update per week.
   </p>
 
   {% if paginatedDigests.length > 0 %}
   <ul class="space-y-4">
     {% for d in paginatedDigests %}
-    <li class="p-4 bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 rounded-lg hover:border-accent-300 dark:hover:border-accent-600 transition-colors">
+    <li class="p-4 bg-surface-50 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 rounded-lg hover:border-amber-400 dark:hover:border-amber-600 transition-colors shadow-sm">
       <a href="/digest/{{ d.slug }}/" class="block">
         <h2 class="font-semibold text-surface-900 dark:text-surface-100 hover:text-accent-600 dark:hover:text-accent-400">
           {{ d.label }}
         </h2>
         <p class="text-sm text-surface-500 dark:text-surface-400 mt-1">
-          <time datetime="{{ d.startDate | isoDate }}">{{ d.startDate | dateDisplay }}</time> &ndash; <time datetime="{{ d.endDate | isoDate }}">{{ d.endDate | dateDisplay }}</time>
+          <time class="font-mono" datetime="{{ d.startDate | isoDate }}">{{ d.startDate | dateDisplay }}</time> &ndash; <time class="font-mono" datetime="{{ d.endDate | isoDate }}">{{ d.endDate | dateDisplay }}</time>
           &middot; {{ d.posts.length }} post{% if d.posts.length != 1 %}s{% endif %}
         </p>
         {% set typeLabels = [] %}
diff --git a/funkwhale.njk b/funkwhale.njk
index 8694d8f..f62acdd 100644
--- a/funkwhale.njk
+++ b/funkwhale.njk
@@ -144,7 +144,7 @@ withSidebar: true
     {# Trends Tab #}
     <div x-show="activeTab === 'trends'" x-cloak>
       {% if funkwhaleActivity.stats.trends and funkwhaleActivity.stats.trends.length %}
-      <div class="bg-surface-50 dark:bg-surface-800 rounded-xl p-6 border border-surface-200 dark:border-surface-700">
+      <div class="bg-surface-50 dark:bg-surface-800 rounded-lg p-6 border border-surface-200 dark:border-surface-700 shadow-sm">
         <h3 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-4">Daily Listening (Last 30 Days)</h3>
         <div class="flex items-end gap-1 h-32">
           {% set maxCount = 1 %}
@@ -185,7 +185,7 @@ withSidebar: true
     {% if funkwhaleActivity.listenings.length %}
     <div class="space-y-3">
       {% for listening in funkwhaleActivity.listenings | head(15) %}
-      <div class="flex items-center gap-4 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-purple-400 dark:hover:border-purple-600 transition-colors">
+      <div class="flex items-center gap-4 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-purple-400 dark:hover:border-purple-600 transition-colors shadow-sm">
         {% if listening.coverUrl %}
         <img src="{{ listening.coverUrl }}" alt="" class="w-12 h-12 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
         {% else %}
@@ -235,7 +235,7 @@ withSidebar: true
 
     <div class="grid gap-3 sm:gap-4 md:grid-cols-2">
       {% for favorite in funkwhaleActivity.favorites | head(10) %}
-      <div class="flex items-center gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
+      <div class="flex items-center gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
         {% if favorite.coverUrl %}
         <img src="{{ favorite.coverUrl }}" alt="" class="w-14 h-14 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
         {% else %}
diff --git a/github.njk b/github.njk
index 48cdd64..d1a1c31 100644
--- a/github.njk
+++ b/github.njk
@@ -101,7 +101,7 @@ withSidebar: true
     {% if githubActivity.commits.length %}
     <div class="space-y-3">
       {% for commit in githubActivity.commits %}
-      <div class="flex items-start gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
+      <div class="flex items-start gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
         <code class="text-xs font-mono bg-surface-100 dark:bg-surface-700 px-2 py-1 rounded">
           {{ commit.sha }}
         </code>
@@ -111,7 +111,7 @@ withSidebar: true
           </a>
           <p class="text-xs text-surface-500 mt-1">
             <a href="{{ commit.repoUrl }}" class="hover:underline" target="_blank" rel="noopener">{{ commit.repo }}</a>
-            · <time datetime="{{ commit.date }}">{{ commit.date | date("MMM d, yyyy") }}</time>
+            · <time class="font-mono" datetime="{{ commit.date }}">{{ commit.date | date("MMM d, yyyy") }}</time>
           </p>
         </div>
       </div>
@@ -134,7 +134,7 @@ withSidebar: true
 
     <div class="space-y-3">
       {% for item in githubActivity.contributions %}
-      <div class="flex items-start gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
+      <div class="flex items-start gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
         {% if item.type == "pr" %}
         <span class="flex-shrink-0 px-2 py-1 text-xs font-medium bg-emerald-100 dark:bg-emerald-900 text-emerald-800 dark:text-emerald-200 rounded">PR</span>
         {% else %}
@@ -147,7 +147,7 @@ withSidebar: true
           <p class="text-xs text-surface-500 mt-1">
             <a href="{{ item.repoUrl }}" class="hover:underline" target="_blank" rel="noopener">{{ item.repo }}</a>
             #{{ item.number }}
-            · <time datetime="{{ item.date }}">{{ item.date | date("MMM d, yyyy") }}</time>
+            · <time class="font-mono" datetime="{{ item.date }}">{{ item.date | date("MMM d, yyyy") }}</time>
           </p>
         </div>
       </div>
@@ -168,7 +168,7 @@ withSidebar: true
     {% if githubRepos.length %}
     <div class="grid gap-3 sm:gap-4 md:grid-cols-2">
       {% for repo in githubRepos | head(6) %}
-      <article class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
+      <article class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
         <h3 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
           <a href="{{ repo.html_url }}" class="hover:text-emerald-600 dark:hover:text-emerald-400" target="_blank" rel="noopener">
             {{ repo.name }}
@@ -223,7 +223,7 @@ withSidebar: true
     {% if githubActivity.stars.length %}
     <div class="grid gap-3 sm:gap-4 md:grid-cols-2">
       {% for repo in githubActivity.stars | head(10) %}
-      <article class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-surface-400 dark:hover:border-surface-600 transition-colors">
+      <article class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-emerald-400 dark:hover:border-emerald-600 transition-colors shadow-sm">
         <h3 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
           <a href="{{ repo.url }}" class="hover:text-emerald-600 dark:hover:text-emerald-400" target="_blank" rel="noopener">
             {{ repo.name }}
diff --git a/interactions.njk b/interactions.njk
index fa78025..9c272a0 100644
--- a/interactions.njk
+++ b/interactions.njk
@@ -41,7 +41,7 @@ permalink: /interactions/
 
     <div class="grid gap-4 sm:gap-6 md:grid-cols-2 lg:grid-cols-3">
       {# Likes #}
-      <a href="/likes/" class="block p-6 bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group">
+      <a href="/likes/" class="block p-6 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group shadow-sm">
         <div class="flex items-center gap-4 mb-4">
           <div class="p-3 bg-rose-100 dark:bg-rose-900/30 rounded-full">
             <svg class="w-6 h-6 text-rose-500" fill="currentColor" viewBox="0 0 24 24">
@@ -57,7 +57,7 @@ permalink: /interactions/
       </a>
 
       {# Replies #}
-      <a href="/replies/" class="block p-6 bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group">
+      <a href="/replies/" class="block p-6 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group shadow-sm">
         <div class="flex items-center gap-4 mb-4">
           <div class="p-3 bg-rose-100 dark:bg-rose-900/30 rounded-full">
             <svg class="w-6 h-6 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -73,7 +73,7 @@ permalink: /interactions/
       </a>
 
       {# Bookmarks #}
-      <a href="/bookmarks/" class="block p-6 bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group">
+      <a href="/bookmarks/" class="block p-6 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group shadow-sm">
         <div class="flex items-center gap-4 mb-4">
           <div class="p-3 bg-yellow-100 dark:bg-yellow-900/30 rounded-full">
             <svg class="w-6 h-6 text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
@@ -89,7 +89,7 @@ permalink: /interactions/
       </a>
 
       {# Reposts #}
-      <a href="/reposts/" class="block p-6 bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group">
+      <a href="/reposts/" class="block p-6 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group shadow-sm">
         <div class="flex items-center gap-4 mb-4">
           <div class="p-3 bg-rose-100 dark:bg-rose-900/30 rounded-full">
             <svg class="w-6 h-6 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -105,7 +105,7 @@ permalink: /interactions/
       </a>
 
       {# Photos #}
-      <a href="/photos/" class="block p-6 bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group">
+      <a href="/photos/" class="block p-6 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group shadow-sm">
         <div class="flex items-center gap-4 mb-4">
           <div class="p-3 bg-purple-100 dark:bg-purple-900/30 rounded-full">
             <svg class="w-6 h-6 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -121,7 +121,7 @@ permalink: /interactions/
       </a>
     </div>
 
-    <div class="mt-12 p-6 bg-surface-100 dark:bg-surface-800/50 rounded-lg">
+    <div class="mt-12 p-6 bg-surface-50 dark:bg-surface-800/50 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
       <h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-2">About IndieWeb Interactions</h2>
       <p class="text-surface-600 dark:text-surface-400 text-sm mb-4">
         These pages show different types of IndieWeb interactions I've made. Each type uses specific microformat properties
@@ -214,7 +214,7 @@ permalink: /interactions/
     {# Webmentions list #}
     <div x-show="!notConfigured && (!loading || webmentions.length)" class="space-y-4">
       <template x-for="wm in paginatedWebmentions" :key="wm['wm-id']">
-        <div class="p-4 bg-surface-100 dark:bg-surface-800 rounded-lg">
+        <div class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
           <div class="flex gap-3">
             {# Author avatar #}
             <a :href="wm.author?.url || '#'" target="_blank" rel="noopener" class="flex-shrink-0">
@@ -261,7 +261,7 @@ permalink: /interactions/
                 </span>
 
                 <a :href="wm.url || '#'" target="_blank" rel="noopener" class="text-xs text-surface-500 hover:underline">
-                  <time :datetime="wm.published || wm['wm-received']" x-text="formatDate(wm.published || wm['wm-received'])"></time>
+                  <time class="font-mono text-sm" :datetime="wm.published || wm['wm-received']" x-text="formatDate(wm.published || wm['wm-received'])"></time>
                 </a>
               </div>
 
@@ -324,7 +324,7 @@ permalink: /interactions/
     </div>
 
     {# Info box #}
-    <div class="mt-12 p-6 bg-surface-100 dark:bg-surface-800/50 rounded-lg">
+    <div class="mt-12 p-6 bg-surface-50 dark:bg-surface-800/50 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
       <h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-2">About Webmentions</h2>
       <p class="text-surface-600 dark:text-surface-400 text-sm mb-4">
         Webmentions are a W3C standard for cross-site communication. When someone likes, reposts, or replies to my content
diff --git a/listening.njk b/listening.njk
index bfc3ea0..d821958 100644
--- a/listening.njk
+++ b/listening.njk
@@ -179,7 +179,7 @@ withSidebar: true
     <div class="grid gap-4 sm:gap-6 md:grid-cols-2">
       {# Funkwhale Stats #}
       {% if funkwhaleActivity.stats %}
-      <div x-show="activeSource === 'all' || activeSource === 'funkwhale'" class="bg-surface-50 dark:bg-surface-800 rounded-xl p-6 border border-purple-200 dark:border-purple-800">
+      <div x-show="activeSource === 'all' || activeSource === 'funkwhale'" class="bg-surface-50 dark:bg-surface-800 rounded-xl p-6 border border-purple-200 dark:border-purple-800 shadow-sm">
         <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-400 mb-4 flex items-center gap-2">
           <span class="w-3 h-3 rounded-full bg-purple-500"></span>
           Funkwhale
@@ -217,7 +217,7 @@ withSidebar: true
 
       {# Last.fm Stats #}
       {% if lastfmActivity.stats %}
-      <div x-show="activeSource === 'all' || activeSource === 'lastfm'" class="bg-surface-50 dark:bg-surface-800 rounded-xl p-6 border border-purple-200 dark:border-purple-800">
+      <div x-show="activeSource === 'all' || activeSource === 'lastfm'" class="bg-surface-50 dark:bg-surface-800 rounded-xl p-6 border border-purple-200 dark:border-purple-800 shadow-sm">
         <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-400 mb-4 flex items-center gap-2">
           <span class="w-3 h-3 rounded-full bg-purple-500"></span>
           Last.fm
@@ -270,7 +270,7 @@ withSidebar: true
       {% if funkwhaleActivity.listenings.length %}
       <div x-show="activeSource === 'all' || activeSource === 'funkwhale'">
         {% for listening in funkwhaleActivity.listenings | head(10) %}
-        <div class="flex items-center gap-4 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-purple-400 dark:hover:border-purple-600 transition-colors mb-2">
+        <div class="flex items-center gap-4 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-purple-400 dark:hover:border-purple-600 transition-colors mb-2 shadow-sm">
           {% if listening.coverUrl %}
           <img src="{{ listening.coverUrl }}" alt="" class="w-12 h-12 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
           {% else %}
@@ -324,7 +324,7 @@ withSidebar: true
       {% if lastfmActivity.scrobbles.length %}
       <div x-show="activeSource === 'all' || activeSource === 'lastfm'">
         {% for scrobble in lastfmActivity.scrobbles | head(10) %}
-        <div class="flex items-center gap-4 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-purple-400 dark:hover:border-purple-600 transition-colors mb-2">
+        <div class="flex items-center gap-4 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-purple-400 dark:hover:border-purple-600 transition-colors mb-2 shadow-sm">
           {% if scrobble.coverUrl %}
           <img src="{{ scrobble.coverUrl }}" alt="" class="w-12 h-12 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
           {% else %}
@@ -396,7 +396,7 @@ withSidebar: true
 
     <div class="grid gap-3 sm:gap-4 md:grid-cols-2">
       {% for track in lastfmActivity.loved | head(10) %}
-      <div class="flex items-center gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
+      <div class="flex items-center gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
         {% if track.coverUrl %}
         <img src="{{ track.coverUrl }}" alt="" class="w-14 h-14 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
         {% else %}
@@ -457,7 +457,7 @@ withSidebar: true
 
     <div class="grid gap-3 sm:gap-4 md:grid-cols-2">
       {% for favorite in funkwhaleActivity.favorites | head(10) %}
-      <div class="flex items-center gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
+      <div class="flex items-center gap-3 p-3 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
         {% if favorite.coverUrl %}
         <img src="{{ favorite.coverUrl }}" alt="" class="w-14 h-14 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
         {% else %}
diff --git a/readlater.njk b/readlater.njk
index 01de949..4ae00cf 100644
--- a/readlater.njk
+++ b/readlater.njk
@@ -41,7 +41,7 @@ permalink: /readlater/
             <select
               x-model="selectedSource"
               @change="fetchData()"
-              class="appearance-none bg-surface-50 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg pl-3 pr-8 py-2 text-sm focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
+              class="appearance-none bg-surface-50 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg pl-3 pr-8 py-2 text-sm"
             >
               <option value="">All sources</option>
               <template x-for="src in sources" :key="src">
@@ -58,7 +58,7 @@ permalink: /readlater/
               x-model.debounce.300ms="searchQuery"
               @input="fetchData()"
               placeholder="Search..."
-              class="w-full bg-surface-50 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg pl-9 pr-3 py-2 text-sm focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
+              class="w-full bg-surface-50 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg pl-9 pr-3 py-2 text-sm"
             />
             <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
@@ -80,7 +80,7 @@ permalink: /readlater/
       {# Items List #}
       <div x-show="!loading" class="space-y-4">
         <template x-for="item in items" :key="item.id">
-          <article class="bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 sm:p-5 hover:border-orange-400 dark:hover:border-orange-600 transition-colors">
+          <article class="bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 p-4 sm:p-5 hover:border-orange-400 dark:hover:border-orange-600 transition-colors shadow-sm">
             <div class="flex items-start gap-4">
               <div class="flex-shrink-0 w-10 h-10 rounded-lg bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center">
                 <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -96,7 +96,7 @@ permalink: /readlater/
                     class="inline-flex items-center px-2 py-0.5 bg-surface-100 dark:bg-surface-700 rounded-full text-xs"
                     x-text="item.source"
                   ></span>
-                  <time :datetime="item.savedAt" x-text="formatDate(item.savedAt)"></time>
+                  <time class="font-mono text-sm" :datetime="item.savedAt" x-text="formatDate(item.savedAt)"></time>
                 </div>
                 <p class="text-xs text-surface-400 mt-1 truncate" x-text="item.url"></p>
               </div>
diff --git a/starred.njk b/starred.njk
index 08eb83b..9861dec 100644
--- a/starred.njk
+++ b/starred.njk
@@ -24,7 +24,7 @@ eleventyExcludeFromCollections: true
         <span>
           <span x-text="totalCount"></span> repos starred on GitHub.
           <template x-if="lastSync">
-            <span>Last synced <span x-text="formatDate(lastSync)"></span>.</span>
+            <span>Last synced <span class="font-mono" x-text="formatDate(lastSync)"></span>.</span>
           </template>
         </span>
       </template>
@@ -37,7 +37,7 @@ eleventyExcludeFromCollections: true
   {# Loading state #}
   <template x-if="loading">
     <div class="text-center py-12">
-      <div class="inline-block w-8 h-8 border-4 border-accent-200 border-t-accent-600 rounded-full animate-spin"></div>
+      <div class="inline-block w-8 h-8 border-4 border-emerald-200 border-t-emerald-600 rounded-full animate-spin"></div>
       <p class="mt-4 text-surface-500">Loading starred repositories&hellip;</p>
     </div>
   </template>
@@ -58,7 +58,7 @@ eleventyExcludeFromCollections: true
           <button
             @click="activeTab = 'all'; resetView()"
             :class="activeTab === 'all'
-              ? 'border-accent-600 text-accent-700 dark:text-accent-400'
+              ? 'border-emerald-600 text-emerald-700 dark:text-emerald-400'
               : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300 hover:border-surface-300'"
             class="px-3 py-2 text-sm font-medium border-b-2 whitespace-nowrap transition-colors"
           >
@@ -71,7 +71,7 @@ eleventyExcludeFromCollections: true
             <button
               @click="activeTab = list.slug; resetView()"
               :class="activeTab === list.slug
-                ? 'border-accent-600 text-accent-700 dark:text-accent-400'
+                ? 'border-emerald-600 text-emerald-700 dark:text-emerald-400'
                 : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300 hover:border-surface-300'"
               class="px-3 py-2 text-sm font-medium border-b-2 whitespace-nowrap transition-colors"
             >
@@ -84,7 +84,7 @@ eleventyExcludeFromCollections: true
           <button
             @click="activeTab = 'uncategorized'; resetView()"
             :class="activeTab === 'uncategorized'
-              ? 'border-accent-600 text-accent-700 dark:text-accent-400'
+              ? 'border-emerald-600 text-emerald-700 dark:text-emerald-400'
               : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300 hover:border-surface-300'"
             class="px-3 py-2 text-sm font-medium border-b-2 whitespace-nowrap transition-colors"
           >
@@ -108,7 +108,7 @@ eleventyExcludeFromCollections: true
               x-model="searchQuery"
               @input="resetView()"
               placeholder="Search by name, description, topic, or language..."
-              class="w-full pl-10 pr-10 py-2 rounded-lg border border-surface-300 dark:border-surface-600 bg-surface-50 dark:bg-surface-800 text-surface-900 dark:text-surface-100 placeholder-surface-400 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-transparent"
+              class="w-full pl-10 pr-10 py-2 rounded-lg border border-surface-300 dark:border-surface-600 bg-surface-50 dark:bg-surface-800 text-surface-900 dark:text-surface-100 placeholder-surface-400 text-sm"
             >
             <template x-if="searchQuery">
               <button @click="searchQuery = ''; resetView()" class="absolute right-3 top-1/2 -translate-y-1/2 text-surface-400 hover:text-surface-600">
@@ -123,7 +123,7 @@ eleventyExcludeFromCollections: true
           <select
             x-model="sortBy"
             @change="resetView()"
-            class="px-3 py-2 rounded-lg border border-surface-300 dark:border-surface-600 bg-surface-50 dark:bg-surface-800 text-surface-900 dark:text-surface-100 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500"
+            class="px-3 py-2 rounded-lg border border-surface-300 dark:border-surface-600 bg-surface-50 dark:bg-surface-800 text-surface-900 dark:text-surface-100 text-sm"
           >
             <option value="stars">Sort: Stars</option>
             <option value="starredAt">Sort: Recently Starred</option>
@@ -138,7 +138,7 @@ eleventyExcludeFromCollections: true
           <select
             x-model="languageFilter"
             @change="resetView()"
-            class="px-2 py-1.5 rounded border border-surface-300 dark:border-surface-600 bg-surface-50 dark:bg-surface-800 text-surface-900 dark:text-surface-100 text-xs focus:outline-none focus:ring-2 focus:ring-accent-500"
+            class="px-2 py-1.5 rounded border border-surface-300 dark:border-surface-600 bg-surface-50 dark:bg-surface-800 text-surface-900 dark:text-surface-100 text-xs"
           >
             <option value="">All Languages</option>
             <template x-for="lang in availableLanguages" :key="lang">
@@ -152,7 +152,7 @@ eleventyExcludeFromCollections: true
               <button
                 @click="starCountMin = opt.value; resetView()"
                 :class="starCountMin === opt.value
-                  ? 'bg-accent-600 text-white'
+                  ? 'bg-emerald-600 text-white'
                   : 'bg-surface-50 dark:bg-surface-800 text-surface-600 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-700'"
                 class="px-2.5 py-1 text-xs font-medium transition-colors"
                 x-text="opt.label"
@@ -162,7 +162,7 @@ eleventyExcludeFromCollections: true
 
           {# Archived toggle #}
           <label class="flex items-center gap-1.5 text-xs text-surface-600 dark:text-surface-400 cursor-pointer">
-            <input type="checkbox" x-model="showArchived" @change="resetView()" class="rounded border-surface-300 text-accent-600 focus:ring-accent-500">
+            <input type="checkbox" x-model="showArchived" @change="resetView()" class="rounded border-surface-300 text-emerald-600">
             Show archived
           </label>
 
@@ -170,7 +170,7 @@ eleventyExcludeFromCollections: true
           <template x-if="hasActiveFilters">
             <button
               @click="clearFilters()"
-              class="text-xs text-accent-600 dark:text-accent-400 hover:underline"
+              class="text-xs text-emerald-600 dark:text-emerald-400 hover:underline"
             >Clear filters</button>
           </template>
         </div>
@@ -184,7 +184,7 @@ eleventyExcludeFromCollections: true
       {# ===== REPO GRID ===== #}
       <div class="grid gap-3 sm:gap-4 md:grid-cols-2" id="starred-grid">
         <template x-for="repo in visibleStars" :key="repo.fullName">
-          <article class="starred-card p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-surface-400 dark:hover:border-surface-500 transition-colors">
+          <article class="starred-card p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-emerald-400 dark:hover:border-emerald-600 transition-colors shadow-sm">
             <div class="flex items-center gap-2 mb-1">
               <template x-if="repo.ownerAvatar">
                 <img :src="repo.ownerAvatar" :alt="repo.ownerLogin" class="w-5 h-5 rounded-full" loading="lazy">
@@ -233,7 +233,7 @@ eleventyExcludeFromCollections: true
                 <span x-text="repo.license"></span>
               </template>
               <template x-if="repo.starredAt">
-                <span x-text="'Starred ' + formatDate(repo.starredAt)"></span>
+                <span class="font-mono" x-text="'Starred ' + formatDate(repo.starredAt)"></span>
               </template>
             </div>
           </article>
@@ -244,7 +244,7 @@ eleventyExcludeFromCollections: true
       <template x-if="sortedStars.length === 0">
         <div class="text-center py-12">
           <p class="text-surface-500">No repos match your current filters.</p>
-          <button @click="clearFilters()" class="mt-2 text-sm text-accent-600 dark:text-accent-400 hover:underline">Clear all filters</button>
+          <button @click="clearFilters()" class="mt-2 text-sm text-emerald-600 dark:text-emerald-400 hover:underline">Clear all filters</button>
         </div>
       </template>
 
@@ -253,10 +253,10 @@ eleventyExcludeFromCollections: true
         <div class="mt-6 text-center">
           <button
             @click="visibleCount = Math.min(visibleCount + 50, sortedStars.length)"
-            class="px-6 py-2.5 bg-accent-600 hover:bg-accent-700 text-white rounded-lg transition-colors"
+            class="px-6 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition-colors"
           >
             Load More
-            <span class="text-accent-200" x-text="'(' + (sortedStars.length - visibleCount) + ' remaining)'"></span>
+            <span class="text-emerald-200" x-text="'(' + (sortedStars.length - visibleCount) + ' remaining)'"></span>
           </button>
         </div>
       </template>
diff --git a/youtube.njk b/youtube.njk
index 28cfb2c..828f334 100644
--- a/youtube.njk
+++ b/youtube.njk
@@ -173,7 +173,7 @@ withSidebar: true
       {% if channelVideos and channelVideos.length %}
       <div class="grid gap-4 sm:gap-6 sm:grid-cols-2 lg:grid-cols-3">
         {% for video in channelVideos | head(9) %}
-        <article class="group bg-surface-50 dark:bg-surface-800 rounded-xl overflow-hidden border border-surface-200 dark:border-surface-700 hover:border-red-400 dark:hover:border-red-600 transition-colors">
+        <article class="group bg-surface-50 dark:bg-surface-800 rounded-xl overflow-hidden border border-surface-200 dark:border-surface-700 hover:border-red-400 dark:hover:border-red-600 transition-colors shadow-sm">
           <a href="{{ video.url }}" class="block" target="_blank" rel="noopener">
             <div class="relative aspect-video">
               {% if video.thumbnail %}