fix: eliminate deprecated cyan, glass-border, and off-palette colors site-wide

- 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>
2026-03-27 05:42:08 +00:00
parent 3c0a29115c
commit 34b0f2ade9
51 changed files with 210 additions and 266 deletions
--- 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' && (
            <>
--- 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) {
--- 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'
        )}
--- 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
--- 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}
--- 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" />
--- 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,
            }}
          >
--- 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">
--- 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
--- 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
--- 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>
        )}
--- 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}
--- 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'}`}>
--- 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
--- 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(
--- 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">
--- 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}
            />
          )}
--- 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>
        )}
--- 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'
--- 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>
              ))}
--- 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 */}
--- 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
          />
--- 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'}
--- 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">
--- 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 }}
--- 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>
--- 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>
--- 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 && (
--- 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>
--- 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>

--- 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 => (
--- 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>
--- 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>
--- 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={
--- 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 (
    <>