From 28d26f18c96461ec88d6b31d94b52c355cec2047 Mon Sep 17 00:00:00 2001
From: mithral <mithral@mithral.local>
Date: Sat, 10 Oct 2026 17:45:43 -0400
Subject: [PATCH] Swap brand accents, and lift the nav off the page

- Primary accent is now purple (#c084fc); blue-violet (#6d7cff) becomes the
  secondary. The primary button uses dark ink on purple for contrast, since
  white on that purple is only about 2.5:1.
- The sidebar gets its own surface (--nav-bg, #212121) one step below the page
  (#292929) with a stronger divider, so it reads as a distinct rail rather than
  blending into the content. Nav link, count and section colours lifted off
  --faint onto --muted for legibility against the darker rail.
- Light mode mirrors the same structure.

Verified: accent resolves to #c084fc, secondary to #6d7cff, nav to #212121 on a
#292929 page.
---
 web/src/app.css                     | 28 ++++++++++++++++++----------
 web/src/lib/components/Shell.svelte | 15 +++++++++------
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/web/src/app.css b/web/src/app.css
index cac4a07..999b675 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -5,26 +5,31 @@
 
 :root {
   /* ── Surfaces ─────────────────────────────────────────────────────── */
-  /* Brand charcoal, taken from the logo's own background (#303030). */
+  /* Brand charcoal, taken from the logo's own background (#303030). The nav
+     sits a step below the page so it reads as a distinct rail rather than
+     blending into the content. */
   --bg: #292929;
   --surface: #303030;
   --surface-2: #3a3a3a;
   --surface-3: #454545;
   --border: #3d3d3d;
   --border-strong: #4e4e4e;
+  --nav-bg: #212121;
+  --nav-border: #454545;
 
   /* ── Ink ──────────────────────────────────────────────────────────── */
   --text: #f2f2f2;
   --muted: #b5b5b5;
   --faint: #868686;
+  --nav-fg: #c9c9c9;
 
   /* ── Emphasis ─────────────────────────────────────────────────────── */
-  /* The logo's glow: blue-violet primary, purple secondary. */
-  --accent: #6d7cff;
-  --accent-hover: #8490ff;
-  --accent-soft: color-mix(in srgb, var(--accent) 20%, transparent);
-  --accent-text: #ffffff;
-  --accent-2: #c084fc;
+  /* Purple primary, blue-violet secondary — the logo's two hues. */
+  --accent: #c084fc;
+  --accent-hover: #cf9dff;
+  --accent-soft: color-mix(in srgb, var(--accent) 22%, transparent);
+  --accent-text: #1a1024;
+  --accent-2: #6d7cff;
   --danger: #ff6b6b;
   --success: #4ade80;
 
@@ -91,16 +96,19 @@
     --surface-3: #e6e6e8;
     --border: #e2e2e4;
     --border-strong: #cfcfd3;
+    --nav-bg: #ffffff;
+    --nav-border: #d8d8dc;
 
     --text: #1a1a1c;
     --muted: #5e5e64;
     --faint: #8a8a90;
+    --nav-fg: #4a4a52;
 
-    --accent: #5a6bff;
-    --accent-hover: #4759f0;
+    --accent: #9333ea;
+    --accent-hover: #7e22ce;
     --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
     --accent-text: #ffffff;
-    --accent-2: #9333ea;
+    --accent-2: #4f5bd5;
     --danger: #c0392b;
     --success: #1f8a4c;
 
diff --git a/web/src/lib/components/Shell.svelte b/web/src/lib/components/Shell.svelte
index 1a7fe18..628da54 100644
--- a/web/src/lib/components/Shell.svelte
+++ b/web/src/lib/components/Shell.svelte
@@ -177,8 +177,8 @@
     flex-direction: column;
     gap: var(--space-4);
     padding: var(--space-4) var(--space-3);
-    border-right: 1px solid var(--border);
-    background: var(--surface);
+    border-right: 1px solid var(--nav-border);
+    background: var(--nav-bg);
     overflow-y: auto;
   }
   .brand {
@@ -211,10 +211,13 @@
     border: none;
     border-radius: var(--radius);
     background: transparent;
-    color: var(--muted);
+    color: var(--nav-fg);
     text-align: left;
     cursor: pointer;
     font-size: .964rem;
+    transition:
+      background var(--t-fast) var(--ease),
+      color var(--t-fast) var(--ease);
   }
   .navlink:hover {
     background: var(--surface-2);
@@ -227,7 +230,7 @@
   }
   .count {
     font-size: .857rem;
-    color: var(--faint);
+    color: var(--muted);
     font-variant-numeric: tabular-nums;
   }
   .section {
@@ -235,7 +238,7 @@
     font-size: .786rem;
     text-transform: uppercase;
     letter-spacing: 0.07em;
-    color: var(--faint);
+    color: var(--muted);
   }
   .foot {
     margin-top: auto;
@@ -243,7 +246,7 @@
     flex-direction: column;
     gap: var(--space-2);
     padding-top: var(--space-3);
-    border-top: 1px solid var(--border);
+    border-top: 1px solid var(--nav-border);
   }
   .who {
     display: flex;