From 34b0f2ade9c746b5a7f530905ceda3ba5283d5a7 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Fri, 27 Mar 2026 05:42:08 +0000
Subject: [PATCH] fix: eliminate deprecated cyan, glass-border, and off-palette
 colors site-wide
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace all rgba(6,182,212,...) cyan focus borders and accents with
  rgba(249,115,22,...) ember orange across 21+ component files
- Remove all var(--glass-border) references (undefined variable) with
  var(--color-border-default) across 24 files
- Remove deprecated blur orbs and glass-morphism effects from
  SurveyPage, SurveyThankYouPage, and LoginPage
- Migrate landing.css from hardcoded hex to CSS custom properties
  (~97 replacements for single-source theming)
- Fix off-palette grays in FlowPilotAnalyticsPage chart styling
  (#8891a0 → #848b9b, #18191f → var(--color-bg-card))
- Update stale comments: "cyan brand" → "accent brand" in GlowEdge,
  "gradient cyan square" → "gradient orange square" in BrandLogo
- Rename glow-cyan SVG filter ID to glow-accent
- Fix category color comment: "cyan" → "deep orange"

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../assistant/ConcludeSessionModal.tsx        |  10 +-
 frontend/src/components/common/BrandLogo.tsx  |   2 +-
 .../src/components/common/RichTextInput.tsx   |   2 +-
 .../src/components/copilot/CopilotPanel.tsx   |   8 +-
 .../dashboard/KnowledgeBaseCards.tsx          |   4 +-
 .../src/components/dashboard/OpenSessions.tsx |   4 +-
 .../dashboard/PendingEscalations.tsx          |   4 +-
 .../src/components/dashboard/QuickActions.tsx |   2 +-
 .../components/dashboard/RecentActivity.tsx   |   4 +-
 .../components/dashboard/SessionsPanel.tsx    |   2 +-
 .../dashboard/StartSessionInput.tsx           |   4 +-
 .../src/components/dashboard/TeamSummary.tsx  |   4 +-
 .../components/dashboard/WeeklyCalendar.tsx   |   6 +-
 frontend/src/components/editor-ai/ChatTab.tsx |   4 +-
 .../components/editor-ai/EditorAIPanel.tsx    |   6 +-
 .../src/components/editor-ai/NodeSummary.tsx  |   4 +-
 .../components/flowpilot/FlowPilotIntake.tsx  |   4 +-
 .../flowpilot/FlowPilotMessageBar.tsx         |   4 +-
 .../components/flowpilot/FlowPilotOptions.tsx |   2 +-
 .../flowpilot/InSessionScriptGenerator.tsx    |   2 +-
 .../components/flowpilot/ProposalDetail.tsx   |   4 +-
 .../components/flowpilot/SessionBriefing.tsx  |   2 +-
 .../kb-accelerator/ReviewScreen.tsx           |   2 +-
 .../components/kb-accelerator/SourcePanel.tsx |   2 +-
 .../script-builder/ScriptBuilderInput.tsx     |   4 +-
 .../script-editor/ParameterCard.tsx           |   2 +-
 .../ParameterDetectorStepper.tsx              |   2 +-
 .../script-editor/ParameterSchemaBuilder.tsx  |   2 +-
 .../script-editor/ScriptTemplateEditor.tsx    |   4 +-
 .../script-editor/ScriptTemplateListView.tsx  |   2 +-
 .../scripts/ScriptParameterField.tsx          |   2 +-
 .../session/AddSupportingDataModal.tsx        |   4 +-
 .../components/settings/BrandingSettings.tsx  |   2 +-
 .../src/components/sidebar/ActivityItem.tsx   |   2 +-
 .../src/components/tree-editor/GlowEdge.tsx   |   6 +-
 frontend/src/constants/categoryColors.ts      |   2 +-
 frontend/src/pages/AssistantChatPage.tsx      |   4 +-
 frontend/src/pages/FlowPilotAnalyticsPage.tsx |  16 +-
 frontend/src/pages/FlowPilotSessionPage.tsx   |   2 +-
 frontend/src/pages/GuideDetailPage.tsx        |   2 +-
 frontend/src/pages/LoginPage.tsx              |  26 ---
 frontend/src/pages/PublicTemplatesPage.tsx    |  12 +-
 frontend/src/pages/ReviewQueuePage.tsx        |   2 +-
 frontend/src/pages/ScriptBuilderPage.tsx      |   2 +-
 frontend/src/pages/SurveyPage.tsx             |  48 ++---
 frontend/src/pages/SurveyThankYouPage.tsx     |  18 +-
 .../account/ChatRetentionSettingsPage.tsx     |   4 +-
 .../src/pages/account/IntegrationsPage.tsx    |   4 +-
 .../src/pages/admin/GalleryManagementPage.tsx |   4 +-
 .../src/pages/admin/SurveyResponsesPage.tsx   |  10 +-
 frontend/src/styles/landing.css               | 196 +++++++++---------
 51 files changed, 210 insertions(+), 266 deletions(-)

diff --git a/frontend/src/components/assistant/ConcludeSessionModal.tsx b/frontend/src/components/assistant/ConcludeSessionModal.tsx
index 5f285706..f874cab3 100644
--- a/frontend/src/components/assistant/ConcludeSessionModal.tsx
+++ b/frontend/src/components/assistant/ConcludeSessionModal.tsx
@@ -152,7 +152,7 @@ export function ConcludeSessionModal({
         {/* Header */}
         <div
           className="flex items-center justify-between px-6 py-4 border-b shrink-0"
-          style={{ borderColor: 'var(--glass-border)' }}
+          style={{ borderColor: 'var(--color-border-default)' }}
         >
           <div className="flex items-center gap-3">
             <div className="w-9 h-9 rounded-xl bg-accent-dim flex items-center justify-center">
@@ -178,7 +178,7 @@ export function ConcludeSessionModal({
         {/* Step indicator */}
         <div
           className="px-6 py-3 border-b shrink-0 flex items-center gap-2"
-          style={{ borderColor: 'var(--glass-border)' }}
+          style={{ borderColor: 'var(--color-border-default)' }}
         >
           {(['select-outcome', 'add-notes', 'summary'] as ModalStep[]).map((s, i) => (
             <div key={s} className="flex items-center gap-2">
@@ -283,7 +283,7 @@ export function ConcludeSessionModal({
                   }
                   rows={4}
                   className="w-full resize-none rounded-xl border bg-card text-foreground text-sm placeholder:text-muted-foreground px-4 py-3 focus:outline-hidden focus:border-primary/30"
-                  style={{ borderColor: 'var(--glass-border)' }}
+                  style={{ borderColor: 'var(--color-border-default)' }}
                 />
               </div>
 
@@ -309,7 +309,7 @@ export function ConcludeSessionModal({
               {/* Generated summary */}
               <div
                 className="rounded-xl border p-5 bg-card"
-                style={{ borderColor: 'var(--glass-border)' }}
+                style={{ borderColor: 'var(--color-border-default)' }}
               >
                 <div className="flex items-center justify-between mb-3">
                   <span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground flex items-center gap-1.5">
@@ -328,7 +328,7 @@ export function ConcludeSessionModal({
         {/* Footer actions */}
         <div
           className="px-6 py-4 border-t shrink-0 flex items-center justify-between gap-3"
-          style={{ borderColor: 'var(--glass-border)' }}
+          style={{ borderColor: 'var(--color-border-default)' }}
         >
           {step === 'select-outcome' && (
             <>
diff --git a/frontend/src/components/common/BrandLogo.tsx b/frontend/src/components/common/BrandLogo.tsx
index 3a7ea20a..52ab9552 100644
--- a/frontend/src/components/common/BrandLogo.tsx
+++ b/frontend/src/components/common/BrandLogo.tsx
@@ -6,7 +6,7 @@ interface BrandLogoProps {
 }
 
 /**
- * Brand logo mark: gradient cyan square with rounded corners
+ * Brand logo mark: gradient orange square with rounded corners
  * containing a white lightning bolt.
  */
 export function BrandLogo({ size = 'sm', className }: BrandLogoProps) {
diff --git a/frontend/src/components/common/RichTextInput.tsx b/frontend/src/components/common/RichTextInput.tsx
index 914726cd..5c390ff9 100644
--- a/frontend/src/components/common/RichTextInput.tsx
+++ b/frontend/src/components/common/RichTextInput.tsx
@@ -234,7 +234,7 @@ export function RichTextInput({
         disabled={disabled}
         className={cn(
           'w-full bg-card border border-border rounded-xl p-3 text-sm text-foreground placeholder:text-muted-foreground',
-          'focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none transition-colors',
+          'focus:border-[rgba(249,115,22,0.3)] focus:outline-none resize-none transition-colors',
           isDragOver && 'border-primary/50 bg-primary/5',
           disabled && 'opacity-50 cursor-not-allowed'
         )}
diff --git a/frontend/src/components/copilot/CopilotPanel.tsx b/frontend/src/components/copilot/CopilotPanel.tsx
index a70164b1..57236d16 100644
--- a/frontend/src/components/copilot/CopilotPanel.tsx
+++ b/frontend/src/components/copilot/CopilotPanel.tsx
@@ -96,13 +96,13 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
         background: 'rgba(16, 17, 20, 0.95)',
         backdropFilter: 'var(--glass-blur)',
         WebkitBackdropFilter: 'var(--glass-blur)',
-        borderColor: 'var(--glass-border)',
+        borderColor: 'var(--color-border-default)',
       }}
     >
       {/* Header */}
       <div
         className="flex items-center justify-between px-4 py-3 border-b shrink-0"
-        style={{ borderColor: 'var(--glass-border)' }}
+        style={{ borderColor: 'var(--color-border-default)' }}
       >
         <div className="flex items-center gap-2">
           <Sparkles size={16} className="text-primary" />
@@ -155,7 +155,7 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
       </div>
 
       {/* Input */}
-      <div className="px-4 py-3 border-t shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
+      <div className="px-4 py-3 border-t shrink-0" style={{ borderColor: 'var(--color-border-default)' }}>
         <div className="flex items-end gap-2">
           <textarea
             ref={inputRef}
@@ -165,7 +165,7 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
             placeholder="Ask about this step..."
             rows={1}
             className="flex-1 resize-none rounded-xl border bg-card text-foreground text-[0.8125rem] placeholder:text-muted-foreground px-3.5 py-2.5 focus:outline-hidden focus:border-primary/30"
-            style={{ borderColor: 'var(--glass-border)' }}
+            style={{ borderColor: 'var(--color-border-default)' }}
             disabled={loading || initializing}
           />
           <button
diff --git a/frontend/src/components/dashboard/KnowledgeBaseCards.tsx b/frontend/src/components/dashboard/KnowledgeBaseCards.tsx
index 33526f34..93258740 100644
--- a/frontend/src/components/dashboard/KnowledgeBaseCards.tsx
+++ b/frontend/src/components/dashboard/KnowledgeBaseCards.tsx
@@ -23,7 +23,7 @@ export function KnowledgeBaseCards() {
     <div className="card-flat">
       <div
         className="flex items-center justify-between px-5 py-3"
-        style={{ borderBottom: '1px solid var(--glass-border)' }}
+        style={{ borderBottom: '1px solid var(--color-border-default)' }}
       >
         <h3 className="font-heading text-sm font-bold text-foreground">Knowledge Base</h3>
         <button
@@ -33,7 +33,7 @@ export function KnowledgeBaseCards() {
           Browse <ArrowRight size={10} />
         </button>
       </div>
-      <div className="grid grid-cols-3 divide-x" style={{ borderColor: 'var(--glass-border)' }}>
+      <div className="grid grid-cols-3 divide-x" style={{ borderColor: 'var(--color-border-default)' }}>
         {items.map((item) => (
           <button
             key={item.label}
diff --git a/frontend/src/components/dashboard/OpenSessions.tsx b/frontend/src/components/dashboard/OpenSessions.tsx
index df74d633..9b1ff394 100644
--- a/frontend/src/components/dashboard/OpenSessions.tsx
+++ b/frontend/src/components/dashboard/OpenSessions.tsx
@@ -18,7 +18,7 @@ interface OpenSessionsProps {
 export function OpenSessions({ sessions }: OpenSessionsProps) {
   return (
     <div className="card-flat flex flex-col h-full">
-      <div className="flex items-center justify-between px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
+      <div className="flex items-center justify-between px-5 py-3" style={{ borderBottom: '1px solid var(--color-border-default)' }}>
         <h3 className="font-heading text-sm font-bold text-foreground">My Open Sessions</h3>
         <Link to="/sessions" className="text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors">
           View All
@@ -35,7 +35,7 @@ export function OpenSessions({ sessions }: OpenSessionsProps) {
               key={session.id}
               className="flex items-center gap-3 px-5 py-3"
               style={{
-                borderBottom: i < sessions.length - 1 ? '1px solid var(--glass-border)' : undefined,
+                borderBottom: i < sessions.length - 1 ? '1px solid var(--color-border-default)' : undefined,
               }}
             >
               <span className="h-2 w-2 shrink-0 rounded-full bg-amber-400" />
diff --git a/frontend/src/components/dashboard/PendingEscalations.tsx b/frontend/src/components/dashboard/PendingEscalations.tsx
index 1d405c3c..2d36a561 100644
--- a/frontend/src/components/dashboard/PendingEscalations.tsx
+++ b/frontend/src/components/dashboard/PendingEscalations.tsx
@@ -33,7 +33,7 @@ export function PendingEscalations() {
     >
       <div
         className="flex items-center justify-between px-5 py-3"
-        style={{ borderBottom: '1px solid var(--glass-border)' }}
+        style={{ borderBottom: '1px solid var(--color-border-default)' }}
       >
         <div className="flex items-center gap-2">
           <AlertTriangle size={14} className="text-amber-400" />
@@ -58,7 +58,7 @@ export function PendingEscalations() {
             className="flex items-center gap-3 px-5 py-3"
             style={{
               borderBottom: i < Math.min(escalations.length, 3) - 1
-                ? '1px solid var(--glass-border)'
+                ? '1px solid var(--color-border-default)'
                 : undefined,
             }}
           >
diff --git a/frontend/src/components/dashboard/QuickActions.tsx b/frontend/src/components/dashboard/QuickActions.tsx
index c784fe19..a9e96588 100644
--- a/frontend/src/components/dashboard/QuickActions.tsx
+++ b/frontend/src/components/dashboard/QuickActions.tsx
@@ -13,7 +13,7 @@ export function QuickActions() {
 
   return (
     <div className="card-flat flex flex-col h-full">
-      <div className="px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
+      <div className="px-5 py-3" style={{ borderBottom: '1px solid var(--color-border-default)' }}>
         <h3 className="font-heading text-sm font-bold text-foreground">Quick Actions</h3>
       </div>
       <div className="flex-1 flex flex-col justify-between p-3 gap-2">
diff --git a/frontend/src/components/dashboard/RecentActivity.tsx b/frontend/src/components/dashboard/RecentActivity.tsx
index b0f748e2..35f392a5 100644
--- a/frontend/src/components/dashboard/RecentActivity.tsx
+++ b/frontend/src/components/dashboard/RecentActivity.tsx
@@ -25,7 +25,7 @@ const DEFAULT_ACTIVITIES: ActivityItem[] = [
 export function RecentActivity({ activities = DEFAULT_ACTIVITIES }: RecentActivityProps) {
   return (
     <div className="card-flat">
-      <div className="px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
+      <div className="px-5 py-3" style={{ borderBottom: '1px solid var(--color-border-default)' }}>
         <h3 className="font-heading text-sm font-bold text-foreground">Recent Activity</h3>
       </div>
       <div>
@@ -35,7 +35,7 @@ export function RecentActivity({ activities = DEFAULT_ACTIVITIES }: RecentActivi
             className="flex items-start gap-3 px-5 py-3 fade-in"
             style={{
               animationDelay: `${750 + i * 40}ms`,
-              borderBottom: i < activities.length - 1 ? '1px solid var(--glass-border)' : undefined,
+              borderBottom: i < activities.length - 1 ? '1px solid var(--color-border-default)' : undefined,
             }}
           >
             <span
diff --git a/frontend/src/components/dashboard/SessionsPanel.tsx b/frontend/src/components/dashboard/SessionsPanel.tsx
index c71437fb..a4556e31 100644
--- a/frontend/src/components/dashboard/SessionsPanel.tsx
+++ b/frontend/src/components/dashboard/SessionsPanel.tsx
@@ -22,7 +22,7 @@ export function SessionsPanel({ sessions, delay = 200 }: SessionsPanelProps) {
 
   return (
     <div className="card-flat fade-in" style={{ animationDelay: `${delay}ms` }}>
-      <div className="flex items-center justify-between px-4 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
+      <div className="flex items-center justify-between px-4 py-3" style={{ borderBottom: '1px solid var(--color-border-default)' }}>
         <h3 className="font-heading text-sm font-semibold text-foreground">Recent Sessions</h3>
         <Link to="/sessions" className="text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors">
           View All
diff --git a/frontend/src/components/dashboard/StartSessionInput.tsx b/frontend/src/components/dashboard/StartSessionInput.tsx
index c306073d..a7b1f752 100644
--- a/frontend/src/components/dashboard/StartSessionInput.tsx
+++ b/frontend/src/components/dashboard/StartSessionInput.tsx
@@ -199,7 +199,7 @@ export function StartSessionInput() {
       <div className={cn(
         'relative rounded-2xl border bg-card transition-all',
         isDragOver ? 'border-primary/50 bg-primary/5' : 'border-border',
-        'focus-within:border-[rgba(6,182,212,0.3)] focus-within:ring-1 focus-within:ring-primary/20'
+        'focus-within:border-[rgba(249,115,22,0.3)] focus-within:ring-1 focus-within:ring-primary/20'
       )}>
         {/* Drag overlay */}
         {isDragOver && (
@@ -277,7 +277,7 @@ export function StartSessionInput() {
               onChange={(e) => setLogContent(e.target.value)}
               placeholder="Paste event viewer logs, error messages, PowerShell output..."
               rows={4}
-              className="w-full resize-none rounded-lg border border-border bg-background p-3 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none"
+              className="w-full resize-none rounded-lg border border-border bg-background p-3 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-[rgba(249,115,22,0.3)] focus:outline-none"
             />
           </div>
         )}
diff --git a/frontend/src/components/dashboard/TeamSummary.tsx b/frontend/src/components/dashboard/TeamSummary.tsx
index 235ffea0..bbfa7ccf 100644
--- a/frontend/src/components/dashboard/TeamSummary.tsx
+++ b/frontend/src/components/dashboard/TeamSummary.tsx
@@ -28,7 +28,7 @@ export function TeamSummary() {
     <div className="card-flat">
       <div
         className="flex items-center justify-between px-5 py-3"
-        style={{ borderBottom: '1px solid var(--glass-border)' }}
+        style={{ borderBottom: '1px solid var(--color-border-default)' }}
       >
         <h3 className="font-heading text-sm font-bold text-foreground">Team Summary</h3>
         <button
@@ -38,7 +38,7 @@ export function TeamSummary() {
           Manage <ArrowRight size={10} />
         </button>
       </div>
-      <div className="grid grid-cols-3 divide-x" style={{ borderColor: 'var(--glass-border)' }}>
+      <div className="grid grid-cols-3 divide-x" style={{ borderColor: 'var(--color-border-default)' }}>
         {items.map((item) => (
           <button
             key={item.label}
diff --git a/frontend/src/components/dashboard/WeeklyCalendar.tsx b/frontend/src/components/dashboard/WeeklyCalendar.tsx
index 63296e97..ba590e5a 100644
--- a/frontend/src/components/dashboard/WeeklyCalendar.tsx
+++ b/frontend/src/components/dashboard/WeeklyCalendar.tsx
@@ -35,7 +35,7 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
 
   return (
     <div className="card-flat flex flex-col h-full">
-      <div className="flex items-center gap-2 px-5 py-3" style={{ borderBottom: '1px solid var(--glass-border)' }}>
+      <div className="flex items-center gap-2 px-5 py-3" style={{ borderBottom: '1px solid var(--color-border-default)' }}>
         <Calendar size={16} className="text-muted-foreground" />
         <h3 className="font-heading text-sm font-bold text-foreground">This Week</h3>
       </div>
@@ -47,13 +47,13 @@ export function WeeklyCalendar({ events = {} }: WeeklyCalendarProps) {
               key={day.dateStr}
               className="flex-1 flex flex-col min-h-0"
               style={{
-                borderRight: i < 4 ? '1px solid var(--glass-border)' : undefined,
+                borderRight: i < 4 ? '1px solid var(--color-border-default)' : undefined,
               }}
             >
               <div
                 className="px-2 py-2 text-center"
                 style={{
-                  borderBottom: day.isToday ? '2px solid #ea580c' : '1px solid var(--glass-border)',
+                  borderBottom: day.isToday ? '2px solid #ea580c' : '1px solid var(--color-border-default)',
                 }}
               >
                 <span className={`font-sans text-xs text-[0.625rem] uppercase tracking-widest ${day.isToday ? 'text-orange-400' : 'text-muted-foreground'}`}>
diff --git a/frontend/src/components/editor-ai/ChatTab.tsx b/frontend/src/components/editor-ai/ChatTab.tsx
index e4ffed60..1fa99daf 100644
--- a/frontend/src/components/editor-ai/ChatTab.tsx
+++ b/frontend/src/components/editor-ai/ChatTab.tsx
@@ -68,7 +68,7 @@ export function ChatTab({ messages, input, onInputChange, onSend, isLoading }: C
       </div>
 
       {/* Input */}
-      <div className="px-4 py-3 border-t shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
+      <div className="px-4 py-3 border-t shrink-0" style={{ borderColor: 'var(--color-border-default)' }}>
         <div className="flex items-end gap-2">
           <textarea
             ref={inputRef}
@@ -78,7 +78,7 @@ export function ChatTab({ messages, input, onInputChange, onSend, isLoading }: C
             placeholder="Ask AI to help..."
             rows={1}
             className="flex-1 resize-none rounded-xl border bg-card text-foreground text-[0.8125rem] placeholder:text-muted-foreground px-3.5 py-2.5 focus:outline-hidden focus:border-primary/30"
-            style={{ borderColor: 'var(--glass-border)' }}
+            style={{ borderColor: 'var(--color-border-default)' }}
             disabled={isLoading}
           />
           <button
diff --git a/frontend/src/components/editor-ai/EditorAIPanel.tsx b/frontend/src/components/editor-ai/EditorAIPanel.tsx
index 34c5df29..a3f5a345 100644
--- a/frontend/src/components/editor-ai/EditorAIPanel.tsx
+++ b/frontend/src/components/editor-ai/EditorAIPanel.tsx
@@ -50,14 +50,14 @@ export function EditorAIPanel({
         background: 'rgba(16, 17, 20, 0.95)',
         backdropFilter: 'var(--glass-blur)',
         WebkitBackdropFilter: 'var(--glass-blur)',
-        borderColor: 'var(--glass-border)',
+        borderColor: 'var(--color-border-default)',
         animation: 'slideInRight 200ms ease-out',
       }}
     >
       {/* Header */}
       <div
         className="flex items-center justify-between px-4 py-3 border-b shrink-0"
-        style={{ borderColor: 'var(--glass-border)' }}
+        style={{ borderColor: 'var(--color-border-default)' }}
       >
         <div className="flex items-center gap-2">
           <Sparkles size={16} className="text-primary" />
@@ -74,7 +74,7 @@ export function EditorAIPanel({
       <NodeSummary node={focalNode} flowName={flowName} flowType={flowType} nodeCount={nodeCount} />
 
       {/* Tabs */}
-      <div className="flex border-b shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
+      <div className="flex border-b shrink-0" style={{ borderColor: 'var(--color-border-default)' }}>
         <button
           onClick={() => setActiveTab('chat')}
           className={cn(
diff --git a/frontend/src/components/editor-ai/NodeSummary.tsx b/frontend/src/components/editor-ai/NodeSummary.tsx
index b506fa29..54256d8f 100644
--- a/frontend/src/components/editor-ai/NodeSummary.tsx
+++ b/frontend/src/components/editor-ai/NodeSummary.tsx
@@ -22,7 +22,7 @@ const NODE_COLORS: Record<string, string> = {
 export function NodeSummary({ node, flowName, flowType, nodeCount }: NodeSummaryProps) {
   if (!node) {
     return (
-      <div className="border-b px-3 py-2.5" style={{ borderColor: 'var(--glass-border)' }}>
+      <div className="border-b px-3 py-2.5" style={{ borderColor: 'var(--color-border-default)' }}>
         <div className="flex items-center gap-2">
           <Layout className="h-3.5 w-3.5 text-muted-foreground" />
           <span className="text-xs font-medium text-foreground truncate">
@@ -41,7 +41,7 @@ export function NodeSummary({ node, flowName, flowType, nodeCount }: NodeSummary
   const colorClass = NODE_COLORS[node.type] || 'text-muted-foreground'
 
   return (
-    <div className="border-b px-3 py-2.5" style={{ borderColor: 'var(--glass-border)' }}>
+    <div className="border-b px-3 py-2.5" style={{ borderColor: 'var(--color-border-default)' }}>
       <div className="flex items-center gap-2">
         <Icon className={`h-3.5 w-3.5 ${colorClass}`} />
         <span className="font-sans text-[0.625rem] uppercase tracking-widest text-muted-foreground">
diff --git a/frontend/src/components/flowpilot/FlowPilotIntake.tsx b/frontend/src/components/flowpilot/FlowPilotIntake.tsx
index c52ee8f2..4b80ea3c 100644
--- a/frontend/src/components/flowpilot/FlowPilotIntake.tsx
+++ b/frontend/src/components/flowpilot/FlowPilotIntake.tsx
@@ -166,7 +166,7 @@ export function FlowPilotIntake({ onSubmit, isLoading, defaultProblem }: FlowPil
                 value={additionalContext}
                 onChange={(e) => setAdditionalContext(e.target.value)}
                 placeholder="Add extra context (optional) — e.g. 'User called back and said it's also affecting their second monitor'"
-                className="mt-3 w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none"
+                className="mt-3 w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(249,115,22,0.3)] focus:outline-none resize-none"
                 rows={3}
               />
             </div>
@@ -229,7 +229,7 @@ export function FlowPilotIntake({ onSubmit, isLoading, defaultProblem }: FlowPil
               value={logContent}
               onChange={(e) => setLogContent(e.target.value)}
               placeholder="Paste log output, error messages, or Event Viewer entries here..."
-              className="w-full rounded-lg border border-border bg-card px-4 py-3 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none"
+              className="w-full rounded-lg border border-border bg-card px-4 py-3 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-[rgba(249,115,22,0.3)] focus:outline-none resize-none"
               rows={6}
             />
           )}
diff --git a/frontend/src/components/flowpilot/FlowPilotMessageBar.tsx b/frontend/src/components/flowpilot/FlowPilotMessageBar.tsx
index 4532a3b4..9654684e 100644
--- a/frontend/src/components/flowpilot/FlowPilotMessageBar.tsx
+++ b/frontend/src/components/flowpilot/FlowPilotMessageBar.tsx
@@ -194,7 +194,7 @@ export function FlowPilotMessageBar({ onRespond, disabled = false, isProcessing
             ? 'border-border/50 opacity-50'
             : isDragOver
               ? 'border-primary/50 bg-primary/5'
-              : 'border-border focus-within:border-[rgba(6,182,212,0.3)] focus-within:ring-1 focus-within:ring-primary/20'
+              : 'border-border focus-within:border-[rgba(249,115,22,0.3)] focus-within:ring-1 focus-within:ring-primary/20'
         )}
         style={{ background: 'var(--color-bg-card)' }}
       >
@@ -275,7 +275,7 @@ export function FlowPilotMessageBar({ onRespond, disabled = false, isProcessing
               onChange={(e) => setLogContent(e.target.value)}
               placeholder="Paste event viewer logs, error messages, PowerShell output..."
               rows={3}
-              className="w-full resize-none rounded-lg border border-border bg-background p-2 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none"
+              className="w-full resize-none rounded-lg border border-border bg-background p-2 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-[rgba(249,115,22,0.3)] focus:outline-none"
             />
           </div>
         )}
diff --git a/frontend/src/components/flowpilot/FlowPilotOptions.tsx b/frontend/src/components/flowpilot/FlowPilotOptions.tsx
index e26639d5..fac0e046 100644
--- a/frontend/src/components/flowpilot/FlowPilotOptions.tsx
+++ b/frontend/src/components/flowpilot/FlowPilotOptions.tsx
@@ -29,7 +29,7 @@ export function FlowPilotOptions({ options, onSelect, disabled }: FlowPilotOptio
             disabled={disabled}
             className={cn(
               'group relative rounded-xl border p-3 sm:p-4 text-left transition-all min-h-[44px]',
-              'hover:border-[rgba(6,182,212,0.3)] hover:shadow-[0_0_20px_rgba(6,182,212,0.08)]',
+              'hover:border-[rgba(249,115,22,0.3)] hover:shadow-[0_0_20px_rgba(249,115,22,0.08)]',
               'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40',
               isSelected
                 ? 'border-primary/40 bg-accent-dim'
diff --git a/frontend/src/components/flowpilot/InSessionScriptGenerator.tsx b/frontend/src/components/flowpilot/InSessionScriptGenerator.tsx
index 196f869a..678fa6ac 100644
--- a/frontend/src/components/flowpilot/InSessionScriptGenerator.tsx
+++ b/frontend/src/components/flowpilot/InSessionScriptGenerator.tsx
@@ -96,7 +96,7 @@ export function InSessionScriptGenerator({
                   <input
                     value={value}
                     onChange={(e) => setParams(prev => ({ ...prev, [key]: e.target.value }))}
-                    className="w-full rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none"
+                    className="w-full rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(249,115,22,0.3)] focus:outline-none"
                   />
                 </div>
               ))}
diff --git a/frontend/src/components/flowpilot/ProposalDetail.tsx b/frontend/src/components/flowpilot/ProposalDetail.tsx
index 0bb9c606..69d700ca 100644
--- a/frontend/src/components/flowpilot/ProposalDetail.tsx
+++ b/frontend/src/components/flowpilot/ProposalDetail.tsx
@@ -60,7 +60,7 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
   return (
     <div className="flex h-full flex-col">
       {/* Header */}
-      <div className="border-b px-6 py-4" style={{ borderColor: 'var(--glass-border)' }}>
+      <div className="border-b px-6 py-4" style={{ borderColor: 'var(--color-border-default)' }}>
         <h2 className="font-heading text-lg font-semibold text-foreground">{proposal.title}</h2>
         {proposal.description && (
           <p className="mt-1 text-sm text-muted-foreground">{proposal.description}</p>
@@ -187,7 +187,7 @@ export function ProposalDetail({ proposal, onReview }: ProposalDetailProps) {
             value={reviewNotes}
             onChange={(e) => setReviewNotes(e.target.value)}
             placeholder="Reviewer notes (optional)"
-            className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none"
+            className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(249,115,22,0.3)] focus:outline-none"
           />
 
           {/* Action buttons */}
diff --git a/frontend/src/components/flowpilot/SessionBriefing.tsx b/frontend/src/components/flowpilot/SessionBriefing.tsx
index 9f4eb662..e6b60fe4 100644
--- a/frontend/src/components/flowpilot/SessionBriefing.tsx
+++ b/frontend/src/components/flowpilot/SessionBriefing.tsx
@@ -145,7 +145,7 @@ export function SessionBriefing({
             value={freshContext}
             onChange={(e) => setFreshContext(e.target.value)}
             placeholder="What additional information do you have, or what would you like to investigate first?"
-            className="w-full rounded-lg border border-border bg-card px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none"
+            className="w-full rounded-lg border border-border bg-card px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(249,115,22,0.3)] focus:outline-none resize-none"
             rows={3}
             autoFocus
           />
diff --git a/frontend/src/components/kb-accelerator/ReviewScreen.tsx b/frontend/src/components/kb-accelerator/ReviewScreen.tsx
index 28041651..aad09f38 100644
--- a/frontend/src/components/kb-accelerator/ReviewScreen.tsx
+++ b/frontend/src/components/kb-accelerator/ReviewScreen.tsx
@@ -89,7 +89,7 @@ export function ReviewScreen({ kbImport, onEditNode, onApproveAll, onCommit, onD
 
         {/* Nodes panel */}
         <div className="flex flex-col card-flat overflow-hidden">
-          <div className="flex items-center gap-2 px-4 py-3 border-b" style={{ borderColor: 'var(--glass-border)' }}>
+          <div className="flex items-center gap-2 px-4 py-3 border-b" style={{ borderColor: 'var(--color-border-default)' }}>
             <span className="text-sm font-medium text-foreground">Generated Flow</span>
             <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground ml-auto">
               {kbImport.target_type === 'troubleshooting' ? 'Troubleshooting' : 'Project'}
diff --git a/frontend/src/components/kb-accelerator/SourcePanel.tsx b/frontend/src/components/kb-accelerator/SourcePanel.tsx
index d46a0c38..cd8dc861 100644
--- a/frontend/src/components/kb-accelerator/SourcePanel.tsx
+++ b/frontend/src/components/kb-accelerator/SourcePanel.tsx
@@ -25,7 +25,7 @@ export function SourcePanel({ sourceText, sourceFormat, highlightExcerpt }: Sour
 
   return (
     <div className="card-flat flex flex-col h-full">
-      <div className="flex items-center gap-2 px-4 py-3 border-b" style={{ borderColor: 'var(--glass-border)' }}>
+      <div className="flex items-center gap-2 px-4 py-3 border-b" style={{ borderColor: 'var(--color-border-default)' }}>
         <FileText size={16} className="text-muted-foreground" />
         <span className="text-sm font-medium text-foreground">Source Document</span>
         <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground ml-auto">
diff --git a/frontend/src/components/script-builder/ScriptBuilderInput.tsx b/frontend/src/components/script-builder/ScriptBuilderInput.tsx
index 0a1cdb19..d98973ec 100644
--- a/frontend/src/components/script-builder/ScriptBuilderInput.tsx
+++ b/frontend/src/components/script-builder/ScriptBuilderInput.tsx
@@ -44,7 +44,7 @@ export function ScriptBuilderInput({
   const canSend = value.trim().length > 0 && !disabled
 
   return (
-    <div className="flex items-end gap-2 p-3 border-t" style={{ borderColor: 'var(--glass-border)' }}>
+    <div className="flex items-end gap-2 p-3 border-t" style={{ borderColor: 'var(--color-border-default)' }}>
       <textarea
         ref={textareaRef}
         value={value}
@@ -56,7 +56,7 @@ export function ScriptBuilderInput({
         className={cn(
           "flex-1 resize-none rounded-xl px-4 py-2.5 text-sm",
           "bg-card border border-border text-foreground placeholder:text-muted-foreground",
-          "focus:outline-none focus:border-[rgba(6,182,212,0.3)] transition-colors",
+          "focus:outline-none focus:border-[rgba(249,115,22,0.3)] transition-colors",
           "disabled:opacity-50"
         )}
         style={{ maxHeight: 120 }}
diff --git a/frontend/src/components/script-editor/ParameterCard.tsx b/frontend/src/components/script-editor/ParameterCard.tsx
index 979c5a7e..97ebd5f0 100644
--- a/frontend/src/components/script-editor/ParameterCard.tsx
+++ b/frontend/src/components/script-editor/ParameterCard.tsx
@@ -104,7 +104,7 @@ export function ParameterCard({
                 value={param.type}
                 onChange={e => update({ type: e.target.value as ScriptParameter['type'] })}
                 disabled={disabled}
-                className="w-full rounded-lg border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
+                className="w-full rounded-lg border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(249,115,22,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
               >
                 {PARAM_TYPES.map(t => (
                   <option key={t.value} value={t.value}>{t.label}</option>
diff --git a/frontend/src/components/script-editor/ParameterDetectorStepper.tsx b/frontend/src/components/script-editor/ParameterDetectorStepper.tsx
index ee472a80..186471af 100644
--- a/frontend/src/components/script-editor/ParameterDetectorStepper.tsx
+++ b/frontend/src/components/script-editor/ParameterDetectorStepper.tsx
@@ -174,7 +174,7 @@ export function ParameterDetectorStepper({
           <select
             value={type}
             onChange={e => setType(e.target.value as ScriptParameter['type'])}
-            className="w-full rounded-lg border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
+            className="w-full rounded-lg border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(249,115,22,0.3)]"
           >
             {PARAM_TYPES.map(t => (
               <option key={t.value} value={t.value}>{t.label}</option>
diff --git a/frontend/src/components/script-editor/ParameterSchemaBuilder.tsx b/frontend/src/components/script-editor/ParameterSchemaBuilder.tsx
index 45151cd8..bb2d9bd2 100644
--- a/frontend/src/components/script-editor/ParameterSchemaBuilder.tsx
+++ b/frontend/src/components/script-editor/ParameterSchemaBuilder.tsx
@@ -159,7 +159,7 @@ export function ParameterSchemaBuilder({ schema, onChange, disabled }: Props) {
             onChange={e => { setJsonText(e.target.value); setJsonError(null) }}
             disabled={disabled}
             spellCheck={false}
-            className="w-full min-h-[300px] resize-y font-sans text-xs text-sm bg-card border border-border rounded-xl p-4 text-foreground focus:outline-none focus:border-[rgba(6,182,212,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
+            className="w-full min-h-[300px] resize-y font-sans text-xs text-sm bg-card border border-border rounded-xl p-4 text-foreground focus:outline-none focus:border-[rgba(249,115,22,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
             placeholder='{ "parameters": [...] }'
           />
           {jsonError && (
diff --git a/frontend/src/components/script-editor/ScriptTemplateEditor.tsx b/frontend/src/components/script-editor/ScriptTemplateEditor.tsx
index f0818f33..0b3a8671 100644
--- a/frontend/src/components/script-editor/ScriptTemplateEditor.tsx
+++ b/frontend/src/components/script-editor/ScriptTemplateEditor.tsx
@@ -356,7 +356,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
             <select
               value={form.category_id}
               onChange={e => updateField('category_id', e.target.value)}
-              className="w-full rounded-lg border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
+              className="w-full rounded-lg border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(249,115,22,0.3)]"
             >
               <option value="">Select category…</option>
               {categories.map(c => (
@@ -369,7 +369,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
             <select
               value={form.complexity}
               onChange={e => updateField('complexity', e.target.value as FormState['complexity'])}
-              className="w-full rounded-lg border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
+              className="w-full rounded-lg border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(249,115,22,0.3)]"
             >
               <option value="beginner">Beginner</option>
               <option value="intermediate">Intermediate</option>
diff --git a/frontend/src/components/script-editor/ScriptTemplateListView.tsx b/frontend/src/components/script-editor/ScriptTemplateListView.tsx
index c195e6ef..bbef2e30 100644
--- a/frontend/src/components/script-editor/ScriptTemplateListView.tsx
+++ b/frontend/src/components/script-editor/ScriptTemplateListView.tsx
@@ -105,7 +105,7 @@ export function ScriptTemplateListView({ onEdit, onCreate }: Props) {
           value={searchQuery}
           onChange={e => setSearchQuery(e.target.value)}
           placeholder="Search templates…"
-          className="w-full pl-8 pr-3 py-1.5 text-sm rounded-md border border-border bg-card text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-[rgba(6,182,212,0.3)] focus:ring-1 focus:ring-[rgba(6,182,212,0.2)]"
+          className="w-full pl-8 pr-3 py-1.5 text-sm rounded-md border border-border bg-card text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-[rgba(249,115,22,0.3)] focus:ring-1 focus:ring-[rgba(249,115,22,0.2)]"
         />
       </div>
 
diff --git a/frontend/src/components/scripts/ScriptParameterField.tsx b/frontend/src/components/scripts/ScriptParameterField.tsx
index 344497a4..d80c46db 100644
--- a/frontend/src/components/scripts/ScriptParameterField.tsx
+++ b/frontend/src/components/scripts/ScriptParameterField.tsx
@@ -93,7 +93,7 @@ export function ScriptParameterField({ param, value, error, disabled }: Props) {
         value={value}
         onChange={handleChange}
         disabled={disabled}
-        className="w-full rounded-[10px] border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
+        className="w-full rounded-[10px] border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(249,115,22,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
       >
         <option value="">Select…</option>
         {(param.options ?? []).map(opt => (
diff --git a/frontend/src/components/session/AddSupportingDataModal.tsx b/frontend/src/components/session/AddSupportingDataModal.tsx
index 23a85883..1bed41b4 100644
--- a/frontend/src/components/session/AddSupportingDataModal.tsx
+++ b/frontend/src/components/session/AddSupportingDataModal.tsx
@@ -166,7 +166,7 @@ export function AddSupportingDataModal({ isOpen, onClose, sessionId, onAdded }:
           className={cn(
             'w-full rounded-md border border-border bg-card px-3 py-2 text-sm',
             'text-foreground placeholder:text-muted-foreground',
-            'focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20'
+            'focus:border-[rgba(249,115,22,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20'
           )}
         />
       </div>
@@ -186,7 +186,7 @@ export function AddSupportingDataModal({ isOpen, onClose, sessionId, onAdded }:
             className={cn(
               'w-full resize-y rounded-md border border-border bg-card px-3 py-2 text-sm',
               'font-mono text-foreground placeholder:text-muted-foreground',
-              'focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20'
+              'focus:border-[rgba(249,115,22,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20'
             )}
           />
         </div>
diff --git a/frontend/src/components/settings/BrandingSettings.tsx b/frontend/src/components/settings/BrandingSettings.tsx
index 47b1dcec..1bcba1d6 100644
--- a/frontend/src/components/settings/BrandingSettings.tsx
+++ b/frontend/src/components/settings/BrandingSettings.tsx
@@ -154,7 +154,7 @@ export function BrandingSettings({ teamId }: BrandingSettingsProps) {
             className={cn(
               'mt-2 w-full max-w-md rounded-md border border-border bg-card px-3 py-2 text-sm',
               'text-foreground placeholder:text-muted-foreground',
-              'focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20'
+              'focus:border-[rgba(249,115,22,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20'
             )}
           />
         </div>
diff --git a/frontend/src/components/sidebar/ActivityItem.tsx b/frontend/src/components/sidebar/ActivityItem.tsx
index 36661081..76560cd6 100644
--- a/frontend/src/components/sidebar/ActivityItem.tsx
+++ b/frontend/src/components/sidebar/ActivityItem.tsx
@@ -49,7 +49,7 @@ export function ActivityItem({
       className={cn(
         'flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left transition-colors',
         'hover:bg-[rgba(255,255,255,0.03)]',
-        isRecent ? 'text-text-rail-label text-[0.72rem]' : 'text-[#e2e8f0] text-[0.8rem]'
+        isRecent ? 'text-text-rail-label text-[0.72rem]' : 'text-text-primary text-[0.8rem]'
       )}
       title={`${treeName}${ticketNumber ? ` (${ticketNumber})` : ''} — click to resume`}
       aria-label={
diff --git a/frontend/src/components/tree-editor/GlowEdge.tsx b/frontend/src/components/tree-editor/GlowEdge.tsx
index 27f37863..154c10ad 100644
--- a/frontend/src/components/tree-editor/GlowEdge.tsx
+++ b/frontend/src/components/tree-editor/GlowEdge.tsx
@@ -52,7 +52,7 @@ export function GlowEdgeDefs() {
           <stop offset="100%" stopColor="rgba(255,255,255,0.08)" />
         </linearGradient>
 
-        {/* Downstream: cyan brand */}
+        {/* Downstream: accent brand */}
         <linearGradient id="edge-gradient-downstream" x1="0%" y1="0%" x2="0%" y2="100%">
           <stop offset="0%" stopColor="#ea580c" />
           <stop offset="100%" stopColor="#f97316" />
@@ -72,7 +72,7 @@ export function GlowEdgeDefs() {
             <feMergeNode in="SourceGraphic" />
           </feMerge>
         </filter>
-        <filter id="glow-cyan" x="-30%" y="-30%" width="160%" height="160%">
+        <filter id="glow-accent" x="-30%" y="-30%" width="160%" height="160%">
           <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
           <feMerge>
             <feMergeNode in="blur" />
@@ -120,7 +120,7 @@ function GlowEdgeComponent({
 
   const filterId = edgeState === 'default' ? 'glow-default'
     : edgeState === 'upstream' ? 'glow-amber'
-    : 'glow-cyan'
+    : 'glow-accent'
 
   return (
     <>
diff --git a/frontend/src/constants/categoryColors.ts b/frontend/src/constants/categoryColors.ts
index 3a72ea8f..db181e09 100644
--- a/frontend/src/constants/categoryColors.ts
+++ b/frontend/src/constants/categoryColors.ts
@@ -4,7 +4,7 @@ export const CATEGORY_COLORS = [
   '#f59e0b', // amber
   '#ef4444', // red
   '#8b5cf6', // violet
-  '#ea580c', // cyan
+  '#ea580c', // deep orange
   '#ec4899', // pink
   '#f97316', // orange
   '#14b8a6', // teal
diff --git a/frontend/src/pages/AssistantChatPage.tsx b/frontend/src/pages/AssistantChatPage.tsx
index c8de1740..bdef1eec 100644
--- a/frontend/src/pages/AssistantChatPage.tsx
+++ b/frontend/src/pages/AssistantChatPage.tsx
@@ -593,7 +593,7 @@ export default function AssistantChatPage() {
                   'relative rounded-xl border transition-all',
                   loading ? 'border-border/50 opacity-50' :
                   isDragOver ? 'border-primary/50 bg-primary/5' :
-                  'border-border focus-within:border-[rgba(6,182,212,0.3)] focus-within:ring-1 focus-within:ring-primary/20'
+                  'border-border focus-within:border-[rgba(249,115,22,0.3)] focus-within:ring-1 focus-within:ring-primary/20'
                 )} style={{ background: 'var(--color-bg-card)' }}>
                   {/* Drag overlay */}
                   {isDragOver && (
@@ -663,7 +663,7 @@ export default function AssistantChatPage() {
                         onChange={(e) => setLogContent(e.target.value)}
                         placeholder="Paste event viewer logs, error messages, PowerShell output..."
                         rows={3}
-                        className="w-full resize-none rounded-lg border border-border bg-background p-2 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none"
+                        className="w-full resize-none rounded-lg border border-border bg-background p-2 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:border-[rgba(249,115,22,0.3)] focus:outline-none"
                       />
                     </div>
                   )}
diff --git a/frontend/src/pages/FlowPilotAnalyticsPage.tsx b/frontend/src/pages/FlowPilotAnalyticsPage.tsx
index a4ecb08f..ca51ec08 100644
--- a/frontend/src/pages/FlowPilotAnalyticsPage.tsx
+++ b/frontend/src/pages/FlowPilotAnalyticsPage.tsx
@@ -256,16 +256,16 @@ export default function FlowPilotAnalyticsPage() {
                     <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
                     <XAxis
                       dataKey="date"
-                      tick={{ fill: '#8891a0', fontSize: 10 }}
+                      tick={{ fill: '#848b9b', fontSize: 10 }}
                       tickFormatter={(d) => new Date(d).toLocaleDateString([], { month: 'short', day: 'numeric' })}
                     />
                     <YAxis
-                      tick={{ fill: '#8891a0', fontSize: 10 }}
+                      tick={{ fill: '#848b9b', fontSize: 10 }}
                       tickFormatter={(v) => `${Math.round(v)}m`}
                     />
                     <Tooltip
-                      contentStyle={{ background: '#18191f', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 8, fontSize: 12 }}
-                      labelStyle={{ color: '#f8fafc' }}
+                      contentStyle={{ background: 'var(--color-bg-card)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 8, fontSize: 12 }}
+                      labelStyle={{ color: '#f0f2f5' }}
                       formatter={(v: number | undefined) => [`${Math.round(v ?? 0)}m`, 'MTTR']}
                     />
                     <Area
@@ -299,16 +299,16 @@ export default function FlowPilotAnalyticsPage() {
                 <ResponsiveContainer width="100%" height={220}>
                   <BarChart data={dashboard.sessions_by_domain} layout="vertical">
                     <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
-                    <XAxis type="number" tick={{ fill: '#8891a0', fontSize: 10 }} />
+                    <XAxis type="number" tick={{ fill: '#848b9b', fontSize: 10 }} />
                     <YAxis
                       type="category"
                       dataKey="domain"
-                      tick={{ fill: '#8891a0', fontSize: 10 }}
+                      tick={{ fill: '#848b9b', fontSize: 10 }}
                       width={100}
                     />
                     <Tooltip
-                      contentStyle={{ background: '#18191f', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 8, fontSize: 12 }}
-                      labelStyle={{ color: '#f8fafc' }}
+                      contentStyle={{ background: 'var(--color-bg-card)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 8, fontSize: 12 }}
+                      labelStyle={{ color: '#f0f2f5' }}
                     />
                     <Bar dataKey="resolved" name="Resolved" fill="#34d399" radius={[0, 4, 4, 0]} />
                     <Bar dataKey="escalated" name="Escalated" fill="#eab308" radius={[0, 4, 4, 0]} />
diff --git a/frontend/src/pages/FlowPilotSessionPage.tsx b/frontend/src/pages/FlowPilotSessionPage.tsx
index a54496c9..f5b67de6 100644
--- a/frontend/src/pages/FlowPilotSessionPage.tsx
+++ b/frontend/src/pages/FlowPilotSessionPage.tsx
@@ -158,7 +158,7 @@ export default function FlowPilotSessionPage() {
         {/* Header */}
         <div
           className="flex items-center gap-3 border-b px-5 py-3 shrink-0"
-          style={{ borderColor: 'var(--glass-border)' }}
+          style={{ borderColor: 'var(--color-border-default)' }}
         >
           <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-amber-500/10">
             <Sparkles size={14} className="text-amber-400" />
diff --git a/frontend/src/pages/GuideDetailPage.tsx b/frontend/src/pages/GuideDetailPage.tsx
index 3dc0e873..b597354b 100644
--- a/frontend/src/pages/GuideDetailPage.tsx
+++ b/frontend/src/pages/GuideDetailPage.tsx
@@ -46,7 +46,7 @@ export default function GuideDetailPage() {
             <p className="text-sm text-muted-foreground">{guide.summary}</p>
           </div>
         </div>
-        <div className="flex items-center gap-4 mt-4 pt-4 border-t" style={{ borderColor: 'var(--glass-border)' }}>
+        <div className="flex items-center gap-4 mt-4 pt-4 border-t" style={{ borderColor: 'var(--color-border-default)' }}>
           <span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground">
             {guide.sections.length} {guide.sections.length === 1 ? 'section' : 'sections'}
           </span>
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index 1b014d1c..1a85b337 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -44,32 +44,6 @@ export function LoginPage() {
     <>
     <PageMeta title="Sign In" description="Sign in to your ResolutionFlow account" />
     <div className="flex min-h-screen items-center justify-center bg-background px-4">
-      {/* Atmosphere orbs */}
-      <div
-        className="pointer-events-none fixed z-0"
-        style={{
-          top: '-120px',
-          right: '-80px',
-          width: '600px',
-          height: '600px',
-          borderRadius: '50%',
-          background: 'radial-gradient(circle, rgba(6, 182, 212, 0.15) 0%, rgba(6, 182, 212, 0.04) 40%, transparent 70%)',
-          filter: 'blur(60px)',
-        }}
-      />
-      <div
-        className="pointer-events-none fixed z-0"
-        style={{
-          bottom: '-100px',
-          left: '-60px',
-          width: '500px',
-          height: '500px',
-          borderRadius: '50%',
-          background: 'radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, rgba(139, 92, 246, 0.02) 40%, transparent 70%)',
-          filter: 'blur(60px)',
-        }}
-      />
-
       <div className="relative z-10 w-full max-w-md space-y-8">
         <div className="text-center">
           <div className="mb-4 flex justify-center sm:mb-6">
diff --git a/frontend/src/pages/PublicTemplatesPage.tsx b/frontend/src/pages/PublicTemplatesPage.tsx
index 583ac663..e8989921 100644
--- a/frontend/src/pages/PublicTemplatesPage.tsx
+++ b/frontend/src/pages/PublicTemplatesPage.tsx
@@ -157,17 +157,11 @@ export default function PublicTemplatesPage() {
       />
 
       <div className="min-h-screen bg-background text-foreground">
-        {/* Ambient orbs */}
+        {/* Subtle ambient glow */}
         <div
           className="fixed top-[-20%] right-[-10%] w-[600px] h-[600px] rounded-full pointer-events-none"
           style={{
-            background: 'radial-gradient(circle, rgba(6,182,212,0.06) 0%, transparent 70%)',
-          }}
-        />
-        <div
-          className="fixed bottom-[-20%] left-[-10%] w-[600px] h-[600px] rounded-full pointer-events-none"
-          style={{
-            background: 'radial-gradient(circle, rgba(139,92,246,0.04) 0%, transparent 70%)',
+            background: 'radial-gradient(circle, rgba(249,115,22,0.05) 0%, transparent 70%)',
           }}
         />
 
@@ -217,7 +211,7 @@ export default function PublicTemplatesPage() {
                 placeholder="Search templates..."
                 value={searchQuery}
                 onChange={(e) => handleSearchChange(e.target.value)}
-                className="w-full pl-12 pr-4 py-3.5 rounded-2xl text-sm bg-card border border-border text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-[rgba(6,182,212,0.3)] transition-colors"
+                className="w-full pl-12 pr-4 py-3.5 rounded-2xl text-sm bg-card border border-border text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-[rgba(249,115,22,0.3)] transition-colors"
               />
             </div>
           </div>
diff --git a/frontend/src/pages/ReviewQueuePage.tsx b/frontend/src/pages/ReviewQueuePage.tsx
index 8bbb9901..319856e9 100644
--- a/frontend/src/pages/ReviewQueuePage.tsx
+++ b/frontend/src/pages/ReviewQueuePage.tsx
@@ -87,7 +87,7 @@ export default function ReviewQueuePage() {
   return (
     <div className="flex h-full flex-col lg:flex-row overflow-hidden">
       {/* Left panel — Proposal list */}
-      <div className="w-full shrink-0 border-b lg:border-b-0 lg:border-r lg:w-[380px] overflow-y-auto" style={{ borderColor: 'var(--glass-border)' }}>
+      <div className="w-full shrink-0 border-b lg:border-b-0 lg:border-r lg:w-[380px] overflow-y-auto" style={{ borderColor: 'var(--color-border-default)' }}>
         {/* Header */}
         <div className="sticky top-0 z-10 p-3 sm:p-4 space-y-3" style={{ background: 'rgba(16, 17, 20, 0.95)', }}>
           <div className="flex items-center justify-between">
diff --git a/frontend/src/pages/ScriptBuilderPage.tsx b/frontend/src/pages/ScriptBuilderPage.tsx
index 20fd2ff0..ccc48ded 100644
--- a/frontend/src/pages/ScriptBuilderPage.tsx
+++ b/frontend/src/pages/ScriptBuilderPage.tsx
@@ -124,7 +124,7 @@ export default function ScriptBuilderPage() {
   return (
     <div className="flex flex-col h-full min-h-0">
       {/* Header with language selector */}
-      <div className="shrink-0 px-6 py-4 border-b" style={{ borderColor: 'var(--glass-border)' }}>
+      <div className="shrink-0 px-6 py-4 border-b" style={{ borderColor: 'var(--color-border-default)' }}>
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
             <span className="flex items-center justify-center w-9 h-9 rounded-xl bg-[rgba(232,121,249,0.1)]">
diff --git a/frontend/src/pages/SurveyPage.tsx b/frontend/src/pages/SurveyPage.tsx
index e6fb4ac3..aea932d3 100644
--- a/frontend/src/pages/SurveyPage.tsx
+++ b/frontend/src/pages/SurveyPage.tsx
@@ -275,11 +275,11 @@ export default function SurveyPage() {
       <div className="min-h-screen bg-background text-foreground">
         <div className="pointer-events-none fixed inset-0 overflow-hidden" aria-hidden="true">
           <div className="absolute -top-32 right-0 h-[500px] w-[500px] rounded-full opacity-[0.03]" style={{ background: 'radial-gradient(circle, var(--color-primary), transparent 70%)' }} />
-          <div className="absolute -bottom-32 left-0 h-[400px] w-[400px] rounded-full opacity-[0.02]" style={{ background: 'radial-gradient(circle, #a855f7, transparent 70%)' }} />
+          <div className="absolute -bottom-32 left-0 h-[400px] w-[400px] rounded-full opacity-[0.02]" style={{ background: 'radial-gradient(circle, var(--color-accent), transparent 70%)' }} />
         </div>
         <div className="relative z-10 mx-auto max-w-[680px] px-4 sm:px-5">
           <div className="text-center pt-20 sm:pt-32 animate-fade-in-up">
-            <div className="w-16 h-16 mx-auto mb-5 rounded-full flex items-center justify-center" style={{ background: 'rgba(6, 182, 212, 0.1)' }}>
+            <div className="w-16 h-16 mx-auto mb-5 rounded-full flex items-center justify-center" style={{ background: 'rgba(249, 115, 22, 0.10)' }}>
               <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" strokeWidth="2.5"><path d="M20 6L9 17l-5-5"/></svg>
             </div>
             <h2 className="font-heading text-2xl font-bold mb-2.5">Already Submitted</h2>
@@ -309,20 +309,8 @@ export default function SurveyPage() {
         title="Product Survey"
         description="Help shape the future of ResolutionFlow by sharing your feedback"
       />
-      {/* Atmosphere orbs */}
-      <div className="pointer-events-none fixed inset-0 z-0 overflow-hidden">
-        <div
-          className="absolute"
-          style={{ top: '-200px', left: '-100px', width: '600px', height: '600px', borderRadius: '50%', background: 'radial-gradient(circle, rgba(6, 182, 212, 0.12) 0%, rgba(6, 182, 212, 0.03) 40%, transparent 70%)', filter: 'blur(80px)' }}
-        />
-        <div
-          className="absolute"
-          style={{ bottom: '-150px', right: '-100px', width: '500px', height: '500px', borderRadius: '50%', background: 'radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, rgba(139, 92, 246, 0.02) 40%, transparent 70%)', filter: 'blur(80px)' }}
-        />
-      </div>
-
       {/* Top bar */}
-      <div className="sticky top-0 z-50" style={{ WebkitBackdropFilter: 'blur(20px)', background: 'rgba(16, 17, 20, 0.85)', borderBottom: '1px solid var(--glass-border)' }}>
+      <div className="sticky top-0 z-50" style={{ background: 'rgba(26, 28, 35, 0.95)', borderBottom: '1px solid var(--color-border-default)' }}>
         <div className="mx-auto flex max-w-[680px] items-center justify-between gap-3 px-4 py-3 sm:px-5 sm:py-3.5">
           <a href="https://resolutionflow.com" target="_blank" rel="noreferrer" className="flex items-center gap-2 sm:gap-2.5 text-sm font-heading font-bold text-muted-foreground no-underline shrink-0">
             <BrandLogo size="sm" />
@@ -341,7 +329,7 @@ export default function SurveyPage() {
         {/* Hero — visible only on first slide */}
         {currentSlide === 0 && !isComplete && (
           <div className="text-center pt-10 pb-8 sm:pt-[72px] sm:pb-10 animate-fade-in-up">
-            <div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] sm:text-[11px] font-semibold font-sans text-xs uppercase tracking-widest mb-4 sm:mb-5" style={{ background: 'rgba(6, 182, 212, 0.1)', border: '1px solid rgba(6, 182, 212, 0.15)', color: 'var(--color-primary)' }}>
+            <div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[10px] sm:text-[11px] font-semibold font-sans text-xs uppercase tracking-widest mb-4 sm:mb-5" style={{ background: 'rgba(249, 115, 22, 0.10)', border: '1px solid rgba(249, 115, 22, 0.15)', color: 'var(--color-primary)' }}>
               <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
               FlowPilot Research
             </div>
@@ -444,9 +432,9 @@ export default function SurveyPage() {
                     onChange={e => setEmailInput(e.target.value)}
                     placeholder="your@email.com"
                     className="flex-1 rounded-[9px] px-3.5 py-2.5 text-sm text-foreground placeholder:text-text-muted focus:outline-hidden"
-                    style={{ background: 'rgba(16, 17, 20, 0.6)', border: '1px solid var(--glass-border)' }}
+                    style={{ background: 'rgba(16, 17, 20, 0.6)', border: '1px solid var(--color-border-default)' }}
                     onFocus={e => { e.currentTarget.style.borderColor = 'var(--color-primary)' }}
-                    onBlur={e => { e.currentTarget.style.borderColor = 'var(--glass-border)' }}
+                    onBlur={e => { e.currentTarget.style.borderColor = 'var(--color-border-default)' }}
                     disabled={emailSending}
                   />
                   <button
@@ -519,7 +507,7 @@ export default function SurveyPage() {
 
 function ScenarioBox({ scenario }: { scenario: { title: string; symptom: string; details: string } }) {
   return (
-    <div className="rounded-lg p-3.5 px-4 sm:p-4 sm:px-5 mb-4 text-[13px]" style={{ background: 'linear-gradient(135deg, rgba(6, 182, 212, 0.06), rgba(139, 92, 246, 0.03))', border: '1px solid color-mix(in srgb, var(--color-primary) 12%, transparent)' }}>
+    <div className="rounded-lg p-3.5 px-4 sm:p-4 sm:px-5 mb-4 text-[13px]" style={{ background: 'rgba(249, 115, 22, 0.04)', border: '1px solid color-mix(in srgb, var(--color-primary) 12%, transparent)' }}>
       <div className="font-sans text-xs text-[10px] uppercase tracking-widest mb-2 font-semibold" style={{ color: 'var(--color-primary)' }}>{scenario.title}</div>
       <div className="sm:flex gap-2 mb-1">
         <span className="text-muted-foreground font-medium whitespace-nowrap">Symptom:</span>
@@ -549,12 +537,12 @@ function QuestionCard({ question: q, answer, setAnswer }: { question: SurveyQues
               onClick={() => setAnswer(q.id, opt)}
               className="flex items-start gap-3 px-3.5 py-3 sm:px-4 rounded-[9px] text-left text-[13px] sm:text-sm transition-all duration-150 select-none"
               style={{
-                background: answer === opt ? 'rgba(6, 182, 212, 0.1)' : 'rgba(16, 17, 20, 0.6)',
-                border: `1px solid ${answer === opt ? 'var(--color-primary)' : 'var(--glass-border)'}`,
+                background: answer === opt ? 'rgba(249, 115, 22, 0.10)' : 'rgba(16, 17, 20, 0.6)',
+                border: `1px solid ${answer === opt ? 'var(--color-primary)' : 'var(--color-border-default)'}`,
                 color: answer === opt ? 'var(--color-foreground)' : 'var(--color-muted-foreground)',
               }}
             >
-              <div className="w-[18px] h-[18px] rounded-full shrink-0 flex items-center justify-center transition-all duration-150 mt-0.5" style={{ border: `2px solid ${answer === opt ? 'var(--color-primary)' : 'var(--glass-border)'}` }}>
+              <div className="w-[18px] h-[18px] rounded-full shrink-0 flex items-center justify-center transition-all duration-150 mt-0.5" style={{ border: `2px solid ${answer === opt ? 'var(--color-primary)' : 'var(--color-border-default)'}` }}>
                 {answer === opt && <div className="w-2 h-2 rounded-full" style={{ background: 'var(--color-primary)' }} />}
               </div>
               <span className="leading-snug">{opt}</span>
@@ -576,12 +564,12 @@ function QuestionCard({ question: q, answer, setAnswer }: { question: SurveyQues
                 }}
                 className="flex items-start gap-3 px-3.5 py-3 sm:px-4 rounded-[9px] text-left text-[13px] sm:text-sm transition-all duration-150 select-none"
                 style={{
-                  background: selected ? 'rgba(6, 182, 212, 0.1)' : 'rgba(16, 17, 20, 0.6)',
-                  border: `1px solid ${selected ? 'var(--color-primary)' : 'var(--glass-border)'}`,
+                  background: selected ? 'rgba(249, 115, 22, 0.10)' : 'rgba(16, 17, 20, 0.6)',
+                  border: `1px solid ${selected ? 'var(--color-primary)' : 'var(--color-border-default)'}`,
                   color: selected ? 'var(--color-foreground)' : 'var(--color-muted-foreground)',
                 }}
               >
-                <div className="w-[18px] h-[18px] rounded-[5px] shrink-0 flex items-center justify-center text-[11px] transition-all duration-150 mt-0.5" style={{ border: `2px solid ${selected ? 'var(--color-primary)' : 'var(--glass-border)'}`, background: selected ? 'var(--color-primary)' : 'transparent', color: selected ? 'white' : 'transparent' }}>
+                <div className="w-[18px] h-[18px] rounded-[5px] shrink-0 flex items-center justify-center text-[11px] transition-all duration-150 mt-0.5" style={{ border: `2px solid ${selected ? 'var(--color-primary)' : 'var(--color-border-default)'}`, background: selected ? 'var(--color-primary)' : 'transparent', color: selected ? 'white' : 'transparent' }}>
                   {'\u2713'}
                 </div>
                 <span className="leading-snug">{opt}</span>
@@ -603,10 +591,10 @@ function QuestionCard({ question: q, answer, setAnswer }: { question: SurveyQues
           className="w-full min-h-[100px] rounded-[9px] p-3 sm:p-3.5 text-[13px] sm:text-sm text-foreground leading-relaxed resize-y transition-all duration-200 placeholder:text-text-muted focus:outline-hidden"
           style={{
             background: 'rgba(16, 17, 20, 0.6)',
-            border: '1px solid var(--glass-border)',
+            border: '1px solid var(--color-border-default)',
           }}
-          onFocus={e => { e.currentTarget.style.borderColor = 'var(--color-primary)'; e.currentTarget.style.boxShadow = '0 0 0 3px rgba(6, 182, 212, 0.1)' }}
-          onBlur={e => { e.currentTarget.style.borderColor = 'var(--glass-border)'; e.currentTarget.style.boxShadow = 'none' }}
+          onFocus={e => { e.currentTarget.style.borderColor = 'var(--color-primary)'; e.currentTarget.style.boxShadow = '0 0 0 3px rgba(249, 115, 22, 0.10)' }}
+          onBlur={e => { e.currentTarget.style.borderColor = 'var(--color-border-default)'; e.currentTarget.style.boxShadow = 'none' }}
         />
       )}
 
@@ -729,8 +717,8 @@ function DragRank({ items, onChange }: { items: string[]; onChange: (items: stri
           onTouchStart={() => handleTouchStart(idx)}
           className="flex items-center gap-2.5 sm:gap-3 px-3 py-3 sm:px-4 sm:py-2.5 rounded-[9px] text-[13px] sm:text-sm transition-all duration-150 select-none"
           style={{
-            background: overIdx === idx ? 'rgba(6, 182, 212, 0.1)' : 'rgba(16, 17, 20, 0.6)',
-            border: `1px solid ${overIdx === idx || draggingIdx === idx ? 'var(--color-primary)' : 'var(--glass-border)'}`,
+            background: overIdx === idx ? 'rgba(249, 115, 22, 0.10)' : 'rgba(16, 17, 20, 0.6)',
+            border: `1px solid ${overIdx === idx || draggingIdx === idx ? 'var(--color-primary)' : 'var(--color-border-default)'}`,
             opacity: draggingIdx === idx ? 0.5 : 1,
             cursor: 'grab',
             color: 'var(--color-muted-foreground)',
diff --git a/frontend/src/pages/SurveyThankYouPage.tsx b/frontend/src/pages/SurveyThankYouPage.tsx
index 4aae11f4..7ba2fa34 100644
--- a/frontend/src/pages/SurveyThankYouPage.tsx
+++ b/frontend/src/pages/SurveyThankYouPage.tsx
@@ -6,20 +6,8 @@ export default function SurveyThankYouPage() {
     <>
     <PageMeta title="Thank You" description="Thank you for your feedback on ResolutionFlow" />
     <div className="min-h-screen bg-background text-foreground">
-      {/* Atmosphere orbs */}
-      <div className="pointer-events-none fixed inset-0 z-0 overflow-hidden" aria-hidden="true">
-        <div
-          className="absolute"
-          style={{ top: '-200px', left: '-100px', width: '600px', height: '600px', borderRadius: '50%', background: 'radial-gradient(circle, rgba(6, 182, 212, 0.12) 0%, rgba(6, 182, 212, 0.03) 40%, transparent 70%)', filter: 'blur(80px)' }}
-        />
-        <div
-          className="absolute"
-          style={{ bottom: '-150px', right: '-100px', width: '500px', height: '500px', borderRadius: '50%', background: 'radial-gradient(circle, rgba(52, 211, 153, 0.08) 0%, rgba(52, 211, 153, 0.02) 40%, transparent 70%)', filter: 'blur(80px)' }}
-        />
-      </div>
-
       {/* Top bar */}
-      <div className="sticky top-0 z-50" style={{ WebkitBackdropFilter: 'blur(20px)', background: 'rgba(16, 17, 20, 0.85)', borderBottom: '1px solid var(--glass-border)' }}>
+      <div className="sticky top-0 z-50" style={{ background: 'rgba(26, 28, 35, 0.95)', borderBottom: '1px solid var(--color-border-default)' }}>
         <div className="mx-auto flex max-w-[680px] items-center justify-between gap-3 px-5 py-3.5">
           <a href="https://resolutionflow.com" target="_blank" rel="noreferrer" className="flex items-center gap-2.5 text-sm font-heading font-bold text-muted-foreground no-underline">
             <BrandLogo size="sm" />
@@ -31,7 +19,7 @@ export default function SurveyThankYouPage() {
       <div className="relative z-10 mx-auto max-w-[680px] px-5">
         <div className="text-center pt-[120px] animate-fade-in-up">
           {/* Success icon */}
-          <div className="w-20 h-20 mx-auto mb-6 rounded-full flex items-center justify-center" style={{ background: 'rgba(52, 211, 153, 0.1)', border: '1px solid rgba(52, 211, 153, 0.15)' }}>
+          <div className="w-20 h-20 mx-auto mb-6 rounded-full flex items-center justify-center" style={{ background: 'var(--color-success-dim)', border: '1px solid rgba(52, 211, 153, 0.15)' }}>
             <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="oklch(0.76 0.15 163)" strokeWidth="2">
               <path d="M20 6L9 17l-5-5"/>
             </svg>
@@ -48,7 +36,7 @@ export default function SurveyThankYouPage() {
           </p>
 
           {/* Divider */}
-          <div className="mx-auto w-12 h-px mb-10" style={{ background: 'var(--glass-border)' }} />
+          <div className="mx-auto w-12 h-px mb-10" style={{ background: 'var(--color-border-default)' }} />
 
           {/* Feedback callout */}
           <div
diff --git a/frontend/src/pages/account/ChatRetentionSettingsPage.tsx b/frontend/src/pages/account/ChatRetentionSettingsPage.tsx
index f3d4c0ed..3cddf731 100644
--- a/frontend/src/pages/account/ChatRetentionSettingsPage.tsx
+++ b/frontend/src/pages/account/ChatRetentionSettingsPage.tsx
@@ -74,7 +74,7 @@ export default function ChatRetentionSettingsPage() {
               min={1}
               max={365}
               className="w-full rounded-xl border bg-card text-foreground text-sm px-4 py-2.5 focus:outline-hidden focus:border-primary/30"
-              style={{ borderColor: 'var(--glass-border)' }}
+              style={{ borderColor: 'var(--color-border-default)' }}
             />
             <p className="text-xs text-muted-foreground mt-1">
               Chats older than this will be automatically deleted (1-365 days)
@@ -92,7 +92,7 @@ export default function ChatRetentionSettingsPage() {
               min={10}
               max={10000}
               className="w-full rounded-xl border bg-card text-foreground text-sm px-4 py-2.5 focus:outline-hidden focus:border-primary/30"
-              style={{ borderColor: 'var(--glass-border)' }}
+              style={{ borderColor: 'var(--color-border-default)' }}
             />
             <p className="text-xs text-muted-foreground mt-1">
               When this limit is exceeded, oldest unpinned chats are deleted
diff --git a/frontend/src/pages/account/IntegrationsPage.tsx b/frontend/src/pages/account/IntegrationsPage.tsx
index 1529aab1..2acd7d3a 100644
--- a/frontend/src/pages/account/IntegrationsPage.tsx
+++ b/frontend/src/pages/account/IntegrationsPage.tsx
@@ -813,7 +813,7 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
                       onChange={(e) => handleMemberChange(user.user_id, e.target.value)}
                       className={cn(
                         'w-full rounded-lg border bg-card px-3 py-1.5 text-sm text-foreground',
-                        'border-border focus:border-[rgba(6,182,212,0.3)] focus:outline-none',
+                        'border-border focus:border-[rgba(249,115,22,0.3)] focus:outline-none',
                         !currentMapping && 'text-muted-foreground'
                       )}
                     >
@@ -1084,7 +1084,7 @@ function SettingSelect({
         value={value}
         onChange={(e) => onChange(e.target.value)}
         disabled={disabled}
-        className="w-full max-w-xs rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none disabled:opacity-50"
+        className="w-full max-w-xs rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-[rgba(249,115,22,0.3)] focus:outline-none disabled:opacity-50"
       >
         {options.map((opt) => (
           <option key={opt.value} value={opt.value}>{opt.label}</option>
diff --git a/frontend/src/pages/admin/GalleryManagementPage.tsx b/frontend/src/pages/admin/GalleryManagementPage.tsx
index 82252c3b..6771f442 100644
--- a/frontend/src/pages/admin/GalleryManagementPage.tsx
+++ b/frontend/src/pages/admin/GalleryManagementPage.tsx
@@ -90,7 +90,7 @@ function SortOrderInput({
       }}
       className={cn(
         'w-20 rounded-[8px] border border-border bg-card px-2 py-1 text-sm text-foreground',
-        'focus:border-[rgba(6,182,212,0.3)] focus:outline-none',
+        'focus:border-[rgba(249,115,22,0.3)] focus:outline-none',
         disabled && 'cursor-not-allowed opacity-50',
       )}
     />
@@ -125,7 +125,7 @@ function FilterBar({
           onChange={e => onSearchChange(e.target.value)}
           className={cn(
             'w-full rounded-lg border border-border bg-card pl-9 pr-3 py-2 text-sm text-foreground placeholder:text-muted-foreground',
-            'focus:border-[rgba(6,182,212,0.3)] focus:outline-none',
+            'focus:border-[rgba(249,115,22,0.3)] focus:outline-none',
           )}
         />
       </div>
diff --git a/frontend/src/pages/admin/SurveyResponsesPage.tsx b/frontend/src/pages/admin/SurveyResponsesPage.tsx
index 0b0d8ef0..b4956a41 100644
--- a/frontend/src/pages/admin/SurveyResponsesPage.tsx
+++ b/frontend/src/pages/admin/SurveyResponsesPage.tsx
@@ -91,7 +91,7 @@ function ExpandedDetail({ response }: { response: SurveyResponseDetail }) {
           className="px-6 py-5"
           style={{
             background: 'rgba(0, 0, 0, 0.15)',
-            borderTop: '1px solid rgba(6, 182, 212, 0.1)',
+            borderTop: '1px solid rgba(249, 115, 22, 0.1)',
           }}
         >
           <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
@@ -101,7 +101,7 @@ function ExpandedDetail({ response }: { response: SurveyResponseDetail }) {
                 className="rounded-lg p-4"
                 style={{
                   background: 'var(--color-bg-card)',
-                  border: '1px solid var(--glass-border)',
+                  border: '1px solid var(--color-border-default)',
                 }}
               >
                 <p className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-primary mb-1">
@@ -223,7 +223,7 @@ function ResponseRow({
               <div className="fixed inset-0 z-40" onClick={() => setShowMenu(false)} />
               <div
                 className="absolute right-3 top-full z-50 mt-1 w-44 rounded-xl py-1 shadow-xl"
-                style={{ background: 'var(--color-bg-card)', border: '1px solid var(--glass-border)', }}
+                style={{ background: 'var(--color-bg-card)', border: '1px solid var(--color-border-default)', }}
               >
                 <button
                   onClick={() => { onMarkRead(); setShowMenu(false) }}
@@ -239,7 +239,7 @@ function ResponseRow({
                   {response.archived_at ? <ArchiveRestore className="h-3.5 w-3.5" /> : <Archive className="h-3.5 w-3.5" />}
                   {response.archived_at ? 'Unarchive' : 'Archive'}
                 </button>
-                <div className="my-1 border-t" style={{ borderColor: 'var(--glass-border)' }} />
+                <div className="my-1 border-t" style={{ borderColor: 'var(--color-border-default)' }} />
                 <button
                   onClick={() => { onDelete(); setShowMenu(false) }}
                   className="flex w-full items-center gap-2.5 px-3 py-2 text-xs text-rose-400 hover:bg-rose-500/10 transition-colors"
@@ -500,7 +500,7 @@ export default function SurveyResponsesPage() {
       {selectedIds.size > 0 && (
         <div
           className="flex items-center gap-3 rounded-xl px-4 py-2.5"
-          style={{ background: 'rgba(6, 182, 212, 0.08)', border: '1px solid rgba(6, 182, 212, 0.15)' }}
+          style={{ background: 'rgba(249, 115, 22, 0.08)', border: '1px solid rgba(249, 115, 22, 0.15)' }}
         >
           <span className="text-sm text-primary font-medium">
             {selectedIds.size} selected
diff --git a/frontend/src/styles/landing.css b/frontend/src/styles/landing.css
index 8c9203d2..fdd83ad5 100644
--- a/frontend/src/styles/landing.css
+++ b/frontend/src/styles/landing.css
@@ -6,8 +6,8 @@
 
 .landing-page {
   font-family: 'IBM Plex Sans', sans-serif;
-  background: #1a1c23;
-  color: #e2e5eb;
+  background: var(--color-bg-page);
+  color: var(--color-text-primary);
   line-height: 1.6;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
@@ -61,8 +61,8 @@
 }
 
 .landing-nav.scrolled {
-  background: rgba(12, 13, 16, 0.95);
-  border-bottom: 1px solid #2e3240;
+  background: rgba(26, 28, 35, 0.95);
+  border-bottom: 1px solid var(--color-border-default);
 }
 
 .landing-nav-inner {
@@ -84,7 +84,7 @@
 .landing-nav-logo-icon {
   width: 36px;
   height: 36px;
-  background: #f97316;
+  background: var(--color-accent);
   border-radius: 10px;
   display: flex;
   align-items: center;
@@ -100,12 +100,12 @@
   font-family: 'Bricolage Grotesque', sans-serif;
   font-size: 1.25rem;
   font-weight: 700;
-  color: #e2e5eb;
+  color: var(--color-text-primary);
   letter-spacing: -0.02em;
 }
 
 .landing-nav-wordmark span {
-  color: #fdba74;
+  color: var(--color-accent-text);
 }
 
 .landing-nav-links {
@@ -120,7 +120,7 @@
 .landing-nav-links a {
   font-size: 0.875rem;
   font-weight: 500;
-  color: #848b9b;
+  color: var(--color-text-secondary);
   text-decoration: none;
   transition: color 0.2s;
   letter-spacing: 0.01em;
@@ -128,7 +128,7 @@
 }
 
 .landing-nav-links a:hover {
-  color: #e2e5eb;
+  color: var(--color-text-primary);
 }
 
 .landing-nav-cta {
@@ -140,7 +140,7 @@
 .landing-btn-ghost {
   font-size: 0.875rem;
   font-weight: 500;
-  color: #848b9b;
+  color: var(--color-text-secondary);
   text-decoration: none;
   padding: 0.5rem 1rem;
   border-radius: 8px;
@@ -148,7 +148,7 @@
 }
 
 .landing-btn-ghost:hover {
-  color: #e2e5eb;
+  color: var(--color-text-primary);
   background: rgba(255, 255, 255, 0.06);
 }
 
@@ -159,7 +159,7 @@
   text-decoration: none;
   padding: 0.55rem 1.25rem;
   border-radius: 8px;
-  background: #f97316;
+  background: var(--color-accent);
   transition: opacity 0.25s, transform 0.25s;
   letter-spacing: -0.01em;
   border: none;
@@ -185,12 +185,12 @@
   gap: 8px;
   padding: 6px 16px;
   border-radius: 100px;
-  background: #22252e;
-  border: 1px solid #2e3240;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border-default);
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.75rem;
   font-weight: 500;
-  color: #fdba74;
+  color: var(--color-accent-text);
   margin-bottom: 2rem;
   letter-spacing: 0.03em;
   animation: landingFadeInDown 0.8s ease-out;
@@ -201,7 +201,7 @@
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: #f97316;
+  background: var(--color-accent);
   animation: landingPulse 2s ease-in-out infinite;
 }
 
@@ -228,13 +228,13 @@
 }
 
 .landing-gradient-text {
-  color: #fdba74;
+  color: var(--color-accent-text);
 }
 
 .landing-hero-sub {
   font-size: 1.2rem;
   font-weight: 400;
-  color: #848b9b;
+  color: var(--color-text-secondary);
   line-height: 1.7;
   max-width: 600px;
   margin: 0 auto 2.5rem;
@@ -256,7 +256,7 @@
   text-decoration: none;
   padding: 0.85rem 2rem;
   border-radius: 10px;
-  background: #f97316;
+  background: var(--color-accent);
   transition: opacity 0.3s, transform 0.3s;
   letter-spacing: -0.01em;
   border: none;
@@ -277,19 +277,19 @@
 .landing-btn-hero-secondary {
   font-size: 1rem;
   font-weight: 500;
-  color: #848b9b;
+  color: var(--color-text-secondary);
   text-decoration: none;
   padding: 0.85rem 2rem;
   border-radius: 10px;
-  background: #22252e;
-  border: 1px solid #2e3240;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border-default);
   transition: background 0.3s, border-color 0.3s, color 0.3s;
 }
 
 .landing-btn-hero-secondary:hover {
   background: rgba(255, 255, 255, 0.06);
   border-color: rgba(255, 255, 255, 0.1);
-  color: #e2e5eb;
+  color: var(--color-text-primary);
 }
 
 /* ---- SOCIAL PROOF BAR ---- */
@@ -323,7 +323,7 @@
   font-family: 'Bricolage Grotesque', sans-serif;
   font-size: 1.75rem;
   font-weight: 700;
-  color: #fdba74;
+  color: var(--color-accent-text);
 }
 
 .landing-proof-stat .label {
@@ -342,8 +342,8 @@
 
 .landing-preview-window {
   border-radius: 12px;
-  border: 1px solid #2e3240;
-  background: #22252e;
+  border: 1px solid var(--color-border-default);
+  background: var(--color-bg-card);
   overflow: hidden;
   box-shadow: 0 20px 80px rgba(0, 0, 0, 0.4);
 }
@@ -354,7 +354,7 @@
   padding: 0 0 0 14px;
   height: 40px;
   background: rgba(255, 255, 255, 0.02);
-  border-bottom: 1px solid #2e3240;
+  border-bottom: 1px solid var(--color-border-default);
 }
 
 .landing-preview-tab {
@@ -365,8 +365,8 @@
   height: 100%;
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.7rem;
-  color: #848b9b;
-  border-right: 1px solid #2e3240;
+  color: var(--color-text-secondary);
+  border-right: 1px solid var(--color-border-default);
   background: rgba(255, 255, 255, 0.02);
   position: relative;
 }
@@ -378,14 +378,14 @@
   left: 0;
   right: 0;
   height: 2px;
-  background: #f97316;
+  background: var(--color-accent);
 }
 
 .landing-tab-icon {
   width: 14px;
   height: 14px;
   border-radius: 3px;
-  background: #f97316;
+  background: var(--color-accent);
   flex-shrink: 0;
 }
 
@@ -410,14 +410,14 @@
   padding: 4px 12px;
   border-radius: 6px;
   background: rgba(255, 255, 255, 0.03);
-  border: 1px solid #2e3240;
+  border: 1px solid var(--color-border-default);
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.65rem;
   color: #5a6170;
 }
 
 .landing-lock-icon {
-  color: #22c55e;
+  color: var(--color-success);
   font-size: 0.6rem;
 }
 
@@ -475,7 +475,7 @@
   padding: 8px 12px;
   border-radius: 8px;
   font-size: 0.8rem;
-  color: #848b9b;
+  color: var(--color-text-secondary);
   display: flex;
   align-items: center;
   gap: 8px;
@@ -483,8 +483,8 @@
 
 .landing-preview-sidebar-item.active {
   background: rgba(249, 115, 22, 0.08);
-  color: #fdba74;
-  border-left: 3px solid #f97316;
+  color: var(--color-accent-text);
+  border-left: 3px solid var(--color-accent);
 }
 
 .landing-preview-sidebar-item .dot {
@@ -497,7 +497,7 @@
   flex: 1;
   background: rgba(255, 255, 255, 0.01);
   border-radius: 12px;
-  border: 1px dashed #2e3240;
+  border: 1px dashed var(--color-border-default);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -521,14 +521,14 @@
 }
 
 .landing-tree-node.root {
-  background: #f97316;
+  background: var(--color-accent);
   color: #fff;
 }
 
 .landing-tree-node.decision {
-  background: #22252e;
-  border: 1px solid #2e3240;
-  color: #e2e5eb;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border-default);
+  color: var(--color-text-primary);
   font-size: 0.7rem;
 }
 
@@ -568,7 +568,7 @@
 .landing-tree-label {
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.6rem;
-  color: #fdba74;
+  color: var(--color-accent-text);
   margin-bottom: 4px;
   opacity: 0.7;
 }
@@ -587,7 +587,7 @@
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.75rem;
   font-weight: 600;
-  color: #fdba74;
+  color: var(--color-accent-text);
   letter-spacing: 0.12em;
   text-transform: uppercase;
   margin-bottom: 1rem;
@@ -605,7 +605,7 @@
 
 .landing-section-desc {
   font-size: 1.1rem;
-  color: #848b9b;
+  color: var(--color-text-secondary);
   line-height: 1.7;
   max-width: 580px;
 }
@@ -615,7 +615,7 @@
   max-width: 1100px;
   margin: 0 auto;
   height: 1px;
-  background: #2e3240;
+  background: var(--color-bg-elevated);
 }
 
 /* ---- PROBLEM SECTION ---- */
@@ -630,8 +630,8 @@
 .landing-problem-card {
   padding: 2rem;
   border-radius: 16px;
-  background: #22252e;
-  border: 1px solid #2e3240;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border-default);
   transition: border-color 0.3s, transform 0.3s;
 }
 
@@ -653,7 +653,7 @@
 
 .landing-problem-icon.red {
   background: rgba(239, 68, 68, 0.1);
-  color: #ef4444;
+  color: var(--color-danger);
 }
 
 .landing-problem-icon.amber {
@@ -681,7 +681,7 @@
 
 .landing-problem-card p {
   font-size: 0.9rem;
-  color: #848b9b;
+  color: var(--color-text-secondary);
   line-height: 1.65;
 }
 
@@ -713,24 +713,24 @@
 .landing-eq-item {
   padding: 0.5rem 1.25rem;
   border-radius: 12px;
-  background: #22252e;
-  border: 1px solid #2e3240;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border-default);
 }
 
 .landing-eq-operator {
-  color: #fdba74;
+  color: var(--color-accent-text);
   font-size: 2rem;
 }
 
 .landing-eq-result {
-  color: #fdba74;
+  color: var(--color-accent-text);
   padding: 0;
 }
 
 /* ---- EQUATION DESC ---- */
 .landing-equation-desc {
   font-size: 1.1rem;
-  color: #848b9b;
+  color: var(--color-text-secondary);
   max-width: 550px;
   margin: 0 auto;
   line-height: 1.7;
@@ -748,8 +748,8 @@
 .landing-step-card {
   padding: 2rem;
   border-radius: 16px;
-  background: #22252e;
-  border: 1px solid #2e3240;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border-default);
   position: relative;
   counter-increment: landing-step;
   transition: border-color 0.3s, transform 0.3s;
@@ -764,7 +764,7 @@
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.7rem;
   font-weight: 600;
-  color: #fdba74;
+  color: var(--color-accent-text);
   opacity: 0.6;
   letter-spacing: 0.05em;
 }
@@ -779,7 +779,7 @@
 
 .landing-step-card p {
   font-size: 0.9rem;
-  color: #848b9b;
+  color: var(--color-text-secondary);
   line-height: 1.65;
 }
 
@@ -788,8 +788,8 @@
   height: 120px;
   border-radius: 10px;
   margin-top: 1.25rem;
-  background: #1a1c23;
-  border: 1px solid #2e3240;
+  background: var(--color-bg-page);
+  border: 1px solid var(--color-border-default);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -815,14 +815,14 @@
 
 .landing-mock-node.start {
   background: rgba(249, 115, 22, 0.15);
-  color: #fdba74;
+  color: var(--color-accent-text);
   border: 1px solid rgba(249, 115, 22, 0.2);
 }
 
 .landing-mock-node.step {
   background: rgba(255, 255, 255, 0.03);
-  color: #848b9b;
-  border: 1px solid #2e3240;
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-border-default);
 }
 
 .landing-mock-connector {
@@ -852,19 +852,19 @@
 }
 
 .landing-mock-chat-line .label {
-  color: #fdba74;
+  color: var(--color-accent-text);
   font-weight: 600;
   min-width: 55px;
 }
 
 .landing-mock-chat-line .text {
-  color: #848b9b;
+  color: var(--color-text-secondary);
   overflow-wrap: anywhere;
   min-width: 0;
 }
 
 .landing-mock-chat-line.doc .label {
-  color: #22c55e;
+  color: var(--color-success);
 }
 
 /* Mock ticket */
@@ -879,17 +879,17 @@
 .landing-mock-ticket-header {
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.6rem;
-  color: #fdba74;
+  color: var(--color-accent-text);
   font-weight: 600;
   padding-bottom: 0.35rem;
-  border-bottom: 1px solid #2e3240;
+  border-bottom: 1px solid var(--color-border-default);
   margin-bottom: 0.15rem;
 }
 
 .landing-mock-ticket-line {
   font-size: 0.55rem;
   font-family: 'IBM Plex Sans', sans-serif;
-  color: #848b9b;
+  color: var(--color-text-secondary);
   display: flex;
   gap: 6px;
 }
@@ -900,7 +900,7 @@
 }
 
 .landing-mock-ticket-line .check {
-  color: #22c55e;
+  color: var(--color-success);
 }
 
 /* ---- FEATURES GRID ---- */
@@ -914,8 +914,8 @@
 .landing-feature-card {
   padding: 2rem;
   border-radius: 16px;
-  background: #22252e;
-  border: 1px solid #2e3240;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border-default);
   transition: border-color 0.3s ease, transform 0.3s ease;
 }
 
@@ -933,7 +933,7 @@
   align-items: center;
   justify-content: center;
   margin-bottom: 1.25rem;
-  color: #fdba74;
+  color: var(--color-accent-text);
 }
 
 .landing-feature-card h3 {
@@ -946,13 +946,13 @@
 
 .landing-feature-card p {
   font-size: 0.875rem;
-  color: #848b9b;
+  color: var(--color-text-secondary);
   line-height: 1.6;
 }
 
 .landing-feature-card.highlight {
   border-color: rgba(249, 115, 22, 0.15);
-  background: #22252e;
+  background: var(--color-bg-card);
   grid-column: span 2;
 }
 
@@ -968,8 +968,8 @@
 .landing-pricing-card {
   padding: 2.5rem 2rem;
   border-radius: 16px;
-  background: #22252e;
-  border: 1px solid #2e3240;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border-default);
   transition: border-color 0.3s, transform 0.3s;
 }
 
@@ -979,7 +979,7 @@
 
 .landing-pricing-card.featured {
   border-color: #f97316;
-  background: #22252e;
+  background: var(--color-bg-card);
   position: relative;
 }
 
@@ -991,7 +991,7 @@
   transform: translateX(-50%);
   padding: 4px 14px;
   border-radius: 100px;
-  background: #f97316;
+  background: var(--color-accent);
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.65rem;
   font-weight: 600;
@@ -1029,7 +1029,7 @@
 }
 
 .landing-pricing-card.featured .landing-pricing-price .amount {
-  color: #fdba74;
+  color: var(--color-accent-text);
 }
 
 .landing-pricing-price .period {
@@ -1054,7 +1054,7 @@
 
 .landing-pricing-features li {
   font-size: 0.875rem;
-  color: #848b9b;
+  color: var(--color-text-secondary);
   display: flex;
   align-items: flex-start;
   gap: 0.6rem;
@@ -1082,8 +1082,8 @@
 }
 
 .landing-pricing-btn.outline {
-  color: #e2e5eb;
-  border: 1px solid #2e3240;
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border-default);
   background: transparent;
 }
 
@@ -1094,7 +1094,7 @@
 
 .landing-pricing-btn.filled {
   color: #fff;
-  background: #f97316;
+  background: var(--color-accent);
   border: none;
 }
 
@@ -1111,7 +1111,7 @@
 }
 
 .landing-pricing-enterprise a {
-  color: #fdba74;
+  color: var(--color-accent-text);
   text-decoration: none;
 }
 
@@ -1133,7 +1133,7 @@
   font-weight: 600;
   line-height: 1.5;
   letter-spacing: -0.01em;
-  color: #e2e5eb;
+  color: var(--color-text-primary);
   font-style: italic;
   margin-bottom: 1.5rem;
   position: relative;
@@ -1170,7 +1170,7 @@
 }
 
 .landing-testimonial-author strong {
-  color: #848b9b;
+  color: var(--color-text-secondary);
   font-weight: 600;
 }
 
@@ -1196,7 +1196,7 @@
 
 .landing-cta-section>p {
   font-size: 1.1rem;
-  color: #848b9b;
+  color: var(--color-text-secondary);
   max-width: 500px;
   margin: 0 auto 2rem;
   line-height: 1.7;
@@ -1213,9 +1213,9 @@
   flex: 1;
   padding: 0.85rem 1.25rem;
   border-radius: 10px;
-  border: 1px solid #2e3240;
-  background: #22252e;
-  color: #e2e5eb;
+  border: 1px solid var(--color-border-default);
+  background: var(--color-bg-card);
+  color: var(--color-text-primary);
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.9rem;
   outline: none;
@@ -1239,19 +1239,19 @@
 
 .landing-cta-success {
   font-size: 0.85rem;
-  color: #22c55e;
+  color: var(--color-success);
   margin-top: 0.75rem;
 }
 
 .landing-cta-error {
   font-size: 0.85rem;
-  color: #ef4444;
+  color: var(--color-danger);
   margin-top: 0.75rem;
 }
 
 /* ---- FOOTER ---- */
 .landing-footer {
-  border-top: 1px solid #2e3240;
+  border-top: 1px solid var(--color-border-default);
   padding: 3rem 2rem;
 }
 
@@ -1292,7 +1292,7 @@
 }
 
 .landing-footer-links a:hover {
-  color: #848b9b;
+  color: var(--color-text-secondary);
 }
 
 /* ---- ANIMATIONS ---- */
@@ -1379,7 +1379,7 @@
   gap: 0;
   padding: 0.5rem 1.5rem 1.5rem;
   background: rgba(12, 13, 16, 0.98);
-  border-bottom: 1px solid #2e3240;
+  border-bottom: 1px solid var(--color-border-default);
 }
 
 .landing-mobile-menu a {
@@ -1387,14 +1387,14 @@
   padding: 0.875rem 0;
   font-size: 1rem;
   font-weight: 500;
-  color: #848b9b;
+  color: var(--color-text-secondary);
   text-decoration: none;
   transition: color 0.2s;
   border-bottom: 1px solid rgba(255, 255, 255, 0.04);
 }
 
 .landing-mobile-menu a:hover {
-  color: #e2e5eb;
+  color: var(--color-text-primary);
 }
 
 .landing-mobile-menu a:last-child {