feat: implement design system — domain colors, date typography, interaction states, CV family colors

Apply the collaboratively-written design system from .interface-design/system.md:

- Domain color map: Social pages (rose), Code pages (emerald), Reading pages
  (orange), Music pages (purple) replace generic accent tokens
- Font-mono on all <time> elements via global CSS rule + wrap 7 non-<time> dates
- Shadow standardization: replace hover:shadow-lg with border-hover on news cards
- Active states: scale(0.97) press feedback on buttons and pagination links
- Gradient cleanup: remove to-white gradient on github featured project cards
- CV Skills & Interests: cycle through 8 distinct colors per family category
  (amber, emerald, sky, rose, purple, orange, teal, indigo) on both CV page
  and homepage
- Update system.md with refined palette documentation and domain color spec

Files: 19 changed across templates, CSS, and design documentation

Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d

interactions.njk

@@ -20,18 +20,18 @@ permalink: /interactions/
   <div class="flex border-b border-surface-200 dark:border-surface-700 mb-6">
     <button
       @click="activeTab = 'outbound'"
-      :class="activeTab === 'outbound' ? 'border-accent-500 text-accent-600 dark:text-accent-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
+      :class="activeTab === 'outbound' ? 'border-rose-500 text-rose-600 dark:text-rose-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
       class="px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-colors">
       My Activity
       <span class="ml-1 text-xs text-surface-400">(outbound)</span>
     </button>
     <button
       @click="activeTab = 'inbound'"
-      :class="activeTab === 'inbound' ? 'border-accent-500 text-accent-600 dark:text-accent-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
+      :class="activeTab === 'inbound' ? 'border-rose-500 text-rose-600 dark:text-rose-400' : 'border-transparent text-surface-500 hover:text-surface-700 dark:hover:text-surface-300'"
       class="px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-colors">
       Received
       <span class="ml-1 text-xs text-surface-400">(inbound)</span>
-      <span x-show="totalInbound > 0" x-text="totalInbound" class="ml-1 px-1.5 py-0.5 text-xs bg-accent-100 dark:bg-accent-900 text-accent-700 dark:text-accent-300 rounded-full"></span>
+      <span x-show="totalInbound > 0" x-text="totalInbound" class="ml-1 px-1.5 py-0.5 text-xs bg-rose-100 dark:bg-rose-900 text-rose-700 dark:text-rose-300 rounded-full"></span>
     </button>
   </div>
 
@@ -43,13 +43,13 @@ permalink: /interactions/
       {# 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">
         <div class="flex items-center gap-4 mb-4">
-          <div class="p-3 bg-red-100 dark:bg-red-900/30 rounded-full">
-            <svg class="w-6 h-6 text-red-500" fill="currentColor" viewBox="0 0 24 24">
+          <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">
               <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
             </svg>
           </div>
           <div>
-            <h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-red-600 dark:group-hover:text-red-400">Likes</h2>
+            <h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-rose-600 dark:group-hover:text-rose-400">Likes</h2>
             <p class="text-sm text-surface-500">{{ collections.likes.length }} item{% if collections.likes.length != 1 %}s{% endif %}</p>
           </div>
         </div>
@@ -59,13 +59,13 @@ permalink: /interactions/
       {# 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">
         <div class="flex items-center gap-4 mb-4">
-          <div class="p-3 bg-sky-100 dark:bg-sky-900/30 rounded-full">
-            <svg class="w-6 h-6 text-sky-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <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">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
             </svg>
           </div>
           <div>
-            <h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-sky-600 dark:group-hover:text-sky-400">Replies</h2>
+            <h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-rose-600 dark:group-hover:text-rose-400">Replies</h2>
             <p class="text-sm text-surface-500">{{ collections.replies.length }} item{% if collections.replies.length != 1 %}s{% endif %}</p>
           </div>
         </div>
@@ -91,13 +91,13 @@ permalink: /interactions/
       {# 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">
         <div class="flex items-center gap-4 mb-4">
-          <div class="p-3 bg-green-100 dark:bg-green-900/30 rounded-full">
-            <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <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">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
             </svg>
           </div>
           <div>
-            <h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-green-600 dark:group-hover:text-green-400">Reposts</h2>
+            <h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 group-hover:text-rose-600 dark:group-hover:text-rose-400">Reposts</h2>
             <p class="text-sm text-surface-500">{{ collections.reposts.length }} item{% if collections.reposts.length != 1 %}s{% endif %}</p>
           </div>
         </div>
@@ -153,7 +153,7 @@ permalink: /interactions/
 
     {# Loading state #}
     <div x-show="loading && !webmentions.length" class="text-center py-12">
-      <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-accent-500"></div>
+      <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-rose-500"></div>
       <p class="mt-4 text-surface-500">Loading webmentions...</p>
     </div>
 
@@ -181,7 +181,7 @@ permalink: /interactions/
     <div x-show="!notConfigured && (!loading || webmentions.length)" class="flex flex-wrap gap-2 mb-6">
       <button
         @click="filterType = 'all'"
-        :class="filterType === 'all' ? 'bg-accent-500 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300'"
+        :class="filterType === 'all' ? 'bg-rose-500 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300'"
         class="px-3 py-1.5 text-sm rounded-full transition-colors">
         All <span x-text="'(' + totalInbound + ')'" class="text-xs opacity-75"></span>
       </button>
@@ -271,7 +271,7 @@ permalink: /interactions/
               {# Target URL - which of my posts this is about #}
               <div class="mt-2 text-xs text-surface-500">
                 <span>on </span>
-                <a :href="wm['wm-target']" class="text-accent-600 dark:text-accent-400 hover:underline" x-text="formatTargetUrl(wm['wm-target'])"></a>
+                <a :href="wm['wm-target']" class="text-rose-600 dark:text-rose-400 hover:underline" x-text="formatTargetUrl(wm['wm-target'])"></a>
               </div>
             </div>
           </div>