From b31e8ddade4f7fe35b40bb0b75d9964656957d8a Mon Sep 17 00:00:00 2001
From: zenchantlive <jordanlive121@gmail.com>
Date: Thu, 26 Feb 2026 15:33:08 -0800
Subject: [PATCH] refactor(theme): distinct warm charcoal layers - header
 darker, sidebar/main/card all different

---
 src/app/globals.css                     | 21 +++++++++++--------
 src/components/shared/left-panel.tsx    |  8 +++----
 src/components/shared/right-panel.tsx   |  4 ++--
 src/components/shared/top-bar.tsx       |  2 +-
 src/components/shared/unified-shell.tsx |  2 +-
 src/components/social/social-card.tsx   | 28 +++++++++++--------------
 6 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 643e01e..42ae7a8 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,17 +4,20 @@
 
 :root {
   /* ========== VISUAL-TRUTH UI TOKEN CONTRACT (bb-vt.1.1) ========== */
-  /* Lightened aurora palette */
-  --ui-bg-app: #0d1219;
-  --ui-bg-shell: #131b26;
-  --ui-bg-panel: #1a2330;
-  --ui-bg-card: #222d3d;
+  /* Warm charcoal aurora palette - DISTINCT LAYERS */
+  --ui-bg-app: #181716;        /* Darkest - page background */
+  --ui-bg-header: #131211;     /* Header - darker than sidebar */
+  --ui-bg-shell: #1f1e1d;      /* Sidebar - distinct from main */
+  --ui-bg-panel: #282725;      /* Panels/cards within sidebar */
+  --ui-bg-main: #242322;       /* Main content area - distinct */
+  --ui-bg-card: #302e2c;       /* Cards - lightest layer */
+  --ui-bg-elevated: #3a3836;   /* Elevated/selected elements */
 
-  --ui-border-soft: rgba(153, 171, 190, 0.2);
-  --ui-border-strong: rgba(153, 171, 190, 0.34);
+  --ui-border-soft: rgba(180, 175, 165, 0.2);
+  --ui-border-strong: rgba(180, 175, 165, 0.35);
 
-  --ui-text-primary: #e8edf5;
-  --ui-text-muted: #8f9caf;
+  --ui-text-primary: #f0eeea;
+  --ui-text-muted: #a8a49a;
 
   --ui-accent-ready: #35d98f;
   --ui-accent-blocked: #ff4c72;
diff --git a/src/components/shared/left-panel.tsx b/src/components/shared/left-panel.tsx
index 1f1e500..83b587f 100644
--- a/src/components/shared/left-panel.tsx
+++ b/src/components/shared/left-panel.tsx
@@ -190,9 +190,9 @@ export function LeftPanel({ issues, selectedEpicId, onEpicSelect, filters, onFil
   ];
 
   return (
-    <aside className="flex h-full min-h-0 overflow-hidden flex-col bg-[var(--ui-bg-shell)] shadow-[inset_-1px_0_0_rgba(0,0,0,0.55),24px_0_40px_-34px_rgba(0,0,0,0.98)]" data-testid="left-panel">
-      <div className="px-4 py-3 shadow-[0_14px_24px_-20px_rgba(0,0,0,0.92)]">
-        <div className="mb-3 flex items-center gap-1 rounded-xl bg-[#101c2b] p-1 shadow-[0_12px_24px_-18px_rgba(0,0,0,0.88)]">
+    <aside className="flex h-full min-h-0 overflow-hidden flex-col bg-[var(--ui-bg-shell)] border-r border-[var(--ui-border-strong)]" data-testid="left-panel">
+      <div className="px-4 py-3">
+        <div className="mb-3 flex items-center gap-1 rounded-xl bg-[var(--ui-bg-panel)] p-1 border border-[var(--ui-border-strong)]">
           {views.map((item) => {
             const active = view === item.id;
             return (
@@ -213,7 +213,7 @@ export function LeftPanel({ issues, selectedEpicId, onEpicSelect, filters, onFil
           })}
         </div>
 
-        <div className="space-y-2 rounded-xl bg-[var(--ui-bg-panel)] p-2.5 border border-[var(--ui-border-soft)]">
+        <div className="space-y-2 rounded-xl bg-[var(--ui-bg-card)] p-2.5 border border-[var(--ui-border-soft)]">
           <div className="grid grid-cols-1 gap-2">
             <input
               value={filters.query}
diff --git a/src/components/shared/right-panel.tsx b/src/components/shared/right-panel.tsx
index 5fecbf0..fec1ea8 100644
--- a/src/components/shared/right-panel.tsx
+++ b/src/components/shared/right-panel.tsx
@@ -20,9 +20,9 @@ export function RightPanel({ children, rail, isOpen: externalIsOpen }: RightPane
   if (isDesktop) {
     return (
       <div
-        className="ui-shell-panel flex overflow-hidden h-full"
+        className="flex overflow-hidden h-full bg-[var(--ui-bg-panel)] border-l border-[var(--ui-border-strong)]"
         style={{
-          boxShadow: isOpen ? '-12px 0 24px -16px rgba(0,0,0,0.5)' : 'none',
+          boxShadow: isOpen ? '-8px 0 20px -12px rgba(0,0,0,0.4)' : 'none',
         }}
         data-testid="right-panel-desktop"
       >
diff --git a/src/components/shared/top-bar.tsx b/src/components/shared/top-bar.tsx
index 129d83b..57e2ffd 100644
--- a/src/components/shared/top-bar.tsx
+++ b/src/components/shared/top-bar.tsx
@@ -55,7 +55,7 @@ export function TopBar({
   const { isDesktop } = useResponsive();
 
   return (
-    <header className="ui-shell-topbar flex h-[var(--topbar-height)] items-center justify-between border-b border-[var(--ui-border-soft)]" data-testid="top-bar">
+    <header className="flex h-[var(--topbar-height)] items-center justify-between border-b border-[var(--ui-border-strong)] bg-[var(--ui-bg-header)]" data-testid="top-bar">
       <div className="flex min-w-0 items-center">
         <button
           type="button"
diff --git a/src/components/shared/unified-shell.tsx b/src/components/shared/unified-shell.tsx
index f78dc63..bc27a37 100644
--- a/src/components/shared/unified-shell.tsx
+++ b/src/components/shared/unified-shell.tsx
@@ -182,7 +182,7 @@ export function UnifiedShell({
         <ResizeHandle direction="left" onResize={handleLeftResize} />
 
         {/* MIDDLE CONTENT: flex-1 */}
-        <div className="flex-1 relative overflow-hidden bg-[var(--ui-bg-shell)]" data-testid="middle-content">
+        <div className="flex-1 relative overflow-hidden bg-[var(--ui-bg-main)]" data-testid="middle-content">
           {renderMiddleContent()}
         </div>
 
diff --git a/src/components/social/social-card.tsx b/src/components/social/social-card.tsx
index 1558b3e..d693e39 100644
--- a/src/components/social/social-card.tsx
+++ b/src/components/social/social-card.tsx
@@ -34,9 +34,8 @@ function handleCardKeyDown(event: KeyboardEvent<HTMLDivElement>, onClick?: Mouse
 function statusVisual(status: SocialCardData['status']) {
   if (status === 'blocked') {
     return {
-      border: 'rgba(255, 76, 114, 0.5)',
-      cardBg: 'rgba(255, 76, 114, 0.08)',
-      badgeBg: 'rgba(255, 76, 114, 0.2)',
+      border: '#ff4c72',
+      badgeBg: 'rgba(255, 76, 114, 0.25)',
       badgeText: '#ffd5df',
       chipText: 'Blocked',
     };
@@ -44,9 +43,8 @@ function statusVisual(status: SocialCardData['status']) {
 
   if (status === 'in_progress') {
     return {
-      border: 'rgba(255, 178, 74, 0.5)',
-      cardBg: 'rgba(255, 178, 74, 0.08)',
-      badgeBg: 'rgba(255, 178, 74, 0.2)',
+      border: '#ffb24a',
+      badgeBg: 'rgba(255, 178, 74, 0.25)',
       badgeText: '#ffe5c7',
       chipText: 'Active',
     };
@@ -54,9 +52,8 @@ function statusVisual(status: SocialCardData['status']) {
 
   if (status === 'ready') {
     return {
-      border: 'rgba(53, 217, 143, 0.5)',
-      cardBg: 'rgba(53, 217, 143, 0.08)',
-      badgeBg: 'rgba(53, 217, 143, 0.2)',
+      border: '#35d98f',
+      badgeBg: 'rgba(53, 217, 143, 0.25)',
       badgeText: '#d6ffe7',
       chipText: 'Ready',
     };
@@ -64,8 +61,7 @@ function statusVisual(status: SocialCardData['status']) {
 
   return {
     border: 'var(--ui-border-strong)',
-    cardBg: 'var(--ui-bg-card)',
-    badgeBg: 'rgba(143, 156, 175, 0.15)',
+    badgeBg: 'rgba(168, 164, 154, 0.15)',
     badgeText: 'var(--ui-text-muted)',
     chipText: 'Closed',
   };
@@ -131,15 +127,15 @@ export function SocialCard({
       tabIndex={0}
       aria-label={`Open ${data.title}`}
       className={cn(
-        'group relative flex min-h-[290px] cursor-pointer flex-col rounded-[14px] border px-3.5 py-3 text-left transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent-info)]',
+        'group relative flex min-h-[290px] cursor-pointer flex-col rounded-[14px] border px-3.5 py-3 text-left transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent-info)]',
         className,
       )}
       style={{
-        background: status.cardBg,
-        borderColor: selected ? status.border : 'var(--ui-border-soft)',
+        background: 'var(--ui-bg-card)',
+        borderColor: selected ? status.border : 'var(--ui-border-strong)',
         boxShadow: selected
-          ? `0 0 0 1px ${status.border}, 0 20px 40px -20px rgba(0,0,0,0.6)`
-          : '0 8px 24px -16px rgba(0,0,0,0.5)',
+          ? `0 0 0 2px ${status.border}, 0 20px 40px -20px rgba(0,0,0,0.6)`
+          : '0 4px 12px -6px rgba(0,0,0,0.4)',
       }}
     >
       <div className="mb-2 flex items-center justify-between gap-2">