fix: replace all remaining old brand tokens (text-brand-dark, border-brand-border, bg-white opacity)

30 references to removed CSS variables: border-brand-border → border-[#1e2130],
text-brand-text-muted → text-[#4f5666], text-brand-dark → text-white,
bg-white/[0.04] → bg-[#191c25], hover:border-white/[0.12] → hover:border-[#2a2f3d].

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Design/DESIGN-SYSTEM-SETUP-GUIDE.md

@@ -0,0 +1,128 @@
+# How To Make Claude Code Follow The New Design System
+
+## The Problem
+
+Your project currently has MULTIPLE contradicting design documents:
+- CLAUDE.md references purple gradients, glass-morphism, AND cyan accents
+- Old docs like DESIGN_SYSTEM_GUIDE.md describe monochrome glass-card patterns
+- UI-DESIGN-SYSTEM.md describes a purple gradient workspace system
+- REBRAND-IMPLEMENTATION-GUIDE.md has the old Patherly → ResolutionFlow rebrand
+- Your actual CSS has Tailwind v4 with OKLCH cyan tokens
+
+Claude Code sees ALL of these and gets confused about which to follow.
+
+## The Fix — 4 Steps
+
+### Step 1: Place the new DESIGN-SYSTEM.md in your project root
+
+Copy `DESIGN-SYSTEM.md` (the file I created alongside this one) to:
+```
+C:\Dev\Projects\patherly\DESIGN-SYSTEM.md
+```
+
+This is the SINGLE SOURCE OF TRUTH for all design decisions going forward.
+
+---
+
+### Step 2: Update CLAUDE.md — Branding Section
+
+Find the `### Branding` section and REPLACE EVERYTHING between `**Brand details:**`
+and the next `---` separator with this:
+
+```markdown
+**Brand details:**
+
+- **Design system:** [DESIGN-SYSTEM.md](DESIGN-SYSTEM.md) — THE source of truth for all design decisions
+- **Design aesthetic:** Flat, high-contrast dark theme (Sentry/PostHog-inspired). No glass morphism, no gradients on surfaces, no ambient effects.
+- **Accent color:** Cyan (#22d3ee / #06b6d4). Used sparingly — ≤5% of the UI.
+- **Fonts:** IBM Plex Sans (body), Bricolage Grotesque (headings), JetBrains Mono (code) — loaded via Google Fonts
+- **Logo:** 30px gradient square (cyan) + "ResolutionFlow" in Bricolage Grotesque 700
+- **Layout:** Icon rail sidebar (72px, default) with hover flyout panels. Pinnable to full 260px sidebar.
+- **Brand assets:** `brand-assets/` (source SVGs), `frontend/src/assets/brand/` (app assets), `frontend/public/icons/` (favicon)
+- **Landing page:** Shares color system and typography. Full-width marketing layout at `/` route.
+- **Reference mockups:** `docs/mockups/` (HTML files, open in browser)
+
+**Component rules:**
+- Primary buttons: solid `accent` background (#22d3ee), white text
+- Cards: `bg-card` with 1px `border-default`, 8px radius. NO shadows, NO blur, NO gradients.
+- Badges: pill-shaped (20px radius), semantic dim background + matching text color
+- Active nav: `accent-dim` background + `accent-text` color + 3px left accent bar
+- Stat cards: 3px colored left border (accent/success/warning by position)
+- Code blocks: `bg-code` with JetBrains Mono, material-inspired syntax highlighting
+- Status colors: green (success), amber (warning), red (danger) — ONLY for semantic meaning
+
+When adding new pages/components: reference DESIGN-SYSTEM.md. Use flat dark surfaces, 1px borders, no decorative effects. All colors via CSS variables.
+```
+
+---
+
+### Step 3: Update CLAUDE.md — Tech Stack Line
+
+Find the styling line under Tech Stack → Frontend and change it to:
+
+```markdown
+- **Styling:** Tailwind CSS v4 — flat dark theme with cyan accent (see DESIGN-SYSTEM.md)
+```
+
+Remove any references to "monochrome glass-morphism" or "dark-only" limitations.
+
+---
+
+### Step 4: Archive Old Design Docs
+
+Move these files into an `archive/` folder (don't delete — you might want to reference them later):
+
+```
+mkdir archive
+mkdir archive\design-docs
+
+move DESIGN_SYSTEM_GUIDE.md archive\design-docs\
+move UI-DESIGN-SYSTEM.md archive\design-docs\
+move REBRAND-IMPLEMENTATION-GUIDE.md archive\design-docs\
+move COMPONENT_EXAMPLES.md archive\design-docs\   (if it exists in root)
+move docs\plans\Frontend\DESIGN_SYSTEM_GUIDE.md archive\design-docs\  (if it exists here)
+```
+
+If any of these files are referenced elsewhere in CLAUDE.md, remove those references.
+
+---
+
+## Why This Works
+
+Claude Code prioritizes files in this order:
+1. **CLAUDE.md** — reads this first, every time
+2. **Files referenced in CLAUDE.md** — follows links to read referenced docs
+3. **Files in the project root** — scans these for context
+4. **Files deeper in the tree** — only reads if specifically asked
+
+By putting DESIGN-SYSTEM.md in the root AND linking it from CLAUDE.md's branding section,
+Claude Code will find it immediately and treat it as authoritative. By archiving the old
+docs, Claude Code won't stumble on contradicting information.
+
+---
+
+## Verification
+
+After making these changes, test by asking Claude Code:
+1. "What color system does this project use?" — Should say cyan/teal flat dark theme, NOT purple gradients or monochrome
+2. "Create a new card component" — Should use bg-card with 1px border, NOT glass-card with backdrop-blur
+3. "What fonts does this project use?" — Should say IBM Plex Sans + Bricolage Grotesque, NOT Inter + Plus Jakarta Sans
+4. "Add a sidebar nav item" — Should follow the icon rail pattern, NOT a traditional full sidebar
+
+If any of these come back wrong, check that the old docs are actually archived and not still being found.
+
+---
+
+## Place These Mockup Files in docs/mockups/
+
+Also copy the HTML mockups we created into your project so Claude Code has visual references:
+
+```
+mkdir docs\mockups
+
+copy resolutionflow-redesign.html docs\mockups\
+copy resolutionflow-sidebar-final.html docs\mockups\
+copy resolutionflow-landing.html docs\mockups\
+```
+
+Then Claude Code can open these in a browser to see exactly what the target looks like.

Design/DESIGN-SYSTEM.md

@@ -0,0 +1,378 @@
+# ResolutionFlow Design System v4
+
+> **Status:** ACTIVE — This document is the single source of truth for all frontend design decisions.
+> **Supersedes:** All previous design system docs including `DESIGN_SYSTEM_GUIDE.md`, `UI-DESIGN-SYSTEM.md`, `REBRAND-IMPLEMENTATION-GUIDE.md`, and any `COMPONENT_EXAMPLES.md` files.
+> **Last Updated:** March 21, 2026
+
+---
+
+## Design Philosophy
+
+ResolutionFlow uses a **flat, high-contrast dark theme** inspired by Sentry and PostHog. The aesthetic is premium, clean, and minimal — no glass morphism, no backdrop blur, no ambient orbs, no gradient backgrounds on surfaces. The accent color appears in ≤5% of the UI. Every design decision prioritizes **readability over decoration**.
+
+**Light mode** is a planned addition (dark/light toggle). Design all components with CSS variables so theming is a variable swap, not a rewrite.
+
+---
+
+## Color System
+
+All colors are defined as CSS custom properties in `index.css` inside the `@theme` block (Tailwind v4) or `:root` / `.dark` blocks (Tailwind v3).
+
+### Dark Mode (Default)
+
+```
+Page background:     #0c0d10
+Sidebar background:  #0f1118
+Card background:     #14161d
+Card hover:          #191c25
+Input background:    #191c25
+Code background:     #0e1017
+Elevated surface:    #1c1f2a
+
+Text primary:        #e2e5eb
+Text heading:        #f0f2f5
+Text secondary:      #848b9b
+Text muted:          #4f5666
+Text rail label:     #6b7280
+
+Border default:      #1e2130
+Border hover:        #2a2f3d
+
+Accent (cyan):       #22d3ee
+Accent hover:        #06b6d4
+Accent dim (8-10%):  rgba(34,211,238,0.10)
+Accent text:         #67e8f9
+
+Success:             #34d399
+Success dim:         rgba(52,211,153,0.10)
+Warning:             #fbbf24
+Warning dim:         rgba(251,191,36,0.10)
+Danger:              #f87171
+Danger dim:          rgba(248,113,113,0.10)
+```
+
+### Light Mode (Planned)
+
+```
+Page background:     #f3f4f7
+Sidebar background:  #ffffff
+Card background:     #ffffff
+Card hover:          #f8f9fb
+Input background:    #eef0f4
+Code background:     #f5f6f9
+Elevated surface:    #e8eaef
+
+Text primary:        #1a1d24
+Text heading:        #0d0f13
+Text secondary:      #5a6274
+Text muted:          #8b92a1
+
+Border default:      #dde0e7
+Border hover:        #c5c9d3
+
+Accent:              #0891b2
+Accent dim:          rgba(8,145,178,0.07)
+Accent text:         #0e7490
+```
+
+### What NOT To Use
+
+- No glass morphism (`backdrop-filter: blur`)
+- No gradient backgrounds on cards or surfaces
+- No ambient orbs or floating glow elements
+- No `bg-white/[0.04]` opacity-based backgrounds
+- No purple gradient accent (`#818cf8 → #a78bfa`) — this is deprecated
+- No `text-gradient-brand` utility — replaced by solid `accent-text` color
+- No `glass-card`, `glass-stat`, `glass-card-glow` CSS utilities
+
+---
+
+## Typography
+
+### Font Stack
+
+| Role | Font | Weights | CSS Variable |
+|------|------|---------|-------------|
+| Body text | IBM Plex Sans | 400, 500, 600, 700 | `--font-sans` / `font-sans` |
+| Headings | Bricolage Grotesque | 600, 700, 800 | `--font-heading` / `font-heading` |
+| Code / Monospace | JetBrains Mono | 400, 500 | `--font-mono` / `font-mono` |
+
+### Typography Scale
+
+| Element | Size | Weight | Color | Letter Spacing |
+|---------|------|--------|-------|---------------|
+| Page title (h1) | 22px | 700 (Bricolage) | text-heading | -0.03em |
+| Section title | 15px | 600 (Bricolage) | text-heading | normal |
+| Card title | 14px | 600 (IBM Plex) | text-heading | normal |
+| Body text | 14px | 400 (IBM Plex) | text-primary | normal |
+| Secondary text | 13px | 400 (IBM Plex) | text-secondary | normal |
+| Label / hint | 12px | 500 (IBM Plex) | text-muted | normal |
+| Nav section header | 10px | 600 (IBM Plex) | text-muted | 1.2px, uppercase |
+| Rail icon label | 10px | 500 (IBM Plex) | text-rail-label | normal |
+| Code | 12px | 400 (JetBrains) | text-primary | normal |
+| Stat number | 28px | 700 (Bricolage) | text-heading | -0.03em |
+| Badge | 11px | 550 (IBM Plex) | varies | normal |
+
+### What NOT To Use
+
+- No Inter, Plus Jakarta Sans, or Outfit — these are deprecated
+- No `font-label` utility — use `font-mono` for monospace or `font-sans` at small size
+- No font sizes below 10px
+
+---
+
+## Layout Architecture
+
+### App Shell
+
+The app uses a CSS Grid layout with two states:
+
+**Icon Rail (Default):**
+```
+[icon-rail: 72px] [main-content: 1fr]
+```
+
+**Pinned Sidebar:**
+```
+[full-sidebar: 260px] [main-content: 1fr]
+```
+
+### Icon Rail Sidebar
+
+The default navigation is a narrow icon rail (72px) with:
+- Logo mark at top (30px square, gradient background, lightning bolt icon)
+- Nav items as vertical column: icon (20px) + label text (10px) underneath
+- Dividers between nav sections
+- User avatar at bottom
+- Pin/expand button below avatar
+
+**Hover behavior:** Hovering a rail item opens a flyout panel (220px) to the right of the rail with sub-navigation items for that section. The flyout stays open while the cursor is on either the rail item or the flyout panel.
+
+**Pinned state:** Clicking the pin button expands to a traditional 260px sidebar with full text labels, section headers, badges, and the active left-bar accent. An unpin button in the header returns to the icon rail.
+
+### Active Nav Indicator
+
+- **Icon rail:** `accent-dim` background on the item, `accent-text` color on icon and label
+- **Pinned sidebar:** Same as above, plus a 3px left border (`border-radius: 0 3px 3px 0`) in `accent` color
+
+### Main Content Area
+
+- Padding: 28px top/bottom, 36px left/right
+- Max content width: not constrained (fills available space)
+- Page title: Bricolage Grotesque, 22px, weight 700
+
+---
+
+## Component Patterns
+
+### Stat Cards
+
+```
+Background: bg-card
+Border: 1px solid border-default
+Border-left: 3px solid [varies by position - accent, success, warning, accent]
+Border-radius: 8px
+Padding: 18px 16px
+```
+
+- Label: 11px, uppercase, 600 weight, text-muted
+- Value: 28px, Bricolage Grotesque 700, text-heading
+- Delta: 12px, 500 weight, success/danger color with ↑/↓ prefix
+
+### Cards
+
+```
+Background: bg-card
+Border: 1px solid border-default
+Border-radius: 8px
+Padding: 20px
+Hover: border-color transitions to border-hover
+```
+
+No shadows. No gradients. No glow effects.
+
+### Flow List Items
+
+```
+Layout: flex row, 12px gap
+Padding: 10px 8px
+Border-bottom: 1px solid border-default (divider style, not bordered cards)
+Hover: bg-card-hover
+```
+
+- Icon: 34px square, border-radius 5px, semantic dim background + colored stroke
+- Name: 13px, 500 weight, text-heading
+- Meta: 11.5px, text-muted
+- Badge: right-aligned status badge
+
+### Badges
+
+```
+Font: 11px, 550 weight
+Padding: 3px 9px
+Border-radius: 20px (pill)
+```
+
+| Type | Background | Text Color |
+|------|-----------|------------|
+| Info/Accent | accent-dim | accent-text |
+| Success | success-dim | success |
+| Warning | warning-dim | warning |
+| Danger | danger-dim | danger |
+
+### Form Inputs
+
+```
+Background: bg-input
+Border: 1px solid border-default
+Border-radius: 5px
+Padding: 9px 12px
+Font: 13px, IBM Plex Sans
+Focus: border-color accent, box-shadow 0 0 0 2px accent-dim
+Placeholder: text-muted
+```
+
+### Buttons
+
+**Primary:**
+```
+Background: accent (#22d3ee)
+Color: #fff
+Border: none
+Border-radius: 5px
+Padding: 9px 16px
+Font: 13px, 550 weight
+Hover: brightness(1.1)
+```
+
+**Ghost:**
+```
+Background: transparent
+Color: text-secondary
+Border: 1px solid border-default
+Hover: bg-elevated, text-primary, border-hover
+```
+
+### Code Blocks
+
+```
+Background: bg-code (#0e1017)
+Border: 1px solid border-default
+Border-radius: 8px
+Padding: 18px 20px
+Font: JetBrains Mono, 12px, line-height 1.7
+```
+
+**Syntax colors (dark mode):**
+
+| Token | Color |
+|-------|-------|
+| Comment | #4a5568 |
+| Keyword | #c792ea |
+| Function/Cmdlet | #82aaff |
+| String | #c3e88d |
+| Variable | #89ddff |
+| Parameter | #8c93a4 |
+| Number | #f78c6c |
+
+### Chips / Tags
+
+```
+Font: 11.5px, 500 weight
+Padding: 4px 11px
+Border-radius: 20px
+Background: accent-dim
+Color: accent-text
+```
+
+---
+
+## Logo
+
+- **Mark:** 30-32px square, border-radius 8px, `linear-gradient(135deg, #06b6d4, #22d3ee)`, white lightning bolt SVG
+- **Wordmark:** "ResolutionFlow" in Bricolage Grotesque, 16-17px, weight 700, text-heading color
+- **Combined:** Mark + wordmark horizontally, 10px gap
+
+---
+
+## Spacing System
+
+- Component internal gaps: 6px, 8px, 12px, 14px, 16px
+- Card padding: 20px
+- Section gaps: 24px between major sections
+- Page padding: 28px vertical, 36px horizontal
+- Stat grid gap: 12px
+- Two-column gap: 16px
+- Nav item padding: 8px 10px (pinned), 8px 4px (rail)
+
+---
+
+## Border Radius
+
+| Token | Value | Use |
+|-------|-------|-----|
+| radius-sm | 5px | Inputs, buttons, small elements |
+| radius | 8px | Cards, stat cards, code blocks |
+| radius-lg | 12px | Large cards, modals |
+| radius-xl | 16px | Hero elements, CTA boxes |
+| radius-pill | 100px | Badges, chips, toggle tracks |
+
+---
+
+## Shadows
+
+Minimal to none. No decorative shadows.
+
+- Cards: none (border only)
+- Dropdowns/flyouts: `0 4px 12px rgba(0,0,0,0.3)` if needed
+- Logo mark: `0 2px 8px rgba(14,165,233,0.25)` (subtle brand glow on logo only)
+
+---
+
+## Icons
+
+All icons use Lucide React (`lucide-react` package).
+- Default size: 16-18px
+- Stroke width: 1.6-1.8
+- Color: `currentColor` (inherits from parent text color)
+- Nav icons: 20px at stroke-width 1.6
+- Rail icon opacity: 0.6 default, 0.85 on hover, 1.0 when active
+
+---
+
+## Landing Page
+
+The marketing landing page at `/` shares the same color system and typography but has its own layout (no sidebar, full-width sections). Key differences:
+
+- Navigation: fixed top bar with logo, links, and CTAs
+- Hero: centered layout with glow effect (radial gradient, accent at 15% opacity)
+- Sections: 100px vertical padding, max-width 1120px container
+- Section labels: JetBrains Mono, 12px, uppercase, accent-text color
+- Section titles: Bricolage Grotesque, clamp(28px, 4vw, 42px), weight 800
+- Pricing cards: same card pattern but with featured state (accent border + subtle glow)
+- Product mockup: embedded in hero, shows the actual app UI with browser chrome
+
+---
+
+## Files That Define The Design System
+
+These are the source-of-truth files in the codebase:
+
+| File | What It Controls |
+|------|-----------------|
+| `frontend/src/index.css` | CSS variables, `@theme` block, base styles |
+| `frontend/tailwind.config.js` (v3) or inline in index.css (v4) | Color tokens, font families, spacing extensions |
+| `frontend/index.html` | Google Font imports |
+| `DESIGN-SYSTEM.md` (this file) | Design decisions, component specs, rules |
+
+---
+
+## Deprecated Files — DO NOT Reference
+
+These files contain outdated design information and should be ignored:
+
+- `DESIGN_SYSTEM_GUIDE.md` — Old monochrome glass-morphism system
+- `UI-DESIGN-SYSTEM.md` — Old workspace/purple gradient system
+- `REBRAND-IMPLEMENTATION-GUIDE.md` — Old purple rebrand from Patherly
+- `COMPONENT_EXAMPLES.md` — Old monochrome component patterns
+- Any file referencing `glass-card`, `glass-stat`, `bg-gradient-brand`, or `text-gradient-brand`

frontend/src/components/account/DeleteAccountModal.tsx

@@ -69,7 +69,7 @@ export function DeleteAccountModal({ onClose }: Props) {
               onClick={onClose}
               className={cn(
                 'rounded-lg px-4 py-2 text-sm font-medium',
-                'bg-white/[0.04] border border-brand-border text-[#e2e5eb]'
+                'bg-[#191c25] border border-[#1e2130] text-[#e2e5eb]'
               )}
             >
               Cancel

frontend/src/components/account/LeaveAccountModal.tsx

@@ -45,7 +45,7 @@ export function LeaveAccountModal({ accountName, onClose }: Props) {
             onClick={onClose}
             className={cn(
               'rounded-lg px-4 py-2 text-sm font-medium',
-              'bg-white/[0.04] border border-brand-border text-[#e2e5eb]'
+              'bg-[#191c25] border border-[#1e2130] text-[#e2e5eb]'
             )}
           >
             Cancel

frontend/src/components/account/TransferOwnershipModal.tsx

@@ -90,7 +90,7 @@ export function TransferOwnershipModal({ members, onClose, onTransferred }: Prop
                 onClick={onClose}
                 className={cn(
                   'rounded-lg px-4 py-2 text-sm font-medium',
-                  'bg-white/[0.04] border border-brand-border text-[#e2e5eb]'
+                  'bg-[#191c25] border border-[#1e2130] text-[#e2e5eb]'
                 )}
               >
                 Cancel
@@ -100,7 +100,7 @@ export function TransferOwnershipModal({ members, onClose, onTransferred }: Prop
                 disabled={isSubmitting || !password}
                 className={cn(
                   'rounded-lg px-4 py-2 text-sm font-semibold',
-                  'bg-amber-500 text-brand-dark hover:bg-amber-400',
+                  'bg-amber-500 text-white hover:bg-amber-400',
                   'disabled:opacity-50'
                 )}
               >

frontend/src/components/assistant/ChatMessage.tsx

@@ -29,7 +29,7 @@ export function ChatMessage({ role, content, suggestedFlows }: ChatMessageProps)
           className={`rounded-2xl px-4 py-3 text-[0.875rem] leading-relaxed ${
             role === 'user'
               ? 'bg-primary/15 text-[#e2e5eb]'
-              : 'bg-white/[0.04] text-[#e2e5eb] border border-brand-border'
+              : 'bg-[#191c25] text-[#e2e5eb] border border-[#1e2130]'
           }`}
         >
           <MarkdownContent content={content} className="text-[0.875rem] leading-relaxed" />

frontend/src/components/assistant/ChatSidebar.tsx

@@ -31,7 +31,7 @@ export function ChatSidebar({
       <div className="px-4 py-3 border-b shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
         <button
           onClick={onNewChat}
-          className="w-full flex items-center justify-center gap-2 bg-[#22d3ee] text-brand-dark font-semibold text-sm rounded-lg px-4 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all"
+          className="w-full flex items-center justify-center gap-2 bg-[#22d3ee] text-white font-semibold text-sm rounded-lg px-4 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all"
         >
           <Plus size={16} />
           New Chat
@@ -103,7 +103,7 @@ function ChatItem({
         'group flex items-center gap-2 px-3 py-2.5 mx-1.5 rounded-lg cursor-pointer transition-colors',
         isActive
           ? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb]'
-          : 'text-[#848b9b] hover:bg-white/[0.04] hover:text-[#e2e5eb]'
+          : 'text-[#848b9b] hover:bg-[#191c25] hover:text-[#e2e5eb]'
       )}
     >
       <MessageSquare size={14} className="shrink-0" />

frontend/src/components/assistant/ConcludeSessionModal.tsx

@@ -169,7 +169,7 @@ export function ConcludeSessionModal({
           </div>
           <button
             onClick={onClose}
-            className="p-2 rounded-lg hover:bg-brand-border text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+            className="p-2 rounded-lg hover:bg-[#1e2130] text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
           >
             <X size={18} />
           </button>
@@ -196,7 +196,7 @@ export function ConcludeSessionModal({
                 className={cn(
                   'w-6 h-6 rounded-full flex items-center justify-center text-[0.6875rem] font-sans text-xs font-medium transition-colors',
                   step === s
-                    ? 'bg-[#22d3ee] text-brand-dark'
+                    ? 'bg-[#22d3ee] text-white'
                     : (i < ['select-outcome', 'add-notes', 'summary'].indexOf(step))
                     ? 'bg-primary/20 text-[#22d3ee]'
                     : 'bg-brand-border text-[#848b9b]'
@@ -233,8 +233,8 @@ export function ConcludeSessionModal({
                     className={cn(
                       'w-full flex items-center gap-4 p-4 rounded-xl border transition-all text-left',
                       'hover:scale-[1.01] active:scale-[0.99]',
-                      'bg-white/[0.02] border-brand-border',
+                      'bg-[#14161d] border-[#1e2130]',
-                      'hover:border-white/[0.12] hover:bg-white/[0.04]'
+                      'hover:border-[#2a2f3d] hover:bg-[#191c25]'
                     )}
                   >
                     <div className={cn('w-10 h-10 rounded-xl flex items-center justify-center', o.bg)}>
@@ -308,7 +308,7 @@ export function ConcludeSessionModal({
 
               {/* Generated summary */}
               <div
-                className="rounded-xl border p-5 bg-white/[0.02]"
+                className="rounded-xl border p-5 bg-[#14161d]"
                 style={{ borderColor: 'var(--glass-border)' }}
               >
                 <div className="flex items-center justify-between mb-3">
@@ -335,7 +335,7 @@ export function ConcludeSessionModal({
               <div />
               <button
                 onClick={onClose}
-                className="px-4 py-2 rounded-lg text-sm text-[#848b9b] hover:text-[#e2e5eb] bg-white/[0.04] border border-brand-border hover:border-white/[0.12] transition-all"
+                className="px-4 py-2 rounded-lg text-sm text-[#848b9b] hover:text-[#e2e5eb] bg-[#191c25] border border-[#1e2130] hover:border-[#2a2f3d] transition-all"
               >
                 Cancel
               </button>
@@ -346,14 +346,14 @@ export function ConcludeSessionModal({
             <>
               <button
                 onClick={() => setStep('select-outcome')}
-                className="px-4 py-2 rounded-lg text-sm text-[#848b9b] hover:text-[#e2e5eb] bg-white/[0.04] border border-brand-border hover:border-white/[0.12] transition-all"
+                className="px-4 py-2 rounded-lg text-sm text-[#848b9b] hover:text-[#e2e5eb] bg-[#191c25] border border-[#1e2130] hover:border-[#2a2f3d] transition-all"
               >
                 Back
               </button>
               <button
                 onClick={handleGenerate}
                 disabled={generating}
-                className="flex items-center gap-2 bg-[#22d3ee] text-brand-dark font-semibold text-sm rounded-lg px-5 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-50"
+                className="flex items-center gap-2 bg-[#22d3ee] text-white font-semibold text-sm rounded-lg px-5 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-50"
               >
                 {generating ? (
                   <>
@@ -390,7 +390,7 @@ export function ConcludeSessionModal({
                     'flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-semibold transition-all',
                     copied
                       ? 'bg-emerald-400/15 text-emerald-400 border border-emerald-400/30'
-                      : 'bg-[#22d3ee] text-brand-dark hover:brightness-110 active:scale-[0.98]'
+                      : 'bg-[#22d3ee] text-white hover:brightness-110 active:scale-[0.98]'
                   )}
                 >
                   {copied ? (
@@ -407,7 +407,7 @@ export function ConcludeSessionModal({
                 </button>
                 <button
                   onClick={onClose}
-                  className="px-4 py-2.5 rounded-lg text-sm text-[#848b9b] hover:text-[#e2e5eb] bg-white/[0.04] border border-brand-border hover:border-white/[0.12] transition-all"
+                  className="px-4 py-2.5 rounded-lg text-sm text-[#848b9b] hover:text-[#e2e5eb] bg-[#191c25] border border-[#1e2130] hover:border-[#2a2f3d] transition-all"
                 >
                   Done
                 </button>

frontend/src/components/assistant/SuggestedFlowCard.tsx

@@ -18,7 +18,7 @@ export function SuggestedFlowCard({ flow }: SuggestedFlowCardProps) {
   return (
     <button
       onClick={handleClick}
-      className="w-full text-left card-flat p-3 rounded-xl hover:border-white/[0.12] transition-colors group"
+      className="w-full text-left card-flat p-3 rounded-xl hover:border-[#2a2f3d] transition-colors group"
     >
       <div className="flex items-start gap-2">
         <Box size={14} className="text-[#22d3ee] mt-0.5 shrink-0" />

frontend/src/components/common/ContextMenu.tsx

@@ -87,7 +87,7 @@ export function ContextMenu({ position, items, onClose }: ContextMenuProps) {
               'flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors',
               item.variant === 'danger'
                 ? 'text-rose-400 hover:bg-rose-500/10'
-                : 'text-[#e2e5eb] hover:bg-brand-border'
+                : 'text-[#e2e5eb] hover:bg-[#1e2130]'
             )}
           >
             {item.icon && (

frontend/src/components/copilot/CopilotPanel.tsx

@@ -110,7 +110,7 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
         </div>
         <button
           onClick={onClose}
-          className="p-1.5 rounded-lg hover:bg-brand-border text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+          className="p-1.5 rounded-lg hover:bg-[#1e2130] text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
         >
           <X size={16} />
         </button>
@@ -124,7 +124,7 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
               className={`max-w-[85%] rounded-xl px-3.5 py-2.5 text-[0.8125rem] leading-relaxed ${
                 msg.role === 'user'
                   ? 'bg-primary/15 text-[#e2e5eb]'
-                  : 'bg-white/[0.04] text-[#e2e5eb] border border-brand-border'
+                  : 'bg-[#191c25] text-[#e2e5eb] border border-[#1e2130]'
               }`}
             >
               <MarkdownContent content={msg.content} className="text-[0.8125rem] leading-relaxed" />
@@ -133,7 +133,7 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
         ))}
         {loading && (
           <div className="flex justify-start">
-            <div className="bg-white/[0.04] border border-brand-border rounded-xl px-3.5 py-2.5">
+            <div className="bg-[#191c25] border border-[#1e2130] rounded-xl px-3.5 py-2.5">
               <Loader2 size={16} className="animate-spin text-[#22d3ee]" />
             </div>
           </div>
@@ -171,7 +171,7 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
           <button
             onClick={handleSend}
             disabled={!input.trim() || loading || initializing}
-            className="bg-[#22d3ee] text-brand-dark p-2.5 rounded-xl hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-40"
+            className="bg-[#22d3ee] text-white p-2.5 rounded-xl hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-40"
           >
             <Send size={16} />
           </button>

frontend/src/components/editor-ai/AIPromptDialog.tsx

@@ -83,7 +83,7 @@ export function AIPromptDialog({
           <button
             onClick={onClose}
             disabled={isGenerating}
-            className="rounded-[10px] bg-white/[0.04] border border-brand-border px-4 py-2 text-sm text-foreground hover:border-white/[0.12] transition-colors disabled:opacity-50"
+            className="rounded-[10px] bg-[#191c25] border border-[#1e2130] px-4 py-2 text-sm text-foreground hover:border-[#2a2f3d] transition-colors disabled:opacity-50"
           >
             Cancel
           </button>

frontend/src/components/editor-ai/ChatTab.tsx

@@ -50,7 +50,7 @@ export function ChatTab({ messages, input, onInputChange, onSend, isLoading }: C
               className={`max-w-[85%] rounded-xl px-3.5 py-2.5 text-[0.8125rem] leading-relaxed ${
                 msg.role === 'user'
                   ? 'bg-primary/15 text-foreground'
-                  : 'bg-white/[0.04] text-foreground border border-brand-border'
+                  : 'bg-[#191c25] text-foreground border border-[#1e2130]'
               }`}
             >
               <MarkdownContent content={msg.content} className="text-[0.8125rem] leading-relaxed" />
@@ -59,7 +59,7 @@ export function ChatTab({ messages, input, onInputChange, onSend, isLoading }: C
         ))}
         {isLoading && (
           <div className="flex justify-start">
-            <div className="bg-white/[0.04] border border-brand-border rounded-xl px-3.5 py-2.5">
+            <div className="bg-[#191c25] border border-[#1e2130] rounded-xl px-3.5 py-2.5">
               <Loader2 size={16} className="animate-spin text-primary" />
             </div>
           </div>

frontend/src/components/editor-ai/EditorAIPanel.tsx

@@ -65,7 +65,7 @@ export function EditorAIPanel({
         </div>
         <button
           onClick={onClose}
-          className="p-1.5 rounded-lg hover:bg-brand-border text-muted-foreground hover:text-foreground transition-colors"
+          className="p-1.5 rounded-lg hover:bg-[#1e2130] text-muted-foreground hover:text-foreground transition-colors"
         >
           <X size={16} />
         </button>

frontend/src/components/editor-ai/SuggestionsTab.tsx

@@ -26,7 +26,7 @@ export function SuggestionsTab({ suggestions }: SuggestionsTabProps) {
         const config = STATUS_CONFIG[s.status]
         const StatusIcon = config.icon
         return (
-          <div key={s.id} className="rounded-lg border border-border bg-white/[0.02] px-3 py-2">
+          <div key={s.id} className="rounded-lg border border-border bg-[#14161d] px-3 py-2">
             <div className="flex items-center justify-between">
               <span className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
                 {s.action_type.replace(/_/g, ' ')}
@@ -39,7 +39,7 @@ export function SuggestionsTab({ suggestions }: SuggestionsTabProps) {
             {s.target_node_id && (
               <p className="mt-1 text-xs text-muted-foreground truncate">Node: {s.target_node_id}</p>
             )}
-            <p className="mt-0.5 font-label text-[0.625rem] text-brand-text-muted">
+            <p className="mt-0.5 font-label text-[0.625rem] text-[#4f5666]">
               {new Date(s.created_at).toLocaleDateString()}
             </p>
           </div>

frontend/src/components/library/ImportFlowModal.tsx

@@ -122,7 +122,7 @@ export function ImportFlowModal({ onClose }: ImportFlowModalProps) {
                   'flex flex-col items-center justify-center rounded-lg border-2 border-dashed px-4 py-8 text-center transition-colors cursor-pointer',
                   isDragging
                     ? 'border-primary/50 bg-primary/5'
-                    : 'border-[#1e2130] hover:border-white/[0.12]'
+                    : 'border-[#1e2130] hover:border-[#2a2f3d]'
                 )}
                 onClick={() => fileInputRef.current?.click()}
                 onDragOver={(e) => { e.preventDefault(); setIsDragging(true) }}

frontend/src/components/procedural/FallbackSteps.tsx

@@ -64,7 +64,7 @@ export function FallbackSteps({
                   key={fbStep.id}
                   className={cn(
                     'rounded-lg border p-3 transition-colors',
-                    'bg-white/[0.02] border-[#1e2130]/50',
+                    'bg-[#14161d] border-[#1e2130]/50',
                     isCompleted && 'border-emerald-500/30 bg-emerald-500/5'
                   )}
                 >

frontend/src/components/script-editor/ParameterCard.tsx

@@ -60,7 +60,7 @@ export function ParameterCard({
       <button
         type="button"
         onClick={() => setExpanded(v => !v)}
-        className="w-full flex items-center gap-2 px-3 py-2.5 bg-white/[0.02] hover:bg-white/[0.04] transition-colors"
+        className="w-full flex items-center gap-2 px-3 py-2.5 bg-[#14161d] hover:bg-[#191c25] transition-colors"
       >
         <GripVertical size={14} className="text-[#848b9b]/50 shrink-0" />
         {expanded ? <ChevronDown size={14} className="text-[#848b9b]" /> : <ChevronRight size={14} className="text-[#848b9b]" />}

frontend/src/components/script-editor/ScriptTemplateListView.tsx

@@ -138,7 +138,7 @@ export function ScriptTemplateListView({ onEdit, onCreate }: Props) {
               {templates.map(t => (
                 <tr
                   key={t.id}
-                  className="border-b border-[#1e2130] last:border-b-0 hover:bg-white/[0.02] transition-colors"
+                  className="border-b border-[#1e2130] last:border-b-0 hover:bg-[#14161d] transition-colors"
                 >
                   <td className="px-4 py-3">
                     <span className="text-[#e2e5eb] font-medium">{t.name}</span>

frontend/src/components/scripts/ScriptParameterForm.tsx

@@ -43,7 +43,7 @@ export function ScriptParameterForm({ canGenerate }: Props) {
 
   if (parameters.length === 0) {
     return (
-      <div className="flex items-center gap-2 rounded-lg border border-border bg-white/[0.02] px-3 py-3">
+      <div className="flex items-center gap-2 rounded-lg border border-border bg-[#14161d] px-3 py-3">
         <Terminal size={14} className="text-muted-foreground shrink-0" />
         <p className="text-xs text-muted-foreground">
           This template has no parameters — click <span className="text-foreground font-medium">Generate</span> to produce the script.

frontend/src/components/session/TicketPickerModal.tsx

@@ -290,7 +290,7 @@ export function TicketPickerModal({ open, onClose, sessionId, onLinked, onSelect
                     disabled={isLooking}
                     className={cn(
                       'w-full rounded-lg border border-transparent px-3 py-2.5 text-left transition-all',
-                      'hover:border-[#1e2130] hover:bg-white/[0.04]',
+                      'hover:border-[#1e2130] hover:bg-[#191c25]',
                       'disabled:opacity-50',
                       result.closed && 'opacity-60'
                     )}

frontend/src/components/ui/Button.tsx

@@ -8,9 +8,9 @@ const buttonVariants = cva(
     variants: {
       variant: {
         primary:
-          'bg-[#22d3ee] text-brand-dark font-semibold hover:brightness-110',
+          'bg-[#22d3ee] text-white font-semibold hover:brightness-110',
         secondary:
-          'bg-white/[0.04] border border-brand-border text-[#e2e5eb] hover:border-white/[0.12] hover:bg-brand-border',
+          'bg-[#191c25] border border-[#1e2130] text-[#e2e5eb] hover:border-[#2a2f3d] hover:bg-[#1e2130]',
         destructive:
           'bg-red-400/10 text-red-400 border border-red-400/20 hover:bg-red-400/20',
         ghost:

frontend/src/components/ui/Skeleton.tsx

@@ -47,7 +47,7 @@ export function ListSkeleton({ count = 5, className }: { count?: number; classNa
   return (
     <div className={cn('space-y-3', className)}>
       {Array.from({ length: count }).map((_, i) => (
-        <div key={i} className="flex items-center gap-3 px-4 py-3 rounded-lg bg-white/[0.02]">
+        <div key={i} className="flex items-center gap-3 px-4 py-3 rounded-lg bg-[#14161d]">
           <Skeleton className="size-8 rounded-full shrink-0" />
           <div className="flex-1 space-y-2">
             <Skeleton className="h-4 w-2/3" />

frontend/src/pages/AssistantChatPage.tsx

@@ -275,7 +275,7 @@ export default function AssistantChatPage() {
                   <div className="w-8 h-8 rounded-full bg-primary/15 flex items-center justify-center">
                     <Sparkles size={14} className="text-[#22d3ee]" />
                   </div>
-                  <div className="bg-white/[0.04] border border-brand-border rounded-2xl px-4 py-3">
+                  <div className="bg-[#191c25] border border-[#1e2130] rounded-2xl px-4 py-3">
                     <Loader2 size={16} className="animate-spin text-[#22d3ee]" />
                   </div>
                 </div>
@@ -302,7 +302,7 @@ export default function AssistantChatPage() {
                     <button
                       onClick={handleSend}
                       disabled={!input.trim() || loading}
-                      className="bg-[#22d3ee] text-brand-dark p-3 rounded-xl hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-40"
+                      className="bg-[#22d3ee] text-white p-3 rounded-xl hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-40"
                       title="Send message"
                     >
                       <Send size={18} />
@@ -338,7 +338,7 @@ export default function AssistantChatPage() {
             </p>
             <button
               onClick={handleNewChat}
-              className="bg-[#22d3ee] text-brand-dark font-semibold text-sm rounded-lg px-6 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all"
+              className="bg-[#22d3ee] text-white font-semibold text-sm rounded-lg px-6 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all"
             >
               Start a Conversation
             </button>

frontend/src/pages/GuideDetailPage.tsx

@@ -14,7 +14,7 @@ export default function GuideDetailPage() {
         <p className="text-sm text-[#848b9b] mb-4">The guide you're looking for doesn't exist.</p>
         <Link
           to="/guides"
-          className="bg-[#22d3ee] text-brand-dark font-semibold text-sm rounded-lg px-5 py-2 hover:brightness-110 active:scale-[0.98] transition-all"
+          className="bg-[#22d3ee] text-white font-semibold text-sm rounded-lg px-5 py-2 hover:brightness-110 active:scale-[0.98] transition-all"
         >
           Back to Guides
         </Link>

frontend/src/pages/LoginPage.tsx

@@ -149,7 +149,7 @@ export function LoginPage() {
               data-testid="login-submit"
               className={cn(
                 'w-full rounded-lg px-4 py-2.5 text-sm font-semibold',
-                'bg-[#22d3ee] text-brand-dark hover:brightness-110 active:scale-[0.98]',
+                'bg-[#22d3ee] text-white hover:brightness-110 active:scale-[0.98]',
                 'focus:outline-hidden focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-background',
                 'disabled:cursor-not-allowed disabled:opacity-50',
                 'transition-all'

frontend/src/pages/SurveyPage.tsx

@@ -399,12 +399,12 @@ export default function SurveyPage() {
                   </button>
                 ) : <div />}
                 {si < SLIDES.length - 1 ? (
-                  <button onClick={() => goSlide(si + 1)} className="inline-flex items-center gap-2 px-5 py-2.5 sm:px-6 sm:py-3 rounded-lg text-sm font-semibold bg-[#22d3ee] text-brand-dark transition-all duration-150 hover:brightness-110 active:scale-[0.98]">
+                  <button onClick={() => goSlide(si + 1)} className="inline-flex items-center gap-2 px-5 py-2.5 sm:px-6 sm:py-3 rounded-lg text-sm font-semibold bg-[#22d3ee] text-white transition-all duration-150 hover:brightness-110 active:scale-[0.98]">
                     Next
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
                   </button>
                 ) : (
-                  <button onClick={handleSubmit} disabled={isSubmitting} className="inline-flex items-center gap-2 px-5 py-2.5 sm:px-6 sm:py-3 rounded-lg text-sm font-semibold bg-[#22d3ee] text-brand-dark transition-all duration-150 hover:brightness-110 active:scale-[0.98] disabled:opacity-40 disabled:cursor-not-allowed">
+                  <button onClick={handleSubmit} disabled={isSubmitting} className="inline-flex items-center gap-2 px-5 py-2.5 sm:px-6 sm:py-3 rounded-lg text-sm font-semibold bg-[#22d3ee] text-white transition-all duration-150 hover:brightness-110 active:scale-[0.98] disabled:opacity-40 disabled:cursor-not-allowed">
                     {isSubmitting ? 'Submitting...' : 'Submit'}
                     {!isSubmitting && <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5"/></svg>}
                   </button>
@@ -443,7 +443,7 @@ export default function SurveyPage() {
                     value={emailInput}
                     onChange={e => setEmailInput(e.target.value)}
                     placeholder="your@email.com"
-                    className="flex-1 rounded-[9px] px-3.5 py-2.5 text-sm text-[#e2e5eb] placeholder:text-brand-text-muted focus:outline-hidden"
+                    className="flex-1 rounded-[9px] px-3.5 py-2.5 text-sm text-[#e2e5eb] placeholder:text-[#4f5666] focus:outline-hidden"
                     style={{ background: 'rgba(16, 17, 20, 0.6)', border: '1px solid var(--glass-border)' }}
                     onFocus={e => { e.currentTarget.style.borderColor = 'var(--color-primary)' }}
                     onBlur={e => { e.currentTarget.style.borderColor = 'var(--glass-border)' }}
@@ -473,7 +473,7 @@ export default function SurveyPage() {
                       }
                     }}
                     disabled={!emailInput.trim() || emailSending}
-                    className="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-[9px] text-sm font-semibold bg-[#22d3ee] text-brand-dark transition-all duration-150 hover:brightness-110 active:scale-[0.98] disabled:opacity-40 disabled:cursor-not-allowed whitespace-nowrap"
+                    className="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-[9px] text-sm font-semibold bg-[#22d3ee] text-white transition-all duration-150 hover:brightness-110 active:scale-[0.98] disabled:opacity-40 disabled:cursor-not-allowed whitespace-nowrap"
                   >
                     {emailSending ? (
                       <>
@@ -502,7 +502,7 @@ export default function SurveyPage() {
               </button>
               <button
                 onClick={() => navigate('/survey/thank-you')}
-                className="inline-flex items-center gap-2 px-5 py-2.5 sm:px-6 rounded-lg text-sm font-semibold bg-[#22d3ee] text-brand-dark transition-all duration-150 hover:brightness-110 active:scale-[0.98]"
+                className="inline-flex items-center gap-2 px-5 py-2.5 sm:px-6 rounded-lg text-sm font-semibold bg-[#22d3ee] text-white transition-all duration-150 hover:brightness-110 active:scale-[0.98]"
               >
                 Finish
                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
@@ -600,7 +600,7 @@ function QuestionCard({ question: q, answer, setAnswer }: { question: SurveyQues
           value={(answer as string) || ''}
           onChange={e => setAnswer(q.id, e.target.value)}
           placeholder="Type your answer here..."
-          className="w-full min-h-[100px] rounded-[9px] p-3 sm:p-3.5 text-[13px] sm:text-sm text-[#e2e5eb] leading-relaxed resize-y transition-all duration-200 placeholder:text-brand-text-muted focus:outline-hidden"
+          className="w-full min-h-[100px] rounded-[9px] p-3 sm:p-3.5 text-[13px] sm:text-sm text-[#e2e5eb] leading-relaxed resize-y transition-all duration-200 placeholder:text-[#4f5666] focus:outline-hidden"
           style={{
             background: 'rgba(16, 17, 20, 0.6)',
             border: '1px solid var(--glass-border)',
@@ -736,7 +736,7 @@ function DragRank({ items, onChange }: { items: string[]; onChange: (items: stri
             color: 'var(--color-muted-foreground)',
           }}
         >
-          <div className="shrink-0 text-brand-text-muted">
+          <div className="shrink-0 text-[#4f5666]">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="9" cy="6" r="1"/><circle cx="15" cy="6" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="9" cy="18" r="1"/><circle cx="15" cy="18" r="1"/></svg>
           </div>
           <div className="font-sans text-xs text-[11px] font-semibold w-5 text-center shrink-0" style={{ color: 'var(--color-primary)' }}>{idx + 1}</div>

frontend/src/pages/VerifyEmailPage.tsx

@@ -42,7 +42,7 @@ export function VerifyEmailPage() {
             <Link
               to="/"
               className={cn(
-                'mt-6 inline-flex items-center rounded-lg bg-[#22d3ee] px-6 py-2 text-sm font-semibold text-brand-dark',
+                'mt-6 inline-flex items-center rounded-lg bg-[#22d3ee] px-6 py-2 text-sm font-semibold text-white',
                 'hover:brightness-110'
               )}
             >
@@ -58,8 +58,8 @@ export function VerifyEmailPage() {
             <Link
               to="/"
               className={cn(
-                'mt-6 inline-flex items-center rounded-lg bg-white/[0.04] border border-brand-border px-6 py-2 text-sm font-medium text-[#e2e5eb]',
+                'mt-6 inline-flex items-center rounded-lg bg-[#191c25] border border-[#1e2130] px-6 py-2 text-sm font-medium text-[#e2e5eb]',
-                'hover:border-white/[0.12]'
+                'hover:border-[#2a2f3d]'
               )}
             >
               Go to Dashboard

frontend/src/pages/account/ChatRetentionSettingsPage.tsx

@@ -104,7 +104,7 @@ export default function ChatRetentionSettingsPage() {
           <button
             onClick={handleSave}
             disabled={saving}
-            className="bg-[#22d3ee] text-brand-dark font-semibold text-sm rounded-lg px-5 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-40 flex items-center gap-2"
+            className="bg-[#22d3ee] text-white font-semibold text-sm rounded-lg px-5 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-40 flex items-center gap-2"
           >
             {saving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
             Save Settings

frontend/src/pages/account/ProfileSettingsPage.tsx

@@ -132,7 +132,7 @@ export function ProfileSettingsPage() {
               type="submit"
               disabled={isSaving || !hasChanges}
               className={cn(
-                'inline-flex items-center gap-2 rounded-lg bg-[#22d3ee] px-4 py-2 text-sm font-semibold text-brand-dark',
+                'inline-flex items-center gap-2 rounded-lg bg-[#22d3ee] px-4 py-2 text-sm font-semibold text-white',
                 'hover:brightness-110 active:scale-[0.98]',
                 'disabled:opacity-50 disabled:cursor-not-allowed'
               )}
@@ -145,8 +145,8 @@ export function ProfileSettingsPage() {
               to="/change-password"
               className={cn(
                 'inline-flex items-center rounded-lg px-4 py-2 text-sm font-medium',
-                'bg-white/[0.04] border border-brand-border text-[#e2e5eb]',
+                'bg-[#191c25] border border-[#1e2130] text-[#e2e5eb]',
-                'hover:border-white/[0.12]'
+                'hover:border-[#2a2f3d]'
               )}
             >
               Change Password

frontend/src/pages/admin/SurveyInvitesPage.tsx

@@ -101,7 +101,7 @@ export default function SurveyInvitesPage() {
             <button
               onClick={() => handleCreate(false)}
               disabled={creating || !name.trim()}
-              className="inline-flex items-center gap-2 rounded-lg bg-[#22d3ee] px-4 py-2 text-sm font-semibold text-brand-dark hover:brightness-110 active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+              className="inline-flex items-center gap-2 rounded-lg bg-[#22d3ee] px-4 py-2 text-sm font-semibold text-white hover:brightness-110 active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed transition-all"
             >
               {creating ? <Loader2 className="h-4 w-4 animate-spin" /> : <Link2 className="h-4 w-4" />}
               Generate Link
@@ -109,7 +109,7 @@ export default function SurveyInvitesPage() {
             <button
               onClick={() => handleCreate(true)}
               disabled={creating || !name.trim() || !email.trim()}
-              className="inline-flex items-center gap-2 rounded-lg bg-white/[0.04] border border-brand-border px-4 py-2 text-sm font-medium text-[#e2e5eb] hover:border-white/[0.12] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+              className="inline-flex items-center gap-2 rounded-lg bg-[#191c25] border border-[#1e2130] px-4 py-2 text-sm font-medium text-[#e2e5eb] hover:border-[#2a2f3d] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed transition-all"
             >
               {creating ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
               Send Email
@@ -132,7 +132,7 @@ export default function SurveyInvitesPage() {
               </div>
               <button
                 onClick={() => handleCopy(lastCreated.survey_url)}
-                className="shrink-0 rounded-lg p-2 text-[#848b9b] hover:bg-brand-border hover:text-[#e2e5eb] transition-colors"
+                className="shrink-0 rounded-lg p-2 text-[#848b9b] hover:bg-[#1e2130] hover:text-[#e2e5eb] transition-colors"
               >
                 {copied ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
               </button>
@@ -163,7 +163,7 @@ export default function SurveyInvitesPage() {
                 <tr><td colSpan={7} className="px-4 py-8 text-center text-sm text-[#848b9b]">No invites yet</td></tr>
               ) : (
                 invites.map(invite => (
-                  <tr key={invite.id} className="border-b border-[#1e2130]/50 hover:bg-white/[0.02] transition-colors">
+                  <tr key={invite.id} className="border-b border-[#1e2130]/50 hover:bg-[#14161d] transition-colors">
                     <td className="px-4 py-3 text-sm text-[#e2e5eb]">{invite.recipient_name}</td>
                     <td className="px-4 py-3 text-sm text-[#848b9b]">{invite.recipient_email || '—'}</td>
                     <td className="px-4 py-3">
@@ -188,7 +188,7 @@ export default function SurveyInvitesPage() {
                     <td className="px-4 py-3 text-center">
                       <button
                         onClick={() => handleCopy(invite.survey_url)}
-                        className="rounded-lg p-1.5 text-[#848b9b] hover:bg-brand-border hover:text-[#e2e5eb] transition-colors"
+                        className="rounded-lg p-1.5 text-[#848b9b] hover:bg-[#1e2130] hover:text-[#e2e5eb] transition-colors"
                         title="Copy survey link"
                       >
                         <Copy className="h-3.5 w-3.5" />

frontend/src/pages/admin/SurveyResponsesPage.tsx

@@ -152,7 +152,7 @@ function ResponseRow({
         className={cn(
           'border-b border-[#1e2130]/50 transition-colors cursor-pointer',
           !response.is_read && 'bg-primary/3',
-          'hover:bg-white/[0.02]'
+          'hover:bg-[#14161d]'
         )}
       >
         {/* Checkbox */}
@@ -214,7 +214,7 @@ function ResponseRow({
         <td className="px-3 py-3 w-10 relative">
           <button
             onClick={e => { e.stopPropagation(); setShowMenu(!showMenu) }}
-            className="p-1.5 rounded-lg hover:bg-brand-border text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
+            className="p-1.5 rounded-lg hover:bg-[#1e2130] text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
           >
             <MoreHorizontal className="h-4 w-4" />
           </button>
@@ -227,14 +227,14 @@ function ResponseRow({
               >
                 <button
                   onClick={() => { onMarkRead(); setShowMenu(false) }}
-                  className="flex w-full items-center gap-2.5 px-3 py-2 text-xs text-[#848b9b] hover:text-[#e2e5eb] hover:bg-white/[0.04] transition-colors"
+                  className="flex w-full items-center gap-2.5 px-3 py-2 text-xs text-[#848b9b] hover:text-[#e2e5eb] hover:bg-[#191c25] transition-colors"
                 >
                   {response.is_read ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
                   {response.is_read ? 'Mark Unread' : 'Mark Read'}
                 </button>
                 <button
                   onClick={() => { onArchive(); setShowMenu(false) }}
-                  className="flex w-full items-center gap-2.5 px-3 py-2 text-xs text-[#848b9b] hover:text-[#e2e5eb] hover:bg-white/[0.04] transition-colors"
+                  className="flex w-full items-center gap-2.5 px-3 py-2 text-xs text-[#848b9b] hover:text-[#e2e5eb] hover:bg-[#191c25] transition-colors"
                 >
                   {response.archived_at ? <ArchiveRestore className="h-3.5 w-3.5" /> : <Archive className="h-3.5 w-3.5" />}
                   {response.archived_at ? 'Unarchive' : 'Archive'}
@@ -437,7 +437,7 @@ export default function SurveyResponsesPage() {
                 'inline-flex items-center gap-2 rounded-lg px-3 py-2 text-xs font-medium transition-colors border',
                 showArchived
                   ? 'bg-[rgba(34,211,238,0.10)] text-[#22d3ee] border-primary/20'
-                  : 'bg-white/[0.04] text-[#848b9b] border-brand-border hover:border-white/[0.12]'
+                  : 'bg-[#191c25] text-[#848b9b] border-[#1e2130] hover:border-[#2a2f3d]'
               )}
             >
               <Archive className="h-3.5 w-3.5" />
@@ -446,7 +446,7 @@ export default function SurveyResponsesPage() {
             <button
               onClick={handleExport}
               disabled={exporting || responses.length === 0}
-              className="inline-flex items-center gap-2 rounded-lg bg-white/[0.04] border border-brand-border px-4 py-2 text-sm font-medium text-[#e2e5eb] transition-colors hover:border-white/[0.12] disabled:opacity-50"
+              className="inline-flex items-center gap-2 rounded-lg bg-[#191c25] border border-[#1e2130] px-4 py-2 text-sm font-medium text-[#e2e5eb] transition-colors hover:border-[#2a2f3d] disabled:opacity-50"
             >
               {exporting ? (
                 <Loader2 className="h-4 w-4 animate-spin" />
@@ -508,21 +508,21 @@ export default function SurveyResponsesPage() {
           <div className="flex-1" />
           <button
             onClick={() => handleBulkAction('mark_read')}
-            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-[#848b9b] hover:text-[#e2e5eb] hover:bg-brand-border transition-colors"
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-[#848b9b] hover:text-[#e2e5eb] hover:bg-[#1e2130] transition-colors"
           >
             <Eye className="h-3.5 w-3.5" />
             Mark Read
           </button>
           <button
             onClick={() => handleBulkAction('mark_unread')}
-            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-[#848b9b] hover:text-[#e2e5eb] hover:bg-brand-border transition-colors"
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-[#848b9b] hover:text-[#e2e5eb] hover:bg-[#1e2130] transition-colors"
           >
             <EyeOff className="h-3.5 w-3.5" />
             Mark Unread
           </button>
           <button
             onClick={() => handleBulkAction('archive')}
-            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-[#848b9b] hover:text-[#e2e5eb] hover:bg-brand-border transition-colors"
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-[#848b9b] hover:text-[#e2e5eb] hover:bg-[#1e2130] transition-colors"
           >
             <Archive className="h-3.5 w-3.5" />
             Archive
@@ -536,7 +536,7 @@ export default function SurveyResponsesPage() {
           </button>
           <button
             onClick={() => setSelectedIds(new Set())}
-            className="px-3 py-1.5 rounded-lg text-xs font-medium text-[#848b9b] hover:text-[#e2e5eb] hover:bg-brand-border transition-colors"
+            className="px-3 py-1.5 rounded-lg text-xs font-medium text-[#848b9b] hover:text-[#e2e5eb] hover:bg-[#1e2130] transition-colors"
           >
             Clear
           </button>