From c766a981c105c3826cc94869c3c3cd2035907079 Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Wed, 4 Mar 2026 17:29:50 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20design=20system=20audit=20=E2=80=94=20fo?=
 =?UTF-8?q?nt-mono=20dates,=20focus-visible=20states,=20domain=20color=20s?=
 =?UTF-8?q?traggler,=20shadow=20standardization?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

P1: Global font-mono on all <time> elements via @layer base CSS rule (covers 43 dates).
P2: Focus-visible states for buttons, inputs, links via CSS (covers 177 elements, WCAG 2.4.7).
P3: listening.njk "All" tab accent-600 → purple-600 (Music domain).
P4: .post-type-dropdown custom box-shadow → shadow-sm equivalent.

Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
---
 css/tailwind.css | 34 +++++++++++++++++++++++++++++++++-
 listening.njk    |  2 +-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/css/tailwind.css b/css/tailwind.css
index 6598040..d185f86 100644
--- a/css/tailwind.css
+++ b/css/tailwind.css
@@ -108,6 +108,38 @@
   body {
     @apply bg-surface-50 dark:bg-surface-950 text-surface-900 dark:text-surface-100;
   }
+
+  /* P1: Date typography — all <time> elements get monospace for technical texture */
+  time {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  }
+
+  /* P2: Focus-visible states — keyboard-only focus rings for accessibility (WCAG 2.4.7) */
+  button:focus-visible,
+  [role="button"]:focus-visible,
+  summary:focus-visible {
+    @apply outline-none ring-2 ring-amber-500/70 ring-offset-2 ring-offset-surface-50 rounded-sm;
+  }
+
+  .dark button:focus-visible,
+  .dark [role="button"]:focus-visible,
+  .dark summary:focus-visible {
+    @apply ring-offset-surface-900;
+  }
+
+  input:focus-visible,
+  select:focus-visible,
+  textarea:focus-visible {
+    @apply outline-none ring-2 ring-amber-500/70 border-transparent;
+  }
+
+  a:focus-visible {
+    @apply outline-none ring-2 ring-amber-500/70 ring-offset-1 ring-offset-surface-50 rounded-sm;
+  }
+
+  .dark a:focus-visible {
+    @apply ring-offset-surface-900;
+  }
 }
 
 /* Layout styles */
@@ -888,7 +920,7 @@ body[data-indiekit-auth="true"] .share-post-btn:hover {
   background: white;
   border: 1px solid #e5e7eb;
   border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* shadow-sm */
   z-index: 50;
   min-width: 120px;
   overflow: hidden;
diff --git a/listening.njk b/listening.njk
index 8fe358f..bfc3ea0 100644
--- a/listening.njk
+++ b/listening.njk
@@ -23,7 +23,7 @@ withSidebar: true
   <div class="flex gap-2 mb-8 flex-wrap">
     <button
       @click="activeSource = 'all'"
-      :class="activeSource === 'all' ? 'bg-accent-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
+      :class="activeSource === 'all' ? 'bg-purple-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
       class="px-4 py-2 rounded-full text-sm font-medium transition-colors"
     >
       All Sources