diff --git a/src/App.tsx b/src/App.tsx
index 7b8fab8..8f92382 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -244,7 +244,7 @@ function App() {
   }, [handleExportSessions, handleImportSessions, handleOpenSettings])
 
   return (
-    <div className="flex flex-col h-screen bg-dark-900 text-gray-200" style={{ backgroundColor: '#0f172a' }}>
+    <div className="flex flex-col h-screen bg-dark-900 text-content-primary">
       {/* Title bar spacer for macOS — left area draggable, right area handles double-click */}
       <div className="h-8 bg-dark-900 flex">
         <div className="w-20 drag" />
@@ -299,7 +299,7 @@ function App() {
             {isMobile && (
               <button
                 onClick={toggleMobileSidebar}
-                className="flex items-center justify-center w-10 h-10 text-gray-400 hover:text-gray-200 hover:bg-dark-800 transition-colors"
+                className="flex items-center justify-center w-10 h-10 text-txt-muted hover:text-content-primary hover:bg-dark-800 transition-colors"
                 aria-label="Toggle sidebar"
               >
                 <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/src/components/ConnectionPanel.tsx b/src/components/ConnectionPanel.tsx
index 5d23d84..c89e2c2 100644
--- a/src/components/ConnectionPanel.tsx
+++ b/src/components/ConnectionPanel.tsx
@@ -52,16 +52,16 @@ const STATUS_DOT_COLORS: Record<ConnectionState, string> = {
   connected: 'bg-green-400',
   connecting: 'bg-yellow-400 animate-pulse',
   background: 'bg-green-400 opacity-60',
-  suspended: 'bg-gray-400',
+  suspended: 'bg-surface-active',
   error: 'bg-red-400',
-  disconnected: 'bg-gray-500',
+  disconnected: 'bg-surface-active',
   reconnecting: 'bg-yellow-400 animate-pulse',
 }
 
 function StatusDot({ state }: StatusDotProps) {
   return (
     <span
-      className={`inline-block w-2 h-2 rounded-full ${STATUS_DOT_COLORS[state] ?? 'bg-gray-500'}`}
+      className={`inline-block w-2 h-2 rounded-full ${STATUS_DOT_COLORS[state] ?? 'bg-surface-active'}`}
     />
   )
 }
@@ -103,7 +103,7 @@ function ConnectionCard({ conn, onReconnect, onDisconnect, reconnectingId }: Con
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2 min-w-0">
           <StatusDot state={conn.state} />
-          <span className="text-sm text-gray-200 truncate font-medium">
+          <span className="text-sm text-content-primary truncate font-medium">
             {conn.config.username}@{conn.config.host}
           </span>
         </div>
@@ -116,10 +116,10 @@ function ConnectionCard({ conn, onReconnect, onDisconnect, reconnectingId }: Con
                 : conn.state === 'background'
                   ? 'bg-green-400/10 text-green-400 opacity-70'
                   : conn.state === 'suspended'
-                    ? 'bg-gray-400/10 text-gray-400'
+                    ? 'bg-surface-active/10 text-txt-muted'
                     : conn.state === 'error'
                       ? 'bg-red-400/10 text-red-400'
-                      : 'bg-gray-500/10 text-gray-500'
+                      : 'bg-surface-active/10 text-txt-muted'
           }`}
         >
           {STATUS_LABELS[conn.state]}
@@ -127,7 +127,7 @@ function ConnectionCard({ conn, onReconnect, onDisconnect, reconnectingId }: Con
       </div>
 
       {/* Details */}
-      <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-gray-400">
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-txt-muted">
         {/* Port */}
         <span className="flex items-center gap-1">
           <Activity className="w-3 h-3" />
@@ -167,7 +167,7 @@ function ConnectionCard({ conn, onReconnect, onDisconnect, reconnectingId }: Con
             onClick={() => onReconnect(conn.connectionId)}
             disabled={isReconnecting}
             className="flex items-center gap-1 px-2 py-1 rounded text-xs
-                        bg-accent-blue/10 text-accent-blue hover:bg-accent-blue/20
+                        bg-surface-baseccent-blue/10 text-accent-blue hover:bg-surface-baseccent-blue/20
                         disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
           >
             <RefreshCw className={`w-3 h-3 ${isReconnecting ? 'animate-spin' : ''}`} />
@@ -208,7 +208,7 @@ interface StatsBarProps {
 
 function StatsOverview({ total, connected, background, error }: StatsBarProps) {
   const items = [
-    { label: '总计', value: total, color: 'text-gray-300' },
+    { label: '总计', value: total, color: 'text-content-secondary' },
     { label: '活跃', value: connected, color: 'text-green-400' },
     { label: '后台', value: background, color: 'text-yellow-400' },
     { label: '断开/错误', value: error, color: 'text-red-400' },
@@ -219,7 +219,7 @@ function StatsOverview({ total, connected, background, error }: StatsBarProps) {
       {items.map((item) => (
         <div key={item.label} className="bg-dark-900 rounded-lg p-2 text-center">
           <div className={`text-lg font-semibold ${item.color}`}>{item.value}</div>
-          <div className="text-[10px] text-gray-500">{item.label}</div>
+          <div className="text-[10px] text-txt-muted">{item.label}</div>
         </div>
       ))}
     </div>
@@ -274,7 +274,7 @@ export default function ConnectionPanel() {
     <>
       {/* Backdrop */}
       <div
-        className="fixed inset-0 bg-black/30 z-40 animate-fade-in"
+        className="fixed inset-0 bg-surface-baselack/30 z-40 animate-fade-in"
         onClick={close}
       />
 
@@ -286,14 +286,14 @@ export default function ConnectionPanel() {
       >
         {/* Header */}
         <div className="flex items-center justify-between px-4 h-12 border-b border-dark-700/30 shrink-0">
-          <h2 className="text-sm font-semibold text-gray-200 flex items-center gap-2">
+          <h2 className="text-sm font-semibold text-content-primary flex items-center gap-2">
             <Wifi className="w-4 h-4 text-accent-blue" />
             连接管理
           </h2>
           <button
             type="button"
             onClick={close}
-            className="p-1 rounded hover:bg-dark-700 text-gray-400 hover:text-gray-200 transition-colors"
+            className="p-1 rounded hover:bg-dark-700 text-txt-muted hover:text-content-primary transition-colors"
           >
             <X className="w-4 h-4" />
           </button>
diff --git a/src/components/PortForwardView.tsx b/src/components/PortForwardView.tsx
index b8b978c..f3c32c4 100644
--- a/src/components/PortForwardView.tsx
+++ b/src/components/PortForwardView.tsx
@@ -168,11 +168,11 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
       {needsReconnect && currentTab?.sessionId && (
         <div className="absolute inset-0 bg-dark-900/90 flex items-center justify-center z-50">
           <div className="text-center">
-            <div className="w-16 h-16 bg-accent-blue/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
+            <div className="w-16 h-16 bg-surface-baseccent-blue/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
               <ArrowRightLeft className="w-8 h-8 text-accent-blue" />
             </div>
-            <div className="text-gray-200 mb-2 text-lg">会话已恢复</div>
-            <div className="text-gray-400 text-sm mb-6">
+            <div className="text-content-primary mb-2 text-lg">会话已恢复</div>
+            <div className="text-txt-muted text-sm mb-6">
               上次关闭时的端口转发标签已恢复<br />
               需要重新建立 SSH 连接才能使用
             </div>
@@ -181,7 +181,7 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
                 updateTab(tabId, { needsReconnect: false })
                 // 刷新页面或触发连接逻辑
               }}
-              className="px-6 py-2.5 bg-accent-blue hover:bg-blue-500 text-white rounded-lg transition-colors"
+              className="px-6 py-2.5 bg-surface-baseccent-blue hover:bg-surface-baselue-500 text-content-primary rounded-lg transition-colors"
             >
               重新连接
             </button>
@@ -194,8 +194,8 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
         <div className="flex items-center gap-3">
           <ArrowRightLeft className="w-6 h-6 text-accent-blue" />
           <div>
-            <h2 className="text-lg font-semibold text-white">端口转发</h2>
-            <p className="text-sm text-gray-500">
+            <h2 className="text-lg font-semibold text-content-primary">端口转发</h2>
+            <p className="text-sm text-txt-muted">
               {connection 
                 ? `已连接: ${connection.config.username}@${connection.config.host}` 
                 : '未连接 - 请先建立 SSH 连接'}
@@ -205,7 +205,7 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
         <button
           onClick={() => setShowAddModal(true)}
           disabled={!connection}
-          className="flex items-center gap-2 px-4 py-2 bg-accent-blue hover:bg-blue-600 disabled:bg-dark-700 disabled:text-gray-500 rounded-lg text-sm font-medium transition-colors"
+          className="flex items-center gap-2 px-4 py-2 bg-surface-baseccent-blue hover:bg-surface-baselue-600 disabled:bg-dark-700 disabled:text-txt-muted rounded-lg text-sm font-medium transition-colors"
         >
           <Plus className="w-4 h-4" />
           添加规则
@@ -215,7 +215,7 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
       {/* Rules List */}
       <div className="flex-1 overflow-y-auto p-6">
         {rules.length === 0 ? (
-          <div className="flex flex-col items-center justify-center h-full text-gray-500">
+          <div className="flex flex-col items-center justify-center h-full text-txt-muted">
             <Globe className="w-16 h-16 mb-4 opacity-50" />
             <p className="text-lg">暂无端口转发规则</p>
             <p className="text-sm mt-1">点击右上角添加规则</p>
@@ -235,7 +235,7 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
                   <div className="flex items-center gap-4">
                     {/* Type Icon */}
                     <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${
-                      rule.type === 'local' ? 'bg-blue-500/20 text-blue-400' :
+                      rule.type === 'local' ? 'bg-surface-baselue-500/20 text-blue-400' :
                       rule.type === 'remote' ? 'bg-purple-500/20 text-purple-400' :
                       'bg-orange-500/20 text-orange-400'
                     }`}>
@@ -247,9 +247,9 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
                     {/* Rule Info */}
                     <div>
                       <div className="flex items-center gap-2">
-                        <span className="font-medium text-white">{rule.name}</span>
+                        <span className="font-medium text-content-primary">{rule.name}</span>
                         <span className={`text-xs px-2 py-0.5 rounded ${
-                          rule.type === 'local' ? 'bg-blue-500/20 text-blue-400' :
+                          rule.type === 'local' ? 'bg-surface-baselue-500/20 text-blue-400' :
                           rule.type === 'remote' ? 'bg-purple-500/20 text-purple-400' :
                           'bg-orange-500/20 text-orange-400'
                         }`}>
@@ -262,7 +262,7 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
                           </span>
                         )}
                       </div>
-                      <div className="text-sm text-gray-400 mt-1">
+                      <div className="text-sm text-txt-muted mt-1">
                         {rule.type === 'dynamic' ? (
                           <span>SOCKS5 代理: 127.0.0.1:{rule.localPort}</span>
                         ) : rule.type === 'local' ? (
@@ -320,7 +320,7 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
       {showAddModal && (
         <div className="absolute inset-0 bg-dark-900/90 flex items-center justify-center z-50">
           <div className="bg-dark-800 rounded-xl border border-dark-700 shadow-2xl w-full max-w-md p-6">
-            <h3 className="text-lg font-semibold text-white mb-4">添加端口转发规则</h3>
+            <h3 className="text-lg font-semibold text-content-primary mb-4">添加端口转发规则</h3>
             
             {/* Type Selection */}
             <div className="grid grid-cols-3 gap-2 mb-4">
@@ -334,8 +334,8 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
                   onClick={() => setNewRule({ ...newRule, type: t.type as 'local' | 'remote' | 'dynamic' })}
                   className={`p-3 rounded-lg border text-left transition-colors ${
                     newRule.type === t.type
-                      ? 'bg-accent-blue/20 border-accent-blue text-white'
-                      : 'bg-dark-700 border-dark-600 text-gray-400 hover:bg-dark-600'
+                      ? 'bg-surface-baseccent-blue/20 border-accent-blue text-content-primary'
+                      : 'bg-dark-700 border-dark-600 text-txt-muted hover:bg-dark-600'
                   }`}
                 >
                   <div className="text-sm font-medium">{t.label}</div>
@@ -347,19 +347,19 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
             {/* Form Fields */}
             <div className="space-y-4">
               <div>
-                <label className="block text-sm text-gray-400 mb-1">规则名称</label>
+                <label className="block text-sm text-txt-muted mb-1">规则名称</label>
                 <input
                   type="text"
                   value={newRule.name}
                   onChange={(e) => setNewRule({ ...newRule, name: e.target.value })}
                   placeholder="例如: MySQL 转发"
-                  className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-accent-blue"
+                  className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-content-primary placeholder-ph focus:outline-none focus:border-accent-blue"
                 />
               </div>
 
               <div className="grid grid-cols-2 gap-4">
                 <div>
-                  <label className="block text-sm text-gray-400 mb-1">
+                  <label className="block text-sm text-txt-muted mb-1">
                     {newRule.type === 'remote' ? '远程端口' : '本地端口'}
                   </label>
                   <input
@@ -367,19 +367,19 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
                     value={newRule.localPort || ''}
                     onChange={(e) => setNewRule({ ...newRule, localPort: parseInt(e.target.value) })}
                     placeholder="例如: 3306"
-                    className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-accent-blue"
+                    className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-content-primary placeholder-ph focus:outline-none focus:border-accent-blue"
                   />
                 </div>
 
                 {newRule.type !== 'dynamic' && (
                   <div>
-                    <label className="block text-sm text-gray-400 mb-1">远程端口</label>
+                    <label className="block text-sm text-txt-muted mb-1">远程端口</label>
                     <input
                       type="number"
                       value={newRule.remotePort || ''}
                       onChange={(e) => setNewRule({ ...newRule, remotePort: parseInt(e.target.value) })}
                       placeholder="例如: 3306"
-                      className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-accent-blue"
+                      className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-content-primary placeholder-ph focus:outline-none focus:border-accent-blue"
                     />
                   </div>
                 )}
@@ -387,13 +387,13 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
 
               {newRule.type === 'local' && (
                 <div>
-                  <label className="block text-sm text-gray-400 mb-1">远程主机</label>
+                  <label className="block text-sm text-txt-muted mb-1">远程主机</label>
                   <input
                     type="text"
                     value={newRule.remoteHost}
                     onChange={(e) => setNewRule({ ...newRule, remoteHost: e.target.value })}
                     placeholder="例如: localhost 或 192.168.1.100"
-                    className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-accent-blue"
+                    className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-content-primary placeholder-ph focus:outline-none focus:border-accent-blue"
                   />
                 </div>
               )}
@@ -409,7 +409,7 @@ export default function PortForwardView({ tabId, isActive: _isActive = true }: P
               </button>
               <button
                 onClick={handleAddRule}
-                className="flex-1 px-4 py-2 bg-accent-blue hover:bg-blue-600 rounded-lg text-sm font-medium transition-colors"
+                className="flex-1 px-4 py-2 bg-surface-baseccent-blue hover:bg-surface-baselue-600 rounded-lg text-sm font-medium transition-colors"
               >
                 添加
               </button>
diff --git a/src/components/QuickConnectDialog.tsx b/src/components/QuickConnectDialog.tsx
index 444682e..8fa9ebb 100644
--- a/src/components/QuickConnectDialog.tsx
+++ b/src/components/QuickConnectDialog.tsx
@@ -60,22 +60,22 @@ export default function QuickConnectDialog({ isOpen, onClose }: QuickConnectDial
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-surface-baselack/50 backdrop-blur-sm">
       <div className="w-full max-w-md bg-dark-800 rounded-xl border border-dark-700 shadow-2xl animate-fade-in">
         {/* Header */}
         <div className="flex items-center justify-between p-6 border-b border-dark-700">
           <div className="flex items-center gap-3">
-            <div className="w-10 h-10 bg-accent-blue/20 rounded-lg flex items-center justify-center">
+            <div className="w-10 h-10 bg-surface-baseccent-blue/20 rounded-lg flex items-center justify-center">
               <Zap className="w-5 h-5 text-accent-blue" />
             </div>
             <div>
-              <h2 className="text-lg font-semibold text-gray-200">快速连接</h2>
-              <p className="text-sm text-gray-500">临时连接到服务器</p>
+              <h2 className="text-lg font-semibold text-content-primary">快速连接</h2>
+              <p className="text-sm text-txt-muted">临时连接到服务器</p>
             </div>
           </div>
           <button
             onClick={onClose}
-            className="p-2 hover:bg-dark-700 rounded-lg text-gray-400 hover:text-gray-200 transition-colors"
+            className="p-2 hover:bg-dark-700 rounded-lg text-txt-muted hover:text-content-primary transition-colors"
           >
             <X className="w-5 h-5" />
           </button>
@@ -86,7 +86,7 @@ export default function QuickConnectDialog({ isOpen, onClose }: QuickConnectDial
           {/* Host and Port */}
           <div className="grid grid-cols-3 gap-3">
             <div className="col-span-2">
-              <label className="block text-sm font-medium text-gray-400 mb-1">
+              <label className="block text-sm font-medium text-txt-muted mb-1">
                 <Globe className="inline w-3 h-3 mr-1" />
                 主机地址
               </label>
@@ -97,11 +97,11 @@ export default function QuickConnectDialog({ isOpen, onClose }: QuickConnectDial
                 value={formData.host}
                 onChange={(e) => setFormData({ ...formData, host: e.target.value })}
                 placeholder="192.168.1.1"
-                className="w-full px-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-gray-200 placeholder-gray-600 focus:outline-none focus:border-accent-blue"
+                className="w-full px-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-content-primary placeholder-ph focus:outline-none focus:border-accent-blue"
               />
             </div>
             <div>
-              <label className="block text-sm font-medium text-gray-400 mb-1">
+              <label className="block text-sm font-medium text-txt-muted mb-1">
                 端口
               </label>
               <input
@@ -109,14 +109,14 @@ export default function QuickConnectDialog({ isOpen, onClose }: QuickConnectDial
                 value={formData.port}
                 onChange={(e) => setFormData({ ...formData, port: parseInt(e.target.value) })}
                 placeholder="22"
-                className="w-full px-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-gray-200 focus:outline-none focus:border-accent-blue"
+                className="w-full px-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-content-primary focus:outline-none focus:border-accent-blue"
               />
             </div>
           </div>
 
           {/* Username */}
           <div>
-            <label className="block text-sm font-medium text-gray-400 mb-1">
+            <label className="block text-sm font-medium text-txt-muted mb-1">
               <User className="inline w-3 h-3 mr-1" />
               用户名
             </label>
@@ -126,13 +126,13 @@ export default function QuickConnectDialog({ isOpen, onClose }: QuickConnectDial
               value={formData.username}
               onChange={(e) => setFormData({ ...formData, username: e.target.value })}
               placeholder="root"
-              className="w-full px-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-gray-200 placeholder-gray-600 focus:outline-none focus:border-accent-blue"
+              className="w-full px-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-content-primary placeholder-ph focus:outline-none focus:border-accent-blue"
             />
           </div>
 
           {/* Password */}
           <div>
-            <label className="block text-sm font-medium text-gray-400 mb-1">
+            <label className="block text-sm font-medium text-txt-muted mb-1">
               <Lock className="inline w-3 h-3 mr-1" />
               密码
             </label>
@@ -141,7 +141,7 @@ export default function QuickConnectDialog({ isOpen, onClose }: QuickConnectDial
               value={formData.password}
               onChange={(e) => setFormData({ ...formData, password: e.target.value })}
               placeholder="••••••••"
-              className="w-full px-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-gray-200 placeholder-gray-600 focus:outline-none focus:border-accent-blue"
+              className="w-full px-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-content-primary placeholder-ph focus:outline-none focus:border-accent-blue"
             />
           </div>
 
@@ -155,7 +155,7 @@ export default function QuickConnectDialog({ isOpen, onClose }: QuickConnectDial
 
           {/* Hint */}
           <div className="p-3 bg-dark-700/50 rounded-lg">
-            <p className="text-xs text-gray-500">
+            <p className="text-xs text-txt-muted">
               快速连接不会保存会话信息。如需保存，请使用"新建会话"。
             </p>
           </div>
@@ -165,14 +165,14 @@ export default function QuickConnectDialog({ isOpen, onClose }: QuickConnectDial
             <button
               type="button"
               onClick={onClose}
-              className="px-4 py-2 text-gray-400 hover:text-gray-200 transition-colors"
+              className="px-4 py-2 text-txt-muted hover:text-content-primary transition-colors"
             >
               取消
             </button>
             <button
               type="submit"
               disabled={isConnecting}
-              className="flex items-center gap-2 px-6 py-2 bg-accent-blue hover:bg-blue-600 disabled:opacity-50 rounded-lg text-white font-medium transition-colors"
+              className="flex items-center gap-2 px-6 py-2 bg-surface-baseccent-blue hover:bg-surface-baselue-600 disabled:opacity-50 rounded-lg text-content-primary font-medium transition-colors"
             >
               {isConnecting ? (
                 '连接中...'
diff --git a/src/components/SessionDialog.tsx b/src/components/SessionDialog.tsx
index 2783313..d4e8fa7 100644
--- a/src/components/SessionDialog.tsx
+++ b/src/components/SessionDialog.tsx
@@ -142,22 +142,22 @@ export default function SessionDialog({ isOpen, onClose, editSession }: SessionD
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-surface-baselack/50 backdrop-blur-sm">
       <div className="w-full max-w-lg bg-dark-800 rounded-xl border border-dark-700 shadow-2xl animate-fade-in">
         {/* Header */}
         <div className="flex items-center justify-between p-6 border-b border-dark-700">
           <div className="flex items-center gap-3">
-            <div className="w-10 h-10 bg-accent-green/20 rounded-lg flex items-center justify-center">
+            <div className="w-10 h-10 bg-surface-baseccent-green/20 rounded-lg flex items-center justify-center">
               <Server className="w-5 h-5 text-accent-green" />
             </div>
             <div>
-              <h2 className="text-lg font-semibold text-gray-200">{isEditing ? '编辑会话' : '新建会话'}</h2>
-              <p className="text-sm text-gray-500">{isEditing ? '修改 SSH 连接配置' : '配置 SSH 连接信息'}</p>
+              <h2 className="text-lg font-semibold text-content-primary">{isEditing ? '编辑会话' : '新建会话'}</h2>
+              <p className="text-sm text-txt-muted">{isEditing ? '修改 SSH 连接配置' : '配置 SSH 连接信息'}</p>
             </div>
           </div>
           <button
             onClick={onClose}
-            className="p-2 hover:bg-dark-700 rounded-lg text-gray-400 hover:text-gray-200 transition-colors"
+            className="p-2 hover:bg-dark-700 rounded-lg text-txt-muted hover:text-content-primary transition-colors"
           >
             <X className="w-5 h-5" />
           </button>
@@ -168,7 +168,7 @@ export default function SessionDialog({ isOpen, onClose, editSession }: SessionD
           {/* Basic info */}
           <div className="space-y-4">
             <div>
-              <label className="block text-sm font-medium text-gray-400 mb-1">
+              <label className="block text-sm font-medium text-txt-muted mb-1">
                 会话名称
               </label>
               <input
@@ -177,29 +177,29 @@ export default function SessionDialog({ isOpen, onClose, editSession }: SessionD
                 value={formData.name}
                 onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                 placeholder="例如: 生产服务器"
-                className="w-full px-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-gray-200 placeholder-gray-600 focus:outline-none focus:border-accent-blue"
+                className="w-full px-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-content-primary placeholder-ph focus:outline-none focus:border-accent-blue"
               />
             </div>
 
             <div className="grid grid-cols-3 gap-3">
               <div className="col-span-2">
-                <label className="block text-sm font-medium text-gray-400 mb-1">
+                <label className="block text-sm font-medium text-txt-muted mb-1">
                   主机地址
                 </label>
                 <div className="relative">
-                  <Globe className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                  <Globe className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-txt-muted" />
                   <input
                     type="text"
                     required
                     value={formData.host}
                     onChange={(e) => setFormData({ ...formData, host: e.target.value })}
                     placeholder="192.168.1.1"
-                    className="w-full pl-9 pr-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-gray-200 placeholder-gray-600 focus:outline-none focus:border-accent-blue"
+                    className="w-full pl-9 pr-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-content-primary placeholder-ph focus:outline-none focus:border-accent-blue"
                   />
                 </div>
               </div>
               <div>
-                <label className="block text-sm font-medium text-gray-400 mb-1">
+                <label className="block text-sm font-medium text-txt-muted mb-1">
                   端口
                 </label>
                 <input
@@ -207,24 +207,24 @@ export default function SessionDialog({ isOpen, onClose, editSession }: SessionD
                   value={formData.port}
                   onChange={(e) => setFormData({ ...formData, port: parseInt(e.target.value) })}
                   placeholder="22"
-                  className="w-full px-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-gray-200 focus:outline-none focus:border-accent-blue"
+                  className="w-full px-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-content-primary focus:outline-none focus:border-accent-blue"
                 />
               </div>
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-400 mb-1">
+              <label className="block text-sm font-medium text-txt-muted mb-1">
                 用户名
               </label>
               <div className="relative">
-                <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-txt-muted" />
                 <input
                   type="text"
                   required
                   value={formData.username}
                   onChange={(e) => setFormData({ ...formData, username: e.target.value })}
                   placeholder="root"
-                  className="w-full pl-9 pr-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-gray-200 placeholder-gray-600 focus:outline-none focus:border-accent-blue"
+                  className="w-full pl-9 pr-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-content-primary placeholder-ph focus:outline-none focus:border-accent-blue"
                 />
               </div>
             </div>
@@ -232,7 +232,7 @@ export default function SessionDialog({ isOpen, onClose, editSession }: SessionD
 
           {/* Authentication */}
           <div className="border-t border-dark-700 pt-4">
-            <label className="block text-sm font-medium text-gray-400 mb-2">
+            <label className="block text-sm font-medium text-txt-muted mb-2">
               认证方式
             </label>
             <div className="flex gap-2 mb-4">
@@ -248,8 +248,8 @@ export default function SessionDialog({ isOpen, onClose, editSession }: SessionD
                     onClick={() => setFormData({ ...formData, authType: type.value as AuthType })}
                     className={`flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-lg border text-sm transition-colors ${
                       formData.authType === type.value
-                        ? 'border-accent-blue bg-accent-blue/20 text-accent-blue'
-                        : 'border-dark-700 hover:border-dark-600 text-gray-400'
+                        ? 'border-accent-blue bg-surface-baseccent-blue/20 text-accent-blue'
+                        : 'border-dark-700 hover:border-dark-600 text-txt-muted'
                     }`}
                   >
                     <Icon className="w-4 h-4" />
@@ -261,17 +261,17 @@ export default function SessionDialog({ isOpen, onClose, editSession }: SessionD
 
             {formData.authType === 'password' && (
               <div>
-                <label className="block text-sm font-medium text-gray-400 mb-1">
+                <label className="block text-sm font-medium text-txt-muted mb-1">
                   密码
                 </label>
                 <div className="relative">
-                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-txt-muted" />
                   <input
                     type="password"
                     value={formData.password}
                     onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                     placeholder="••••••••"
-                    className="w-full pl-9 pr-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-gray-200 placeholder-gray-600 focus:outline-none focus:border-accent-blue"
+                    className="w-full pl-9 pr-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-content-primary placeholder-ph focus:outline-none focus:border-accent-blue"
                   />
                 </div>
               </div>
@@ -280,7 +280,7 @@ export default function SessionDialog({ isOpen, onClose, editSession }: SessionD
             {formData.authType === 'key' && (
               <div className="space-y-3">
                 <div>
-                  <label className="block text-sm font-medium text-gray-400 mb-1">
+                  <label className="block text-sm font-medium text-txt-muted mb-1">
                     私钥路径
                   </label>
                   <div className="flex gap-2">
@@ -289,11 +289,11 @@ export default function SessionDialog({ isOpen, onClose, editSession }: SessionD
                       value={formData.privateKey}
                       onChange={(e) => setFormData({ ...formData, privateKey: e.target.value })}
                       placeholder="~/.ssh/id_rsa"
-                      className="flex-1 px-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-gray-200 placeholder-gray-600 focus:outline-none focus:border-accent-blue"
+                      className="flex-1 px-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-content-primary placeholder-ph focus:outline-none focus:border-accent-blue"
                     />
                     <button
                       type="button"
-                      className="px-4 py-2 bg-dark-700 hover:bg-dark-600 rounded-lg text-gray-300 transition-colors"
+                      className="px-4 py-2 bg-dark-700 hover:bg-dark-600 rounded-lg text-content-secondary transition-colors"
                       onClick={async () => {
                         const result = await window.electronAPI?.showOpenDialog({
                           title: '选择私钥文件',
@@ -315,7 +315,7 @@ export default function SessionDialog({ isOpen, onClose, editSession }: SessionD
                   </div>
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-400 mb-1">
+                  <label className="block text-sm font-medium text-txt-muted mb-1">
                     密钥密码 (可选)
                   </label>
                   <input
@@ -323,7 +323,7 @@ export default function SessionDialog({ isOpen, onClose, editSession }: SessionD
                     value={formData.passphrase}
                     onChange={(e) => setFormData({ ...formData, passphrase: e.target.value })}
                     placeholder="••••••••"
-                    className="w-full px-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-gray-200 placeholder-gray-600 focus:outline-none focus:border-accent-blue"
+                    className="w-full px-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-content-primary placeholder-ph focus:outline-none focus:border-accent-blue"
                   />
                 </div>
               </div>
@@ -335,11 +335,11 @@ export default function SessionDialog({ isOpen, onClose, editSession }: SessionD
             <button
               type="button"
               onClick={() => setShowProxySettings(!showProxySettings)}
-              className="flex items-center gap-2 text-sm font-medium text-gray-400 hover:text-gray-200 transition-colors"
+              className="flex items-center gap-2 text-sm font-medium text-txt-muted hover:text-content-primary transition-colors"
             >
               <Shield className="w-4 h-4" />
               代理设置
-              <span className="text-xs text-gray-600">
+              <span className="text-xs text-txt-faint">
                 {formData.proxy.type !== 'none' && formData.proxy.host ? `(已配置 ${formData.proxy.type.toUpperCase()})` : '(未配置)'}
               </span>
               <svg
@@ -372,8 +372,8 @@ export default function SessionDialog({ isOpen, onClose, editSession }: SessionD
                       })}
                       className={`flex-1 px-3 py-1.5 rounded-lg border text-xs transition-colors ${
                         formData.proxy.type === type.value
-                          ? 'border-accent-blue bg-accent-blue/20 text-accent-blue'
-                          : 'border-dark-700 hover:border-dark-600 text-gray-500'
+                          ? 'border-accent-blue bg-surface-baseccent-blue/20 text-accent-blue'
+                          : 'border-dark-700 hover:border-dark-600 text-txt-muted'
                       }`}
                     >
                       {type.label}
@@ -386,7 +386,7 @@ export default function SessionDialog({ isOpen, onClose, editSession }: SessionD
                     {/* Proxy Host & Port */}
                     <div className="grid grid-cols-3 gap-3">
                       <div className="col-span-2">
-                        <label className="block text-xs text-gray-500 mb-1">代理地址</label>
+                        <label className="block text-xs text-txt-muted mb-1">代理地址</label>
                         <input
                           type="text"
                           value={formData.proxy.host}
@@ -395,11 +395,11 @@ export default function SessionDialog({ isOpen, onClose, editSession }: SessionD
                             proxy: { ...formData.proxy, host: e.target.value }
                           })}
                           placeholder="proxy.example.com"
-                          className="w-full px-3 py-1.5 bg-dark-900 border border-dark-700 rounded-lg text-gray-200 text-sm placeholder-gray-600 focus:outline-none focus:border-accent-blue"
+                          className="w-full px-3 py-1.5 bg-dark-900 border border-dark-700 rounded-lg text-content-primary text-sm placeholder-ph focus:outline-none focus:border-accent-blue"
                         />
                       </div>
                       <div>
-                        <label className="block text-xs text-gray-500 mb-1">端口</label>
+                        <label className="block text-xs text-txt-muted mb-1">端口</label>
                         <input
                           type="number"
                           value={formData.proxy.port || ''}
@@ -408,7 +408,7 @@ export default function SessionDialog({ isOpen, onClose, editSession }: SessionD
                             proxy: { ...formData.proxy, port: parseInt(e.target.value) || 0 }
                           })}
                           placeholder={formData.proxy.type === 'http' ? '8080' : '1080'}
-                          className="w-full px-3 py-1.5 bg-dark-900 border border-dark-700 rounded-lg text-gray-200 text-sm placeholder-gray-600 focus:outline-none focus:border-accent-blue"
+                          className="w-full px-3 py-1.5 bg-dark-900 border border-dark-700 rounded-lg text-content-primary text-sm placeholder-ph focus:outline-none focus:border-accent-blue"
                         />
                       </div>
                     </div>
@@ -416,7 +416,7 @@ export default function SessionDialog({ isOpen, onClose, editSession }: SessionD
                     {/* Proxy Auth */}
                     <div className="grid grid-cols-2 gap-3">
                       <div>
-                        <label className="block text-xs text-gray-500 mb-1">代理用户名 (可选)</label>
+                        <label className="block text-xs text-txt-muted mb-1">代理用户名 (可选)</label>
                         <input
                           type="text"
                           value={formData.proxy.username}
@@ -425,11 +425,11 @@ export default function SessionDialog({ isOpen, onClose, editSession }: SessionD
                             proxy: { ...formData.proxy, username: e.target.value }
                           })}
                           placeholder="username"
-                          className="w-full px-3 py-1.5 bg-dark-900 border border-dark-700 rounded-lg text-gray-200 text-sm placeholder-gray-600 focus:outline-none focus:border-accent-blue"
+                          className="w-full px-3 py-1.5 bg-dark-900 border border-dark-700 rounded-lg text-content-primary text-sm placeholder-ph focus:outline-none focus:border-accent-blue"
                         />
                       </div>
                       <div>
-                        <label className="block text-xs text-gray-500 mb-1">代理密码 (可选)</label>
+                        <label className="block text-xs text-txt-muted mb-1">代理密码 (可选)</label>
                         <input
                           type="password"
                           value={formData.proxy.password}
@@ -438,7 +438,7 @@ export default function SessionDialog({ isOpen, onClose, editSession }: SessionD
                             proxy: { ...formData.proxy, password: e.target.value }
                           })}
                           placeholder="password"
-                          className="w-full px-3 py-1.5 bg-dark-900 border border-dark-700 rounded-lg text-gray-200 text-sm placeholder-gray-600 focus:outline-none focus:border-accent-blue"
+                          className="w-full px-3 py-1.5 bg-dark-900 border border-dark-700 rounded-lg text-content-primary text-sm placeholder-ph focus:outline-none focus:border-accent-blue"
                         />
                       </div>
                     </div>
@@ -451,7 +451,7 @@ export default function SessionDialog({ isOpen, onClose, editSession }: SessionD
           {/* Group and tags */}
           <div className="border-t border-dark-700 pt-4 grid grid-cols-2 gap-3">
             <div>
-              <label className="block text-sm font-medium text-gray-400 mb-1">
+              <label className="block text-sm font-medium text-txt-muted mb-1">
                 <Folder className="inline w-3 h-3 mr-1" />
                 分组
               </label>
@@ -460,11 +460,11 @@ export default function SessionDialog({ isOpen, onClose, editSession }: SessionD
                 value={formData.group}
                 onChange={(e) => setFormData({ ...formData, group: e.target.value })}
                 placeholder="default"
-                className="w-full px-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-gray-200 placeholder-gray-600 focus:outline-none focus:border-accent-blue"
+                className="w-full px-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-content-primary placeholder-ph focus:outline-none focus:border-accent-blue"
               />
             </div>
             <div>
-              <label className="block text-sm font-medium text-gray-400 mb-1">
+              <label className="block text-sm font-medium text-txt-muted mb-1">
                 <Tag className="inline w-3 h-3 mr-1" />
                 标签
               </label>
@@ -473,7 +473,7 @@ export default function SessionDialog({ isOpen, onClose, editSession }: SessionD
                 value={formData.tags}
                 onChange={(e) => setFormData({ ...formData, tags: e.target.value })}
                 placeholder="生产, 阿里云"
-                className="w-full px-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-gray-200 placeholder-gray-600 focus:outline-none focus:border-accent-blue"
+                className="w-full px-3 py-2 bg-dark-900 border border-dark-700 rounded-lg text-content-primary placeholder-ph focus:outline-none focus:border-accent-blue"
               />
             </div>
           </div>
@@ -483,14 +483,14 @@ export default function SessionDialog({ isOpen, onClose, editSession }: SessionD
             <button
               type="button"
               onClick={onClose}
-              className="px-4 py-2 text-gray-400 hover:text-gray-200 transition-colors"
+              className="px-4 py-2 text-txt-muted hover:text-content-primary transition-colors"
             >
               取消
             </button>
             <button
               type="submit"
               disabled={isSubmitting}
-              className="px-6 py-2 bg-accent-blue hover:bg-blue-600 disabled:opacity-50 rounded-lg text-white font-medium transition-colors"
+              className="px-6 py-2 bg-surface-baseccent-blue hover:bg-surface-baselue-600 disabled:opacity-50 rounded-lg text-content-primary font-medium transition-colors"
             >
               {isSubmitting ? (isEditing ? '保存中...' : '创建中...') : (isEditing ? '保存' : '创建会话')}
             </button>
diff --git a/src/components/SettingsView.tsx b/src/components/SettingsView.tsx
index 3db75d0..57312b0 100644
--- a/src/components/SettingsView.tsx
+++ b/src/components/SettingsView.tsx
@@ -141,7 +141,7 @@ export default function SettingsView() {
   if (!isLoaded) {
     return (
       <div className="h-full flex items-center justify-center bg-dark-900">
-        <div className="text-gray-400">加载中...</div>
+        <div className="text-txt-muted">加载中...</div>
       </div>
     )
   }
@@ -197,8 +197,8 @@ export default function SettingsView() {
                     onClick={() => setSetting('theme', theme.value as 'dark' | 'light' | 'system')}
                     className={`p-3 rounded-lg border text-sm transition-colors ${
                       settings.theme === theme.value
-                        ? 'border-accent-blue bg-accent-blue/20 text-accent-blue'
-                        : 'border-dark-700/30 hover:border-dark-600 text-gray-300'
+                        ? 'border-accent-blue bg-surface-baseccent-blue/20 text-accent-blue'
+                        : 'border-dark-700/30 hover:border-dark-600 text-content-secondary'
                     }`}
                   >
                     {theme.label}
@@ -212,7 +212,7 @@ export default function SettingsView() {
               <select
                 value={settings.language}
                 onChange={(e) => setSetting('language', e.target.value as 'zh-CN' | 'en-US')}
-                className="w-full mt-3 px-3 py-2 bg-dark-900 border border-dark-700/30 rounded-lg text-gray-300 focus:outline-none focus:border-accent-blue"
+                className="w-full mt-3 px-3 py-2 bg-dark-900 border border-dark-700/30 rounded-lg text-content-secondary focus:outline-none focus:border-accent-blue"
               >
                 <option value="zh-CN">简体中文</option>
                 <option value="en-US">English</option>
@@ -229,11 +229,11 @@ export default function SettingsView() {
               <SettingSectionTitle>字体</SettingSectionTitle>
               <div className="grid grid-cols-2 gap-4 mt-3">
                 <div>
-                  <label className="text-sm text-gray-500">字体族</label>
+                  <label className="text-sm text-txt-muted">字体族</label>
                   <select
                     value={settings.fontFamily}
                     onChange={(e) => setSetting('fontFamily', e.target.value)}
-                    className="w-full mt-1 px-3 py-2 bg-dark-900 border border-dark-700/30 rounded-lg text-gray-300 focus:outline-none focus:border-accent-blue"
+                    className="w-full mt-1 px-3 py-2 bg-dark-900 border border-dark-700/30 rounded-lg text-content-secondary focus:outline-none focus:border-accent-blue"
                   >
                     <option>JetBrains Mono</option>
                     <option>Fira Code</option>
@@ -242,11 +242,11 @@ export default function SettingsView() {
                   </select>
                 </div>
                 <div>
-                  <label className="text-sm text-gray-500">字体大小</label>
+                  <label className="text-sm text-txt-muted">字体大小</label>
                   <select
                     value={settings.fontSize}
                     onChange={(e) => setSetting('fontSize', parseInt(e.target.value))}
-                    className="w-full mt-1 px-3 py-2 bg-dark-900 border border-dark-700/30 rounded-lg text-gray-300 focus:outline-none focus:border-accent-blue"
+                    className="w-full mt-1 px-3 py-2 bg-dark-900 border border-dark-700/30 rounded-lg text-content-secondary focus:outline-none focus:border-accent-blue"
                   >
                     {[12, 13, 14, 15, 16, 18, 20].map((size) => (
                       <option key={size} value={size}>{size}px</option>
@@ -265,8 +265,8 @@ export default function SettingsView() {
                     onClick={() => setSetting('terminalTheme', key as 'dracula' | 'monokai' | 'solarized' | 'one-dark')}
                     className={`p-3 rounded-lg border text-sm transition-colors ${
                       settings.terminalTheme === key
-                        ? 'border-accent-blue bg-accent-blue/20 text-accent-blue'
-                        : 'border-dark-700/30 hover:border-dark-600 text-gray-300'
+                        ? 'border-accent-blue bg-surface-baseccent-blue/20 text-accent-blue'
+                        : 'border-dark-700/30 hover:border-dark-600 text-content-secondary'
                     }`}
                   >
                     <div
@@ -299,7 +299,7 @@ export default function SettingsView() {
               <div className="flex justify-end">
                 <button
                   onClick={() => keybindingState.resetAll()}
-                  className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-gray-400 hover:text-accent-blue rounded-lg hover:bg-dark-700/50 transition-colors"
+                  className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-txt-muted hover:text-accent-blue rounded-lg hover:bg-dark-700/50 transition-colors"
                 >
                   <RotateCcw className="w-3.5 h-3.5" />
                   重置全部为默认
@@ -311,7 +311,7 @@ export default function SettingsView() {
               const defs = getKeybindingsByCategory(category)
               return (
                 <SettingCard key={category}>
-                  <h3 className="text-sm font-semibold text-gray-300 mb-3">{category}</h3>
+                  <h3 className="text-sm font-semibold text-content-secondary mb-3">{category}</h3>
                   <div className="space-y-1">
                     {defs.map((def) => {
                       const currentKeys = allKeys[def.id]
@@ -323,14 +323,14 @@ export default function SettingsView() {
                           key={def.id}
                           className={`flex items-center justify-between px-3 py-2 rounded-lg transition-colors ${
                             isRecordingThis
-                              ? 'bg-accent-blue/10 border border-accent-blue/30'
+                              ? 'bg-surface-baseccent-blue/10 border border-accent-blue/30'
                               : 'hover:bg-dark-800/60'
                           }`}
                         >
                           <div className="flex-1 min-w-0">
-                            <span className="text-sm text-gray-200">{def.label}</span>
+                            <span className="text-sm text-content-primary">{def.label}</span>
                             {isCustom && (
-                              <span className="ml-2 text-[10px] text-accent-blue bg-accent-blue/10 px-1.5 py-0.5 rounded">
+                              <span className="ml-2 text-[10px] text-accent-blue bg-surface-baseccent-blue/10 px-1.5 py-0.5 rounded">
                                 自定义
                               </span>
                             )}
@@ -339,12 +339,12 @@ export default function SettingsView() {
                           <div className="flex items-center gap-2">
                             {isRecordingThis ? (
                               <div className="flex items-center gap-2">
-                                <kbd className="inline-flex items-center px-3 py-1 rounded bg-accent-blue/20 border border-accent-blue/40 text-xs text-accent-blue font-mono animate-pulse">
+                                <kbd className="inline-flex items-center px-3 py-1 rounded bg-surface-baseccent-blue/20 border border-accent-blue/40 text-xs text-accent-blue font-mono animate-pulse">
                                   {recordedKeys || '按下快捷键...'}
                                 </kbd>
                                 <button
                                   onClick={() => stopRecording()}
-                                  className="text-xs text-gray-500 hover:text-gray-300"
+                                  className="text-xs text-txt-muted hover:text-content-secondary"
                                 >
                                   取消
                                 </button>
@@ -368,8 +368,8 @@ export default function SettingsView() {
                                   <kbd
                                     className={`inline-flex items-center px-2.5 py-1 rounded text-xs font-mono transition-colors ${
                                       isCustom
-                                        ? 'bg-accent-blue/10 border border-accent-blue/30 text-accent-blue'
-                                        : 'bg-dark-700 border border-dark-600 text-gray-300'
+                                        ? 'bg-surface-baseccent-blue/10 border border-accent-blue/30 text-accent-blue'
+                                        : 'bg-dark-700 border border-dark-600 text-content-secondary'
                                     } group-hover:border-accent-blue/50`}
                                   >
                                     {currentKeys}
@@ -378,7 +378,7 @@ export default function SettingsView() {
                                 {isCustom && (
                                   <button
                                     onClick={() => keybindingState.resetKeybinding(def.id)}
-                                    className="text-gray-600 hover:text-gray-400 transition-colors"
+                                    className="text-txt-faint hover:text-txt-muted transition-colors"
                                     title="重置为默认"
                                   >
                                     <RotateCcw className="w-3 h-3" />
@@ -398,7 +398,7 @@ export default function SettingsView() {
             {/* 录入确认弹层 */}
             {recordingId && recordedKeys && (
               <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-center gap-3 px-5 py-3 bg-dark-800 border border-dark-600 rounded-xl shadow-2xl">
-                <span className="text-sm text-gray-300">
+                <span className="text-sm text-content-secondary">
                   设置为 <kbd className="px-1.5 py-0.5 rounded bg-dark-700 text-accent-blue font-mono text-xs">{recordedKeys}</kbd>
                 </span>
                 <button
@@ -406,20 +406,20 @@ export default function SettingsView() {
                     await keybindingState.setCustomKeybinding(recordingId, recordedKeys)
                     stopRecording()
                   }}
-                  className="px-3 py-1 text-xs bg-accent-blue text-white rounded-lg hover:bg-accent-blue/80 transition-colors"
+                  className="px-3 py-1 text-xs bg-surface-baseccent-blue text-content-primary rounded-lg hover:bg-surface-baseccent-blue/80 transition-colors"
                 >
                   确认
                 </button>
                 <button
                   onClick={stopRecording}
-                  className="px-3 py-1 text-xs text-gray-400 hover:text-gray-200 rounded-lg hover:bg-dark-700 transition-colors"
+                  className="px-3 py-1 text-xs text-txt-muted hover:text-content-primary rounded-lg hover:bg-dark-700 transition-colors"
                 >
                   取消
                 </button>
               </div>
             )}
 
-            <p className="text-xs text-gray-600">
+            <p className="text-xs text-txt-faint">
               点击快捷键可重新绑定 · 按 Esc 取消录入
             </p>
           </div>
@@ -445,7 +445,7 @@ export default function SettingsView() {
                 type="number"
                 value={settings.defaultPort}
                 onChange={(e) => setSetting('defaultPort', parseInt(e.target.value) || 22)}
-                className="w-32 mt-2 px-3 py-2 bg-dark-900 border border-dark-700/30 rounded-lg text-gray-300 focus:outline-none focus:border-accent-blue"
+                className="w-32 mt-2 px-3 py-2 bg-dark-900 border border-dark-700/30 rounded-lg text-content-secondary focus:outline-none focus:border-accent-blue"
               />
             </SettingCard>
 
@@ -455,7 +455,7 @@ export default function SettingsView() {
                 type="number"
                 value={settings.timeout}
                 onChange={(e) => setSetting('timeout', parseInt(e.target.value) || 30)}
-                className="w-32 mt-2 px-3 py-2 bg-dark-900 border border-dark-700/30 rounded-lg text-gray-300 focus:outline-none focus:border-accent-blue"
+                className="w-32 mt-2 px-3 py-2 bg-dark-900 border border-dark-700/30 rounded-lg text-content-secondary focus:outline-none focus:border-accent-blue"
               />
             </SettingCard>
 
@@ -465,60 +465,60 @@ export default function SettingsView() {
                 <span className="text-accent-blue text-xs font-semibold uppercase tracking-wider">Pro</span>
                 <SettingSectionTitle className="mb-0">连接管理</SettingSectionTitle>
               </div>
-              <p className="text-sm text-gray-500 mb-4">配置连接池行为，优化资源使用和性能</p>
+              <p className="text-sm text-txt-muted mb-4">配置连接池行为，优化资源使用和性能</p>
 
               <div className="space-y-4">
                 <div className="grid grid-cols-2 gap-4">
                   <div>
-                    <label className="text-sm text-gray-500">最大连接数</label>
+                    <label className="text-sm text-txt-muted">最大连接数</label>
                     <input
                       type="number"
                       min={1}
                       max={50}
                       value={settings.maxConnections || 10}
                       onChange={(e) => setSetting('maxConnections', parseInt(e.target.value) || 10)}
-                      className="w-full mt-1 px-3 py-2 bg-dark-900 border border-dark-700/30 rounded-lg text-gray-300 focus:outline-none focus:border-accent-blue"
+                      className="w-full mt-1 px-3 py-2 bg-dark-900 border border-dark-700/30 rounded-lg text-content-secondary focus:outline-none focus:border-accent-blue"
                     />
-                    <div className="text-xs text-gray-600 mt-1">最大并发 SSH 连接数</div>
+                    <div className="text-xs text-txt-faint mt-1">最大并发 SSH 连接数</div>
                   </div>
                   <div>
-                    <label className="text-sm text-gray-500">最大后台连接</label>
+                    <label className="text-sm text-txt-muted">最大后台连接</label>
                     <input
                       type="number"
                       min={1}
                       max={20}
                       value={settings.maxBackgroundConnections || 5}
                       onChange={(e) => setSetting('maxBackgroundConnections', parseInt(e.target.value) || 5)}
-                      className="w-full mt-1 px-3 py-2 bg-dark-900 border border-dark-700/30 rounded-lg text-gray-300 focus:outline-none focus:border-accent-blue"
+                      className="w-full mt-1 px-3 py-2 bg-dark-900 border border-dark-700/30 rounded-lg text-content-secondary focus:outline-none focus:border-accent-blue"
                     />
-                    <div className="text-xs text-gray-600 mt-1">非活跃标签保持连接数</div>
+                    <div className="text-xs text-txt-faint mt-1">非活跃标签保持连接数</div>
                   </div>
                 </div>
 
                 <div className="grid grid-cols-2 gap-4">
                   <div>
-                    <label className="text-sm text-gray-500">空闲超时 (分钟)</label>
+                    <label className="text-sm text-txt-muted">空闲超时 (分钟)</label>
                     <input
                       type="number"
                       min={1}
                       max={120}
                       value={Math.floor((settings.idleTimeoutMs || 5 * 60 * 1000) / 60000)}
                       onChange={(e) => setSetting('idleTimeoutMs', (parseInt(e.target.value) || 5) * 60000)}
-                      className="w-full mt-1 px-3 py-2 bg-dark-900 border border-dark-700/30 rounded-lg text-gray-300 focus:outline-none focus:border-accent-blue"
+                      className="w-full mt-1 px-3 py-2 bg-dark-900 border border-dark-700/30 rounded-lg text-content-secondary focus:outline-none focus:border-accent-blue"
                     />
-                    <div className="text-xs text-gray-600 mt-1">无操作后进入挂起</div>
+                    <div className="text-xs text-txt-faint mt-1">无操作后进入挂起</div>
                   </div>
                   <div>
-                    <label className="text-sm text-gray-500">挂起超时 (分钟)</label>
+                    <label className="text-sm text-txt-muted">挂起超时 (分钟)</label>
                     <input
                       type="number"
                       min={1}
                       max={240}
                       value={Math.floor((settings.suspendTimeoutMs || 30 * 60 * 1000) / 60000)}
                       onChange={(e) => setSetting('suspendTimeoutMs', (parseInt(e.target.value) || 30) * 60000)}
-                      className="w-full mt-1 px-3 py-2 bg-dark-900 border border-dark-700/30 rounded-lg text-gray-300 focus:outline-none focus:border-accent-blue"
+                      className="w-full mt-1 px-3 py-2 bg-dark-900 border border-dark-700/30 rounded-lg text-content-secondary focus:outline-none focus:border-accent-blue"
                     />
-                    <div className="text-xs text-gray-600 mt-1">挂起后自动断开</div>
+                    <div className="text-xs text-txt-faint mt-1">挂起后自动断开</div>
                   </div>
                 </div>
 
@@ -571,11 +571,11 @@ export default function SettingsView() {
             <SettingCard>
               <div className="flex flex-col items-center py-6">
                 <div className="w-20 h-20 bg-dark-700 rounded-2xl flex items-center justify-center mb-4">
-                  <Terminal className="w-10 h-10 text-white" />
+                  <Terminal className="w-10 h-10 text-content-primary" />
                 </div>
-                <h3 className="text-xl font-semibold text-gray-200 mb-1">OpsXShell</h3>
-                <p className="text-sm text-gray-500 mb-4">版本 {appVersion}</p>
-                <p className="text-sm text-gray-400 max-w-md text-center">
+                <h3 className="text-xl font-semibold text-content-primary mb-1">OpsXShell</h3>
+                <p className="text-sm text-txt-muted mb-4">版本 {appVersion}</p>
+                <p className="text-sm text-txt-muted max-w-md text-center">
                   跨平台 SSH/SFTP 终端工具 · 简洁高效 · 安全可靠 · 操作便捷人性化
                 </p>
               </div>
@@ -595,8 +595,8 @@ export default function SettingsView() {
                   ['Lucide React', '0.294+'],
                 ].map(([name, ver]) => (
                   <div key={name} className="flex justify-between py-1 border-b border-dark-700/20">
-                    <span className="text-gray-400">{name}</span>
-                    <span className="text-gray-500 font-mono">{ver}</span>
+                    <span className="text-txt-muted">{name}</span>
+                    <span className="text-txt-muted font-mono">{ver}</span>
                   </div>
                 ))}
               </div>
@@ -604,10 +604,10 @@ export default function SettingsView() {
 
             <SettingCard>
               <SettingSectionTitle>开源许可</SettingSectionTitle>
-              <p className="text-sm text-gray-400 mt-2">
+              <p className="text-sm text-txt-muted mt-2">
                 OpsXShell 基于 MIT 许可证开源。本项目使用了以下开源组件：
               </p>
-              <ul className="mt-2 text-sm text-gray-500 list-disc list-inside space-y-1">
+              <ul className="mt-2 text-sm text-txt-muted list-disc list-inside space-y-1">
                 <li>ssh2 — MIT License</li>
                 <li>xterm.js — MIT License</li>
                 <li>zmodem-ts — MIT License</li>
@@ -631,18 +631,18 @@ export default function SettingsView() {
         {/* 搜索框 */}
         <div className="p-3 border-b border-dark-700/20">
           <div className="relative">
-            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-500" />
+            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-txt-muted" />
             <input
               type="text"
               placeholder="搜索设置..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full pl-8 pr-8 py-1.5 text-sm bg-dark-900 border border-dark-700/30 rounded-lg text-gray-300 placeholder-gray-600 focus:outline-none focus:border-accent-blue/60"
+              className="w-full pl-8 pr-8 py-1.5 text-sm bg-dark-900 border border-dark-700/30 rounded-lg text-content-secondary placeholder-ph focus:outline-none focus:border-accent-blue/60"
             />
             {searchQuery && (
               <button
                 onClick={() => setSearchQuery('')}
-                className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-txt-muted hover:text-content-secondary"
               >
                 <X className="w-3.5 h-3.5" />
               </button>
@@ -661,14 +661,14 @@ export default function SettingsView() {
                 onClick={() => setActiveTab(tab.id)}
                 className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-all ${
                   active
-                    ? 'bg-accent-blue text-white shadow-sm'
-                    : 'text-gray-400 hover:bg-dark-700/50 hover:text-gray-200'
+                    ? 'bg-surface-baseccent-blue text-content-primary shadow-sm'
+                    : 'text-txt-muted hover:bg-dark-700/50 hover:text-content-primary'
                 }`}
               >
-                <Icon className={`w-4 h-4 flex-shrink-0 ${active ? 'text-white' : ''}`} />
+                <Icon className={`w-4 h-4 flex-shrink-0 ${active ? 'text-content-primary' : ''}`} />
                 <div className="min-w-0">
                   <div className="text-sm font-medium truncate">{tab.label}</div>
-                  <div className={`text-xs truncate ${active ? 'text-white/70' : 'text-gray-600'}`}>
+                  <div className={`text-xs truncate ${active ? 'text-content-primary/70' : 'text-txt-faint'}`}>
                     {tab.description}
                   </div>
                 </div>
@@ -682,8 +682,8 @@ export default function SettingsView() {
       <div className="flex-1 flex flex-col min-w-0">
         {/* Header bar */}
         <div className="flex-shrink-0 px-8 pt-6 pb-4 border-b border-dark-700/20">
-          <h1 className="text-xl font-semibold text-gray-100">{currentMeta.label}</h1>
-          <p className="text-sm text-gray-500 mt-0.5">{currentMeta.description}</p>
+          <h1 className="text-xl font-semibold text-content-primary">{currentMeta.label}</h1>
+          <p className="text-sm text-txt-muted mt-0.5">{currentMeta.description}</p>
         </div>
 
         {/* 内容 */}
@@ -727,7 +727,7 @@ function SettingSectionTitle({
   className?: string
 }) {
   return (
-    <div className={`text-sm font-semibold text-gray-300 mb-1 ${className}`}>
+    <div className={`text-sm font-semibold text-content-secondary mb-1 ${className}`}>
       {children}
     </div>
   )
@@ -748,13 +748,13 @@ function SettingToggle({
   return (
     <div className="flex items-center justify-between">
       <div className="mr-4">
-        <div className="font-medium text-gray-200 text-sm">{label}</div>
-        <div className="text-xs text-gray-500 mt-0.5">{description}</div>
+        <div className="font-medium text-content-primary text-sm">{label}</div>
+        <div className="text-xs text-txt-muted mt-0.5">{description}</div>
       </div>
       <button
         onClick={() => onChange(!checked)}
         className={`relative flex-shrink-0 w-11 h-6 rounded-full transition-colors ${
-          checked ? 'bg-accent-blue' : 'bg-dark-600'
+          checked ? 'bg-surface-baseccent-blue' : 'bg-dark-600'
         }`}
       >
         <span
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 55e4866..1cbf5d2 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -185,8 +185,8 @@ export default function Sidebar({ onNewSession, onQuickConnect, onEditSession }:
         {/* Header */}
         <div className="p-4 border-b border-dark-700/20">
           <div className="flex items-center gap-2 mb-4">
-            <div className="w-8 h-8 bg-accent-blue rounded-lg flex items-center justify-center">
-              <Server className="w-5 h-5 text-white" />
+            <div className="w-8 h-8 bg-surface-baseccent-blue rounded-lg flex items-center justify-center">
+              <Server className="w-5 h-5 text-content-primary" />
             </div>
             <span className="font-semibold text-lg">OpsXShell</span>
           </div>
@@ -195,7 +195,7 @@ export default function Sidebar({ onNewSession, onQuickConnect, onEditSession }:
           <div className="flex gap-2">
             <button
               onClick={onQuickConnect}
-              className="flex-1 flex items-center justify-center gap-1 px-3 py-2 bg-accent-blue hover:bg-blue-600 rounded text-sm font-medium transition-colors"
+              className="flex-1 flex items-center justify-center gap-1 px-3 py-2 bg-surface-baseccent-blue hover:bg-surface-baselue-600 rounded text-sm font-medium transition-colors"
             >
               <Zap className="w-4 h-4" />
               快速连接
@@ -235,7 +235,7 @@ export default function Sidebar({ onNewSession, onQuickConnect, onEditSession }:
         <div className="p-3 border-t border-dark-700/20">
           <button
             onClick={() => addTab({ title: '设置', type: 'settings' })}
-            className="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-400 hover:bg-dark-700 rounded transition-colors"
+            className="w-full flex items-center gap-2 px-3 py-2 text-sm text-txt-muted hover:bg-dark-700 rounded transition-colors"
           >
             <Settings className="w-4 h-4" />
             <span>设置</span>
@@ -263,7 +263,7 @@ export default function Sidebar({ onNewSession, onQuickConnect, onEditSession }:
                   w-full px-4 py-2 text-left text-sm transition-colors
                   ${item.danger 
                     ? 'text-red-400 hover:bg-red-500/20' 
-                    : 'text-gray-300 hover:bg-dark-700'
+                    : 'text-content-secondary hover:bg-dark-700'
                   }
                 `}
               >
@@ -279,10 +279,10 @@ export default function Sidebar({ onNewSession, onQuickConnect, onEditSession }:
         onMouseDown={handleResizeStart}
         className={`
           absolute top-0 right-0 bottom-0 w-1 cursor-col-resize
-          hover:bg-accent-blue/50 active:bg-accent-blue/70
+          hover:bg-surface-baseccent-blue/50 active:bg-surface-baseccent-blue/70
           hover:w-1.5 hover:shadow-[0_0_6px_rgba(59,130,246,0.4)]
           transition-all duration-150
-          ${isResizing ? 'bg-accent-blue/70 w-1.5 shadow-[0_0_6px_rgba(59,130,246,0.5)]' : ''}
+          ${isResizing ? 'bg-surface-baseccent-blue/70 w-1.5 shadow-[0_0_6px_rgba(59,130,246,0.5)]' : ''}
         `}
       />
     </div>
diff --git a/src/components/StatusBar.tsx b/src/components/StatusBar.tsx
index 2ba83ea..6f5c80d 100644
--- a/src/components/StatusBar.tsx
+++ b/src/components/StatusBar.tsx
@@ -54,7 +54,7 @@ const STATUS_CONFIG: Record<string, StatusDisplay> = {
   disconnected: {
     icon: <WifiOff className="w-3 h-3" />,
     label: '未连接',
-    colorClass: 'text-gray-400',
+    colorClass: 'text-txt-muted',
     animateClass: '',
   },
 }
@@ -163,7 +163,7 @@ export default function StatusBar() {
     : null
 
   return (
-    <div className="h-7 bg-dark-800 flex items-center px-3 text-xs text-white select-none">
+    <div className="h-7 bg-dark-800 flex items-center px-3 text-xs text-content-primary select-none">
       {/* Left: Connection status area — clickable to toggle ConnectionPanel */}
       <button
         type="button"
@@ -179,21 +179,21 @@ export default function StatusBar() {
         <span className="transition-colors duration-300">{statusCfg.label}</span>
         {hostLabel && (
           <>
-            <span className="text-gray-500 mx-0.5">·</span>
-            <span className="text-gray-300">{hostLabel}</span>
+            <span className="text-txt-muted mx-0.5">·</span>
+            <span className="text-content-secondary">{hostLabel}</span>
           </>
         )}
         {totalConnections > 0 && (
-          <span className="ml-1 px-1.5 py-px rounded-full bg-accent-blue/20 text-accent-blue text-[10px] font-medium">
+          <span className="ml-1 px-1.5 py-px rounded-full bg-surface-baseccent-blue/20 text-accent-blue text-[10px] font-medium">
             {totalConnections}
           </span>
         )}
-        <ChevronUp className="w-3 h-3 text-gray-500 transition-transform duration-200 group-hover:rotate-180" />
+        <ChevronUp className="w-3 h-3 text-txt-muted transition-transform duration-200 group-hover:rotate-180" />
       </button>
 
       {/* Center: Transfer stats */}
       {transferLabel && (
-        <div className="flex items-center gap-1 ml-4 text-gray-400">
+        <div className="flex items-center gap-1 ml-4 text-txt-muted">
           <HardDrive className="w-3 h-3" />
           <span>{transferLabel}</span>
         </div>
@@ -204,11 +204,11 @@ export default function StatusBar() {
 
       {/* Right: Clock + version */}
       <div className="flex items-center gap-4">
-        <div className="flex items-center gap-1 text-gray-400 tabular-nums">
+        <div className="flex items-center gap-1 text-txt-muted tabular-nums">
           <Clock className="w-3 h-3" />
           <span>{formatTime(currentTime)}</span>
         </div>
-        <span className="text-gray-500">OpsXShell v{version}</span>
+        <span className="text-txt-muted">OpsXShell v{version}</span>
       </div>
     </div>
   )
diff --git a/src/components/TabBar.tsx b/src/components/TabBar.tsx
index 9596826..80e208b 100644
--- a/src/components/TabBar.tsx
+++ b/src/components/TabBar.tsx
@@ -137,7 +137,7 @@ function TabBar() {
       {/* Add Tab Button */}
       <button
         onClick={() => addTab({ title: '新标签', type: 'welcome' })}
-        className="flex items-center justify-center w-10 h-10 text-gray-500 hover:text-gray-300 hover:bg-dark-800 transition-colors"
+        className="flex items-center justify-center w-10 h-10 text-txt-muted hover:text-content-secondary hover:bg-dark-800 transition-colors"
       >
         <Plus className="w-5 h-5" />
       </button>
diff --git a/src/components/WelcomeView.tsx b/src/components/WelcomeView.tsx
index 23d509d..b454387 100644
--- a/src/components/WelcomeView.tsx
+++ b/src/components/WelcomeView.tsx
@@ -27,7 +27,7 @@ export default function WelcomeView({ onNewSession, onQuickConnect }: WelcomeVie
     <div className="h-full flex flex-col items-center justify-start bg-dark-900 p-8 overflow-y-auto">
       <div className="text-center mb-12 pt-8">
         <div className="w-20 h-20 bg-dark-700 rounded-2xl flex items-center justify-center mx-auto shadow-lg">
-          <Terminal className="w-10 h-10 text-white" />
+          <Terminal className="w-10 h-10 text-content-primary" />
         </div>
       </div>
 
@@ -36,12 +36,12 @@ export default function WelcomeView({ onNewSession, onQuickConnect }: WelcomeVie
           onClick={onQuickConnect}
           className="flex items-center gap-4 p-6 bg-dark-800 hover:bg-dark-700 rounded-xl border border-dark-700/30 hover:border-accent-blue transition-all group"
         >
-          <div className="w-12 h-12 bg-accent-blue/20 rounded-lg flex items-center justify-center group-hover:bg-accent-blue/30 transition-colors">
+          <div className="w-12 h-12 bg-surface-baseccent-blue/20 rounded-lg flex items-center justify-center group-hover:bg-surface-baseccent-blue/30 transition-colors">
             <Zap className="w-6 h-6 text-accent-blue" />
           </div>
           <div className="text-left">
-            <div className="font-semibold text-gray-200">快速连接</div>
-            <div className="text-sm text-gray-500">输入地址快速建立连接</div>
+            <div className="font-semibold text-content-primary">快速连接</div>
+            <div className="text-sm text-txt-muted">输入地址快速建立连接</div>
           </div>
         </button>
 
@@ -49,12 +49,12 @@ export default function WelcomeView({ onNewSession, onQuickConnect }: WelcomeVie
           onClick={onNewSession}
           className="flex items-center gap-4 p-6 bg-dark-800 hover:bg-dark-700 rounded-xl border border-dark-700/30 hover:border-accent-green transition-all group"
         >
-          <div className="w-12 h-12 bg-accent-green/20 rounded-lg flex items-center justify-center group-hover:bg-accent-green/30 transition-colors">
-            <Plus className="w-6 h-6 text-white" />
+          <div className="w-12 h-12 bg-surface-baseccent-green/20 rounded-lg flex items-center justify-center group-hover:bg-surface-baseccent-green/30 transition-colors">
+            <Plus className="w-6 h-6 text-content-primary" />
           </div>
           <div className="text-left">
-            <div className="font-semibold text-gray-200">新建会话</div>
-            <div className="text-sm text-gray-500">创建并保存新的会话</div>
+            <div className="font-semibold text-content-primary">新建会话</div>
+            <div className="text-sm text-txt-muted">创建并保存新的会话</div>
           </div>
         </button>
 
@@ -62,12 +62,12 @@ export default function WelcomeView({ onNewSession, onQuickConnect }: WelcomeVie
           onClick={() => addTab({ title: 'SFTP', type: 'sftp' })}
           className="flex items-center gap-4 p-6 bg-dark-800 hover:bg-dark-700 rounded-xl border border-dark-700/30 hover:border-accent-purple transition-all group"
         >
-          <div className="w-12 h-12 bg-accent-purple/20 rounded-lg flex items-center justify-center group-hover:bg-accent-purple/30 transition-colors">
+          <div className="w-12 h-12 bg-surface-baseccent-purple/20 rounded-lg flex items-center justify-center group-hover:bg-surface-baseccent-purple/30 transition-colors">
             <FolderSync className="w-6 h-6 text-accent-purple" />
           </div>
           <div className="text-left">
-            <div className="font-semibold text-gray-200">SFTP 传输</div>
-            <div className="text-sm text-gray-500">可视化文件管理</div>
+            <div className="font-semibold text-content-primary">SFTP 传输</div>
+            <div className="text-sm text-txt-muted">可视化文件管理</div>
           </div>
         </button>
 
@@ -79,15 +79,15 @@ export default function WelcomeView({ onNewSession, onQuickConnect }: WelcomeVie
             <ArrowRightLeft className="w-6 h-6 text-orange-400" />
           </div>
           <div className="text-left">
-            <div className="font-semibold text-gray-200">端口转发</div>
-            <div className="text-sm text-gray-500">本地/远程/SOCKS5 代理</div>
+            <div className="font-semibold text-content-primary">端口转发</div>
+            <div className="text-sm text-txt-muted">本地/远程/SOCKS5 代理</div>
           </div>
         </button>
       </div>
 
       {/* Recent connections */}
       <div className="w-full max-w-2xl">
-        <h3 className="text-sm font-medium text-gray-400 mb-4">最近连接</h3>
+        <h3 className="text-sm font-medium text-txt-muted mb-4">最近连接</h3>
         {recentSessions.length === 0 ? (
           <EmptyState
             icon={Clock}
@@ -105,13 +105,13 @@ export default function WelcomeView({ onNewSession, onQuickConnect }: WelcomeVie
                 <div className="flex items-center gap-3">
                   <Globe className="w-5 h-5 text-accent-blue" />
                   <div className="text-left">
-                    <div className="font-medium text-gray-200">{session.name}</div>
-                    <div className="text-sm text-gray-500">
+                    <div className="font-medium text-content-primary">{session.name}</div>
+                    <div className="text-sm text-txt-muted">
                       {session.username}@{session.host}{session.port !== 22 ? `:${session.port}` : ''}
                     </div>
                   </div>
                 </div>
-                <span className="text-xs text-gray-500">--</span>
+                <span className="text-xs text-txt-muted">--</span>
               </button>
             ))}
           </div>
@@ -119,7 +119,7 @@ export default function WelcomeView({ onNewSession, onQuickConnect }: WelcomeVie
       </div>
 
       {/* Shortcuts hint */}
-      <div className="mt-12 flex items-center gap-6 text-sm text-gray-500">
+      <div className="mt-12 flex items-center gap-6 text-sm text-txt-muted">
         <span>快捷键:</span>
         <span><kbd className="px-2 py-1 bg-dark-800 rounded">Ctrl+N</kbd> 新建会话</span>
         <span><kbd className="px-2 py-1 bg-dark-800 rounded">Ctrl+K</kbd> 快速连接</span>
diff --git a/src/components/common/Button.tsx b/src/components/common/Button.tsx
index 17aba34..d4913b6 100644
--- a/src/components/common/Button.tsx
+++ b/src/components/common/Button.tsx
@@ -20,10 +20,10 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 const variantStyles = {
-  primary: 'bg-accent-blue hover:bg-blue-600 text-white',
-  secondary: 'bg-dark-700 hover:bg-dark-600 text-gray-200',
-  danger: 'bg-red-600 hover:bg-red-500 text-white',
-  ghost: 'hover:bg-dark-700 text-gray-400 hover:text-gray-200',
+  primary: 'bg-surface-baseccent-blue hover:bg-surface-baselue-600 text-content-primary',
+  secondary: 'bg-dark-700 hover:bg-dark-600 text-content-primary',
+  danger: 'bg-red-600 hover:bg-red-500 text-content-primary',
+  ghost: 'hover:bg-dark-700 text-txt-muted hover:text-content-primary',
 }
 
 const sizeStyles = {
diff --git a/src/components/common/CommandPalette.tsx b/src/components/common/CommandPalette.tsx
index 874ee44..e3d7af4 100644
--- a/src/components/common/CommandPalette.tsx
+++ b/src/components/common/CommandPalette.tsx
@@ -45,9 +45,9 @@ interface CommandPaletteProps {
 // ─── 类型 badge 颜色映射 ──────────────────────────────────────────────
 
 const TYPE_BADGE: Record<CommandPaletteItemType, { label: string; className: string }> = {
-  command: { label: '命令', className: 'bg-accent-blue/20 text-accent-blue' },
-  session: { label: '会话', className: 'bg-accent-green/20 text-accent-green' },
-  snippet: { label: '片段', className: 'bg-accent-purple/20 text-accent-purple' },
+  command: { label: '命令', className: 'bg-surface-baseccent-blue/20 text-accent-blue' },
+  session: { label: '会话', className: 'bg-surface-baseccent-green/20 text-accent-green' },
+  snippet: { label: '片段', className: 'bg-surface-baseccent-purple/20 text-accent-purple' },
 }
 
 // ─── 组件 ──────────────────────────────────────────────────────────────
@@ -305,7 +305,7 @@ export function CommandPalette({
       onKeyDown={handleKeyDown}
     >
       {/* Backdrop */}
-      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-fade-in" />
+      <div className="absolute inset-0 bg-surface-baselack/60 backdrop-blur-sm animate-fade-in" />
 
       {/* Palette container */}
       <div
@@ -316,18 +316,18 @@ export function CommandPalette({
       >
         {/* Search input */}
         <div className="flex items-center gap-3 px-4 py-3 border-b border-dark-700">
-          <Search size={18} className="text-gray-400 flex-shrink-0" />
+          <Search size={18} className="text-txt-muted flex-shrink-0" />
           <input
             ref={inputRef}
             type="text"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             placeholder="搜索命令、会话或片段..."
-            className="flex-1 bg-transparent text-gray-200 placeholder-gray-500 outline-none text-sm"
+            className="flex-1 bg-transparent text-content-primary placeholder-ph outline-none text-sm"
             autoComplete="off"
             spellCheck={false}
           />
-          <kbd className="hidden sm:inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] text-gray-500 bg-dark-700 rounded border border-dark-600">
+          <kbd className="hidden sm:inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] text-txt-muted bg-dark-700 rounded border border-dark-600">
             ESC
           </kbd>
         </div>
@@ -335,10 +335,10 @@ export function CommandPalette({
         {/* Results list */}
         <div ref={listRef} className="flex-1 overflow-y-auto py-1">
           {filteredItems.length === 0 ? (
-            <div className="flex flex-col items-center justify-center py-12 text-gray-500">
+            <div className="flex flex-col items-center justify-center py-12 text-txt-muted">
               <Search size={32} className="mb-2 opacity-30" />
               <p className="text-sm">没有找到匹配的结果</p>
-              <p className="text-xs text-gray-600 mt-1">试试其他关键词</p>
+              <p className="text-xs text-txt-faint mt-1">试试其他关键词</p>
             </div>
           ) : (
             groupedItems.map((group) => {
@@ -348,14 +348,14 @@ export function CommandPalette({
               return (
                 <div key={group.type}>
                   {/* Group header */}
-                  <div className="flex items-center gap-2 px-4 py-1.5 text-[11px] font-medium text-gray-500 uppercase tracking-wider">
+                  <div className="flex items-center gap-2 px-4 py-1.5 text-[11px] font-medium text-txt-muted uppercase tracking-wider">
                     <span
                       className={`inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold ${TYPE_BADGE[group.type].className}`}
                     >
                       {TYPE_BADGE[group.type].label}
                     </span>
                     <span className="flex-1 h-px bg-dark-700" />
-                    <span className="text-gray-600">{group.items.length}</span>
+                    <span className="text-txt-faint">{group.items.length}</span>
                   </div>
 
                   {/* Group items */}
@@ -369,8 +369,8 @@ export function CommandPalette({
                         className={`
                           flex items-center gap-3 px-4 py-2 cursor-pointer transition-colors duration-75
                           ${isSelected
-                            ? 'bg-accent-blue/15 text-gray-100'
-                            : 'text-gray-300 hover:bg-dark-700'
+                            ? 'bg-surface-baseccent-blue/15 text-content-primary'
+                            : 'text-content-secondary hover:bg-dark-700'
                           }
                         `}
                         onClick={() => {
@@ -382,7 +382,7 @@ export function CommandPalette({
                         {/* Icon */}
                         <span
                           className={`flex-shrink-0 w-5 h-5 flex items-center justify-center ${
-                            isSelected ? 'text-accent-blue' : 'text-gray-500'
+                            isSelected ? 'text-accent-blue' : 'text-txt-muted'
                           }`}
                         >
                           {item.icon}
@@ -392,7 +392,7 @@ export function CommandPalette({
                         <div className="flex-1 min-w-0">
                           <div className="text-sm truncate">{item.label}</div>
                           {item.description && (
-                            <div className="text-[11px] text-gray-500 truncate">
+                            <div className="text-[11px] text-txt-muted truncate">
                               {item.description}
                             </div>
                           )}
@@ -400,7 +400,7 @@ export function CommandPalette({
 
                         {/* Shortcut */}
                         {item.shortcut && (
-                          <kbd className="flex-shrink-0 text-[11px] text-gray-500 bg-dark-700 px-1.5 py-0.5 rounded border border-dark-600">
+                          <kbd className="flex-shrink-0 text-[11px] text-txt-muted bg-dark-700 px-1.5 py-0.5 rounded border border-dark-600">
                             {item.shortcut}
                           </kbd>
                         )}
@@ -421,7 +421,7 @@ export function CommandPalette({
         </div>
 
         {/* Footer hint */}
-        <div className="flex items-center justify-between px-4 py-2 border-t border-dark-700 text-[11px] text-gray-600">
+        <div className="flex items-center justify-between px-4 py-2 border-t border-dark-700 text-[11px] text-txt-faint">
           <div className="flex items-center gap-3">
             <span className="flex items-center gap-1">
               <kbd className="px-1 py-0.5 bg-dark-700 rounded border border-dark-600">↑↓</kbd>
diff --git a/src/components/common/ConfirmDialog.tsx b/src/components/common/ConfirmDialog.tsx
index 7396063..2d9de57 100644
--- a/src/components/common/ConfirmDialog.tsx
+++ b/src/components/common/ConfirmDialog.tsx
@@ -94,7 +94,7 @@ export function useConfirmDialog() {
         {state.danger && (
           <AlertTriangle className="w-5 h-5 text-red-400 mt-0.5 flex-shrink-0" />
         )}
-        <p className="text-gray-300">{state.message}</p>
+        <p className="text-content-secondary">{state.message}</p>
       </div>
     </Modal>
   )
diff --git a/src/components/common/DefaultFallback.tsx b/src/components/common/DefaultFallback.tsx
index ca0850c..d1155e9 100644
--- a/src/components/common/DefaultFallback.tsx
+++ b/src/components/common/DefaultFallback.tsx
@@ -18,13 +18,13 @@ export default function DefaultFallback({ error, onReset }: DefaultFallbackProps
             </svg>
           </div>
           <div>
-            <h2 className="text-lg font-semibold text-gray-200">出错了</h2>
-            <p className="text-sm text-gray-500">应用遇到意外问题</p>
+            <h2 className="text-lg font-semibold text-content-primary">出错了</h2>
+            <p className="text-sm text-txt-muted">应用遇到意外问题</p>
           </div>
         </div>
 
         <div className="bg-dark-900 rounded-lg p-4 mb-4">
-          <p className="text-sm text-gray-300 mb-2">{appError.message}</p>
+          <p className="text-sm text-content-secondary mb-2">{appError.message}</p>
           {appError.recoverable && (
             <p className="text-xs text-green-400">此错误可以恢复，请尝试刷新页面</p>
           )}
@@ -33,19 +33,19 @@ export default function DefaultFallback({ error, onReset }: DefaultFallbackProps
         <div className="flex gap-3">
           <button
             onClick={onReset}
-            className="flex-1 px-4 py-2 bg-accent-blue hover:bg-blue-600 text-white rounded-lg transition-colors text-sm font-medium"
+            className="flex-1 px-4 py-2 bg-surface-baseccent-blue hover:bg-surface-baselue-600 text-content-primary rounded-lg transition-colors text-sm font-medium"
           >
             刷新页面
           </button>
           <button
             onClick={() => window.location.reload()}
-            className="px-4 py-2 bg-dark-700 hover:bg-dark-600 text-gray-300 rounded-lg transition-colors text-sm"
+            className="px-4 py-2 bg-dark-700 hover:bg-dark-600 text-content-secondary rounded-lg transition-colors text-sm"
           >
             重启应用
           </button>
         </div>
 
-        <p className="mt-4 text-xs text-gray-600 text-center">
+        <p className="mt-4 text-xs text-txt-faint text-center">
           如果问题持续存在，请检查日志或联系支持
         </p>
       </div>
diff --git a/src/components/common/EmptyState.tsx b/src/components/common/EmptyState.tsx
index e59b23e..158dccb 100644
--- a/src/components/common/EmptyState.tsx
+++ b/src/components/common/EmptyState.tsx
@@ -38,10 +38,10 @@ export default function EmptyState({
       </div>
 
       {/* 标题 */}
-      <h3 className="text-gray-300 font-medium mb-1">{title}</h3>
+      <h3 className="text-content-secondary font-medium mb-1">{title}</h3>
 
       {/* 描述 */}
-      <p className="text-gray-500 text-sm mb-4 text-center max-w-xs">{description}</p>
+      <p className="text-txt-muted text-sm mb-4 text-center max-w-xs">{description}</p>
 
       {/* 操作按钮 */}
       {action && (
diff --git a/src/components/common/Loading.tsx b/src/components/common/Loading.tsx
index 3d88548..dfa853a 100644
--- a/src/components/common/Loading.tsx
+++ b/src/components/common/Loading.tsx
@@ -50,7 +50,7 @@ export default function Loading({
     <div className={`flex flex-col items-center gap-3 ${className}`}>
       <Loader2 className={`${sizeMap[size].icon} text-accent-blue animate-spin`} />
       {text && (
-        <span className={`${sizeMap[size].text} text-gray-400`}>{text}</span>
+        <span className={`${sizeMap[size].text} text-txt-muted`}>{text}</span>
       )}
     </div>
   )
diff --git a/src/components/common/Modal.tsx b/src/components/common/Modal.tsx
index 3cc56b1..ae1e96e 100644
--- a/src/components/common/Modal.tsx
+++ b/src/components/common/Modal.tsx
@@ -74,7 +74,7 @@ export default function Modal({
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
       {/* 遮罩 */}
       <div 
-        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        className="absolute inset-0 bg-surface-baselack/60 backdrop-blur-sm"
         onClick={onClose}
       />
       
@@ -82,12 +82,12 @@ export default function Modal({
       <div className="relative bg-dark-800 rounded-xl border border-dark-700 shadow-2xl w-full max-w-md">
         {/* 头部 */}
         <div className="flex items-center justify-between px-6 py-4 border-b border-dark-700">
-          <h3 className="text-lg font-semibold text-gray-200">{title}</h3>
+          <h3 className="text-lg font-semibold text-content-primary">{title}</h3>
           <button
             onClick={onClose}
             className="p-1 hover:bg-dark-700 rounded-lg transition-colors"
           >
-            <X className="w-5 h-5 text-gray-400" />
+            <X className="w-5 h-5 text-txt-muted" />
           </button>
         </div>
 
diff --git a/src/components/common/PromptDialog.tsx b/src/components/common/PromptDialog.tsx
index 26be7e8..0d0c49b 100644
--- a/src/components/common/PromptDialog.tsx
+++ b/src/components/common/PromptDialog.tsx
@@ -104,7 +104,7 @@ export function usePromptDialog() {
       cancelText={state.cancelText}
     >
       <div>
-        <p className="text-gray-300 mb-3">{state.message}</p>
+        <p className="text-content-secondary mb-3">{state.message}</p>
         <input
           ref={inputRef}
           type="text"
@@ -112,7 +112,7 @@ export function usePromptDialog() {
           onChange={(e) => setState((prev) => ({ ...prev, value: e.target.value }))}
           onKeyDown={handleKeyDown}
           placeholder={state.placeholder}
-          className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-accent-blue"
+          className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-content-primary placeholder-ph focus:outline-none focus:border-accent-blue"
         />
       </div>
     </Modal>
diff --git a/src/components/common/Skeleton.tsx b/src/components/common/Skeleton.tsx
index a3e0cda..0f984d9 100644
--- a/src/components/common/Skeleton.tsx
+++ b/src/components/common/Skeleton.tsx
@@ -257,7 +257,7 @@ export function TabContentSkeleton({ className }: TabContentSkeletonProps) {
   return (
     <div
       className={mergeClass(
-        'flex-1 bg-[#1a1b26] p-4 flex flex-col gap-1.5 font-mono text-sm',
+        'flex-1 bg-surface-base p-4 flex flex-col gap-1.5 font-mono text-sm',
         className,
       )}
     >
@@ -287,7 +287,7 @@ export function TabContentSkeleton({ className }: TabContentSkeletonProps) {
       <div className="flex items-center gap-2 mt-1">
         <span className="text-accent-green/40 select-none">$</span>
         <span
-          className="inline-block w-2 h-4 bg-gray-400 animate-pulse"
+          className="inline-block w-2 h-4 bg-surface-active animate-pulse"
         />
       </div>
     </div>
diff --git a/src/components/common/Toast.tsx b/src/components/common/Toast.tsx
index 32d59b8..4d75a76 100644
--- a/src/components/common/Toast.tsx
+++ b/src/components/common/Toast.tsx
@@ -32,13 +32,13 @@ const colorMap: Record<ToastType, { bg: string; border: string; icon: string; te
     text: 'text-red-200',
   },
   warning: {
-    bg: 'bg-amber-900/40',
+    bg: 'bg-surface-basember-900/40',
     border: 'border-amber-700/60',
     icon: 'text-amber-400',
     text: 'text-amber-200',
   },
   info: {
-    bg: 'bg-blue-900/40',
+    bg: 'bg-surface-baselue-900/40',
     border: 'border-blue-700/60',
     icon: 'text-blue-400',
     text: 'text-blue-200',
@@ -109,7 +109,7 @@ function ToastItemView({ toast, onClose }: ToastItemProps) {
         className="p-0.5 rounded hover:bg-white/10 transition-colors shrink-0"
         aria-label="关闭通知"
       >
-        <X className="w-4 h-4 text-gray-400 hover:text-gray-200" />
+        <X className="w-4 h-4 text-txt-muted hover:text-content-primary" />
       </button>
     </div>
   )
diff --git a/src/components/common/ToastContainer.tsx b/src/components/common/ToastContainer.tsx
index fba3849..340b213 100644
--- a/src/components/common/ToastContainer.tsx
+++ b/src/components/common/ToastContainer.tsx
@@ -18,7 +18,7 @@ const iconMap: Record<ToastType, React.ReactNode> = {
 }
 
 const bgMap: Record<ToastType, string> = {
-  info: 'bg-blue-900/80 border-blue-700',
+  info: 'bg-surface-baselue-900/80 border-blue-700',
   success: 'bg-green-900/80 border-green-700',
   error: 'bg-red-900/80 border-red-700',
   warning: 'bg-yellow-900/80 border-yellow-700',
@@ -32,7 +32,7 @@ export function ToastContainer({ toasts, onRemove }: ToastContainerProps) {
       {toasts.map((toast) => (
         <div
           key={toast.id}
-          className={`pointer-events-auto flex items-center gap-2 px-4 py-3 rounded-lg border shadow-lg backdrop-blur-sm text-sm text-white min-w-[280px] max-w-[400px] animate-fade-in ${bgMap[toast.type]}`}
+          className={`pointer-events-auto flex items-center gap-2 px-4 py-3 rounded-lg border shadow-lg backdrop-blur-sm text-sm text-content-primary min-w-[280px] max-w-[400px] animate-fade-in ${bgMap[toast.type]}`}
         >
           {iconMap[toast.type]}
           <span className="flex-1">{toast.message}</span>
@@ -40,7 +40,7 @@ export function ToastContainer({ toasts, onRemove }: ToastContainerProps) {
             onClick={() => onRemove(toast.id)}
             className="p-0.5 hover:bg-white/10 rounded"
           >
-            <X className="w-3.5 h-3.5 text-gray-300" />
+            <X className="w-3.5 h-3.5 text-content-secondary" />
           </button>
         </div>
       ))}
diff --git a/src/components/sftp/Breadcrumb.tsx b/src/components/sftp/Breadcrumb.tsx
index 8471f18..35b272f 100644
--- a/src/components/sftp/Breadcrumb.tsx
+++ b/src/components/sftp/Breadcrumb.tsx
@@ -20,11 +20,11 @@ export function Breadcrumb({ path, onNavigate, onHome }: BreadcrumbProps) {
         className="p-1.5 hover:bg-dark-700 rounded transition-colors flex-shrink-0"
         title="主目录"
       >
-        <Home className="w-4 h-4 text-gray-400" />
+        <Home className="w-4 h-4 text-txt-muted" />
       </button>
       <button
         onClick={() => onNavigate('/')}
-        className="px-1.5 py-0.5 hover:bg-dark-700 rounded text-gray-400 hover:text-dark-200 transition-colors"
+        className="px-1.5 py-0.5 hover:bg-dark-700 rounded text-txt-muted hover:text-dark-200 transition-colors"
       >
         /
       </button>
@@ -33,7 +33,7 @@ export function Breadcrumb({ path, onNavigate, onHome }: BreadcrumbProps) {
           <ChevronRight className="w-3 h-3 text-dark-600 mx-0.5 flex-shrink-0" />
           <button
             onClick={() => onNavigate('/' + parts.slice(0, index + 1).join('/'))}
-            className="px-1.5 py-0.5 hover:bg-dark-700 rounded text-gray-200 hover:text-white transition-colors truncate max-w-[120px]"
+            className="px-1.5 py-0.5 hover:bg-dark-700 rounded text-content-primary hover:text-content-primary transition-colors truncate max-w-[120px]"
           >
             {part}
           </button>
diff --git a/src/components/sftp/ChmodDialog.tsx b/src/components/sftp/ChmodDialog.tsx
index 92e3d1e..af136bf 100644
--- a/src/components/sftp/ChmodDialog.tsx
+++ b/src/components/sftp/ChmodDialog.tsx
@@ -108,7 +108,7 @@ export default function ChmodDialog({
         onChange={() => togglePerm(scope, perm)}
         className="w-4 h-4 rounded border-dark-500 bg-dark-700 text-accent-blue focus:ring-accent-blue focus:ring-offset-0"
       />
-      <span className="text-gray-300 text-sm">{label}</span>
+      <span className="text-content-secondary text-sm">{label}</span>
     </label>
   )
 
@@ -120,7 +120,7 @@ export default function ChmodDialog({
     label: string
   }) => (
     <div className="flex items-center gap-4">
-      <span className="text-gray-400 w-16 text-sm">{label}</span>
+      <span className="text-txt-muted w-16 text-sm">{label}</span>
       <PermCheckbox scope={scope} perm="read" label="读取" />
       <PermCheckbox scope={scope} perm="write" label="写入" />
       <PermCheckbox scope={scope} perm="execute" label="执行" />
@@ -141,14 +141,14 @@ export default function ChmodDialog({
         <div className="flex items-center gap-3 pb-3 border-b border-dark-600/30">
           <Shield className="w-5 h-5 text-accent-blue" />
           <div className="min-w-0 flex-1">
-            <p className="text-white font-medium truncate">{fileName}</p>
-            <p className="text-gray-500 text-xs font-mono truncate">{filePath}</p>
+            <p className="text-content-primary font-medium truncate">{fileName}</p>
+            <p className="text-txt-muted text-xs font-mono truncate">{filePath}</p>
           </div>
         </div>
 
         {/* Current octal mode display */}
         <div className="flex items-center justify-center gap-2 py-2">
-          <span className="text-gray-400 text-sm">当前权限:</span>
+          <span className="text-txt-muted text-sm">当前权限:</span>
           <span className="text-accent-blue font-mono font-bold text-lg">{octalString}</span>
         </div>
 
@@ -156,9 +156,9 @@ export default function ChmodDialog({
         <div className="space-y-3 bg-dark-700 rounded-lg p-4">
           <div className="flex items-center gap-4">
             <span className="w-16" />
-            <span className="text-gray-500 text-xs w-16">读取 (r)</span>
-            <span className="text-gray-500 text-xs w-16">写入 (w)</span>
-            <span className="text-gray-500 text-xs w-16">执行 (x)</span>
+            <span className="text-txt-muted text-xs w-16">读取 (r)</span>
+            <span className="text-txt-muted text-xs w-16">写入 (w)</span>
+            <span className="text-txt-muted text-xs w-16">执行 (x)</span>
           </div>
           <PermRow scope="owner" label="所有者" />
           <PermRow scope="group" label="所属组" />
diff --git a/src/components/sftp/ConnectionPanel.tsx b/src/components/sftp/ConnectionPanel.tsx
index 4f37a33..b23de8f 100644
--- a/src/components/sftp/ConnectionPanel.tsx
+++ b/src/components/sftp/ConnectionPanel.tsx
@@ -42,7 +42,7 @@ export function ConnectionPanel({
   // Connecting State
   if (isConnecting) {
     return (
-      <div className="flex items-center gap-2 px-4 py-2 bg-accent-blue/10 border-b border-accent-blue/20">
+      <div className="flex items-center gap-2 px-4 py-2 bg-surface-baseccent-blue/10 border-b border-accent-blue/20">
         <Loader2 className="w-4 h-4 text-accent-blue animate-spin" />
         <span className="text-sm text-accent-blue">连接中...</span>
       </div>
@@ -71,10 +71,10 @@ export function ConnectionPanel({
   return (
     <>
       <div className="flex items-center justify-between px-4 py-2 bg-dark-800 border-b border-dark-700/30">
-        <span className="text-sm text-gray-400">未连接</span>
+        <span className="text-sm text-txt-muted">未连接</span>
         <button
           onClick={onShowSelector}
-          className="px-3 py-1.5 bg-accent-blue hover:bg-blue-600 rounded text-sm font-medium transition-colors"
+          className="px-3 py-1.5 bg-surface-baseccent-blue hover:bg-surface-baselue-600 rounded text-sm font-medium transition-colors"
         >
           选择服务器
         </button>
diff --git a/src/components/sftp/ConnectionSelector.tsx b/src/components/sftp/ConnectionSelector.tsx
index 2de403a..ceabbcf 100644
--- a/src/components/sftp/ConnectionSelector.tsx
+++ b/src/components/sftp/ConnectionSelector.tsx
@@ -16,14 +16,14 @@ export function ConnectionSelector({ sessions, onSelect, onClose }: ConnectionSe
     <div className="absolute inset-0 bg-dark-900/90 flex items-center justify-center z-40">
       <div className="bg-dark-800 rounded-xl border border-dark-700 shadow-2xl w-full max-w-md overflow-hidden">
         <div className="flex items-center justify-between px-6 py-4 border-b border-dark-700/30">
-          <h3 className="text-lg font-medium text-white">选择服务器</h3>
+          <h3 className="text-lg font-medium text-content-primary">选择服务器</h3>
           <button onClick={onClose} className="p-1 hover:bg-dark-700 rounded">
-            <X className="w-5 h-5 text-gray-400" />
+            <X className="w-5 h-5 text-txt-muted" />
           </button>
         </div>
         <div className="p-4 max-h-80 overflow-y-auto">
           {sessions.length === 0 ? (
-            <div className="text-center py-8 text-gray-500">
+            <div className="text-center py-8 text-txt-muted">
               <Monitor className="w-12 h-12 mx-auto mb-3 opacity-50" />
               <p>暂无保存的会话</p>
               <p className="text-sm mt-1">请先在侧边栏创建会话</p>
@@ -38,12 +38,12 @@ export function ConnectionSelector({ sessions, onSelect, onClose }: ConnectionSe
                 >
                   <Monitor className="w-8 h-8 text-cyan-400 flex-shrink-0" />
                   <div className="flex-1 min-w-0">
-                    <div className="text-slate-200 font-medium truncate group-hover:text-white">{session.name}</div>
-                    <div className="text-sm text-gray-500 truncate">
+                    <div className="text-slate-200 font-medium truncate group-hover:text-content-primary">{session.name}</div>
+                    <div className="text-sm text-txt-muted truncate">
                       {session.username}@{session.host}:{session.port}
                     </div>
                   </div>
-                  <ChevronRight className="w-5 h-5 text-slate-600 group-hover:text-gray-400 transition-colors" />
+                  <ChevronRight className="w-5 h-5 text-slate-600 group-hover:text-txt-muted transition-colors" />
                 </button>
               ))}
             </div>
diff --git a/src/components/sftp/ContextMenu.tsx b/src/components/sftp/ContextMenu.tsx
index 6349d75..7901a22 100644
--- a/src/components/sftp/ContextMenu.tsx
+++ b/src/components/sftp/ContextMenu.tsx
@@ -56,7 +56,7 @@ export function ContextMenu({ x, y, items, onClose }: ContextMenuProps) {
               onClose()
             }}
             className={`w-full flex items-center gap-3 px-4 py-2 text-sm transition-colors ${
-              item.danger ? 'text-red-400 hover:bg-red-500/20' : 'text-gray-200 hover:bg-dark-700 hover:text-white'
+              item.danger ? 'text-red-400 hover:bg-red-500/20' : 'text-content-primary hover:bg-dark-700 hover:text-content-primary'
             }`}
           >
             {item.icon}
diff --git a/src/components/sftp/FileListPanel.tsx b/src/components/sftp/FileListPanel.tsx
index 23f27d2..e502605 100644
--- a/src/components/sftp/FileListPanel.tsx
+++ b/src/components/sftp/FileListPanel.tsx
@@ -156,7 +156,7 @@ export function FileListPanel({
       </div>
 
       {/* Column Headers */}
-      <div className="flex items-center px-4 py-2 border-b border-dark-700/20 text-xs text-gray-400">
+      <div className="flex items-center px-4 py-2 border-b border-dark-700/20 text-xs text-txt-muted">
         <SortHeader sortField={sortField} sortOrder={sortOrder} onSort={onSort} />
       </div>
 
@@ -185,7 +185,7 @@ export function FileListPanel({
 
         {/* Drag overlay - pointer-events-none so it doesn't interfere with drop events */}
         {isDragOver && (
-          <div className="absolute inset-0 bg-accent-blue/10 border-2 border-dashed border-accent-blue rounded-lg flex items-center justify-center pointer-events-none z-10">
+          <div className="absolute inset-0 bg-surface-baseccent-blue/10 border-2 border-dashed border-accent-blue rounded-lg flex items-center justify-center pointer-events-none z-10">
             <div className="flex flex-col items-center gap-2 text-accent-blue">
               <Upload className="w-10 h-10" />
               <span className="text-sm font-medium">拖拽文件到此处上传</span>
@@ -195,7 +195,7 @@ export function FileListPanel({
       </div>
 
       {/* Status Bar */}
-      <div className="px-4 py-2 border-t border-dark-700/20 text-xs text-gray-400">
+      <div className="px-4 py-2 border-t border-dark-700/20 text-xs text-txt-muted">
         {loading ? '加载中...' : selected.size > 0 ? `已选择 ${selected.size} 项` : `共 ${files.length} 项`}
       </div>
 
diff --git a/src/components/sftp/FilePropertiesDialog.tsx b/src/components/sftp/FilePropertiesDialog.tsx
index d1b3a82..8c2c484 100644
--- a/src/components/sftp/FilePropertiesDialog.tsx
+++ b/src/components/sftp/FilePropertiesDialog.tsx
@@ -128,13 +128,13 @@ export default function FilePropertiesDialog({
             <TypeIcon className="w-8 h-8 text-accent-blue" />
           </div>
           <div className="min-w-0 flex-1">
-            <p className="text-white font-semibold truncate">{fileName}</p>
-            <p className="text-gray-400 text-xs">{typeLabel}</p>
+            <p className="text-content-primary font-semibold truncate">{fileName}</p>
+            <p className="text-txt-muted text-xs">{typeLabel}</p>
           </div>
         </div>
 
         {loading && (
-          <div className="flex items-center gap-2 text-gray-400 text-sm">
+          <div className="flex items-center gap-2 text-txt-muted text-sm">
             <div className="animate-spin h-4 w-4 border-2 border-accent-blue border-t-transparent rounded-full" />
             <span>加载详细信息...</span>
           </div>
@@ -169,10 +169,10 @@ function PropertyRow({
 }) {
   return (
     <div className="flex items-start gap-3">
-      <span className="text-gray-500 mt-0.5 shrink-0">{icon}</span>
-      <span className="text-gray-400 w-20 shrink-0">{label}</span>
+      <span className="text-txt-muted mt-0.5 shrink-0">{icon}</span>
+      <span className="text-txt-muted w-20 shrink-0">{label}</span>
       <span
-        className={`text-gray-200 break-all ${monospace ? 'font-mono text-xs' : ''}`}
+        className={`text-content-primary break-all ${monospace ? 'font-mono text-xs' : ''}`}
       >
         {value}
       </span>
diff --git a/src/components/sftp/FileRow.tsx b/src/components/sftp/FileRow.tsx
index 5b93cb3..5f10648 100644
--- a/src/components/sftp/FileRow.tsx
+++ b/src/components/sftp/FileRow.tsx
@@ -24,7 +24,7 @@ export function FileRow({ file, isSelected, onSelect, onOpen, onContextMenu, onD
       draggable={file.type === 'file'}
       onDragStart={onDragStart}
       className={`h-10 flex items-center px-4 cursor-pointer border-b border-dark-700/20 transition-colors group ${
-        isSelected ? 'bg-accent-blue/20 hover:bg-accent-blue/25' : 'hover:bg-dark-700/50'
+        isSelected ? 'bg-surface-baseccent-blue/20 hover:bg-surface-baseccent-blue/25' : 'hover:bg-dark-700/50'
       }`}
     >
       <div className="flex-1 flex items-center gap-2 min-w-0">
@@ -33,16 +33,16 @@ export function FileRow({ file, isSelected, onSelect, onOpen, onContextMenu, onD
         ) : file.type === 'symlink' ? (
           <Folder className="w-4 h-4 text-yellow-400 flex-shrink-0" />
         ) : (
-          <File className="w-4 h-4 text-gray-400 flex-shrink-0" />
+          <File className="w-4 h-4 text-txt-muted flex-shrink-0" />
         )}
-        <span className="text-sm text-gray-200 truncate group-hover:text-white">{file.name}</span>
+        <span className="text-sm text-content-primary truncate group-hover:text-content-primary">{file.name}</span>
         {file.type === 'symlink' && <span className="text-xs text-yellow-500">→</span>}
       </div>
-      <div className="w-32 text-right text-xs text-gray-500">{formatDate(file.modified)}</div>
-      <div className="w-24 text-right text-xs text-gray-500">
+      <div className="w-32 text-right text-xs text-txt-muted">{formatDate(file.modified)}</div>
+      <div className="w-24 text-right text-xs text-txt-muted">
         {file.type === 'directory' ? '--' : formatSize(file.size)}
       </div>
-      <div className="w-24 text-right text-xs text-gray-500 font-mono">
+      <div className="w-24 text-right text-xs text-txt-muted font-mono">
         {file.type === 'directory'
           ? '文件夹'
           : file.type === 'symlink'
diff --git a/src/components/sftp/SortHeader.tsx b/src/components/sftp/SortHeader.tsx
index b46ef10..a9622ba 100644
--- a/src/components/sftp/SortHeader.tsx
+++ b/src/components/sftp/SortHeader.tsx
@@ -20,12 +20,12 @@ export function SortHeader({ onSort, sortField, sortOrder }: SortHeaderProps) {
   ]
 
   return (
-    <div className="h-9 flex items-center px-4 bg-dark-700/50 text-xs text-gray-500 border-b border-dark-700/30 select-none">
+    <div className="h-9 flex items-center px-4 bg-dark-700/50 text-xs text-txt-muted border-b border-dark-700/30 select-none">
       {fields.map(({ key, label, width, align }) => (
         <button
           key={key}
           onClick={() => onSort(key)}
-          className={`${width} flex items-center justify-${align} gap-1 hover:text-gray-200 transition-colors`}
+          className={`${width} flex items-center justify-${align} gap-1 hover:text-content-primary transition-colors`}
         >
           <span>{label}</span>
           {sortField === key && (sortOrder === 'asc' ? <ArrowUp className="w-3 h-3" /> : <ArrowDown className="w-3 h-3" />)}
diff --git a/src/components/sftp/Toolbar.tsx b/src/components/sftp/Toolbar.tsx
index 8028c60..891fc5c 100644
--- a/src/components/sftp/Toolbar.tsx
+++ b/src/components/sftp/Toolbar.tsx
@@ -21,7 +21,7 @@ export function Toolbar({ isConnected, onUpload, onDownload, onRefresh, onNewFol
         <button
           onClick={onUpload}
           disabled={!isConnected}
-          className="flex items-center gap-1.5 px-3 py-1.5 bg-accent-blue hover:bg-blue-600 disabled:bg-dark-700 disabled:text-gray-500 rounded text-sm font-medium transition-colors"
+          className="flex items-center gap-1.5 px-3 py-1.5 bg-surface-baseccent-blue hover:bg-surface-baselue-600 disabled:bg-dark-700 disabled:text-txt-muted rounded text-sm font-medium transition-colors"
         >
           <Upload className="w-4 h-4" />
           上传
@@ -29,7 +29,7 @@ export function Toolbar({ isConnected, onUpload, onDownload, onRefresh, onNewFol
         <button
           onClick={onDownload}
           disabled={!isConnected}
-          className="flex items-center gap-1.5 px-3 py-1.5 bg-dark-700 hover:bg-dark-600 disabled:text-gray-500 rounded text-sm font-medium transition-colors"
+          className="flex items-center gap-1.5 px-3 py-1.5 bg-dark-700 hover:bg-dark-600 disabled:text-txt-muted rounded text-sm font-medium transition-colors"
         >
           <Download className="w-4 h-4" />
           下载
@@ -37,7 +37,7 @@ export function Toolbar({ isConnected, onUpload, onDownload, onRefresh, onNewFol
         <button
           onClick={onRefresh}
           disabled={!isConnected}
-          className="flex items-center gap-1.5 px-3 py-1.5 bg-dark-700 hover:bg-dark-600 disabled:text-gray-500 rounded text-sm font-medium transition-colors"
+          className="flex items-center gap-1.5 px-3 py-1.5 bg-dark-700 hover:bg-dark-600 disabled:text-txt-muted rounded text-sm font-medium transition-colors"
         >
           <RefreshCw className="w-4 h-4" />
           刷新
@@ -45,7 +45,7 @@ export function Toolbar({ isConnected, onUpload, onDownload, onRefresh, onNewFol
         <button
           onClick={onNewFolder}
           disabled={!isConnected}
-          className="flex items-center gap-1.5 px-3 py-1.5 bg-dark-700 hover:bg-dark-600 disabled:text-gray-500 rounded text-sm font-medium transition-colors"
+          className="flex items-center gap-1.5 px-3 py-1.5 bg-dark-700 hover:bg-dark-600 disabled:text-txt-muted rounded text-sm font-medium transition-colors"
         >
           <FolderPlus className="w-4 h-4" />
           新建文件夹
diff --git a/src/components/sftp/TransferItem.tsx b/src/components/sftp/TransferItem.tsx
index c9a3e82..f899069 100644
--- a/src/components/sftp/TransferItem.tsx
+++ b/src/components/sftp/TransferItem.tsx
@@ -21,19 +21,19 @@ export function TransferItem({ task, onCancel, onRemove }: TransferItemProps) {
         {task.type === 'download' ? <Download className="w-4 h-4" /> : <Upload className="w-4 h-4" />}
       </div>
       <div className="flex-1 min-w-0">
-        <div className="text-sm text-gray-200 truncate">{task.fileName}</div>
+        <div className="text-sm text-content-primary truncate">{task.fileName}</div>
         <div className="flex items-center gap-2 mt-0.5">
           {isActive && (
             <>
               <div className="flex-1 h-1.5 bg-dark-700 rounded-full overflow-hidden max-w-[120px]">
-                <div className="h-full bg-accent-blue transition-all duration-300" style={{ width: `${task.progress}%` }} />
+                <div className="h-full bg-surface-baseccent-blue transition-all duration-300" style={{ width: `${task.progress}%` }} />
               </div>
-              <span className="text-xs text-gray-500">{task.progress}%</span>
-              {task.speed !== undefined && <span className="text-xs text-gray-500">{formatSpeed(task.speed)}</span>}
+              <span className="text-xs text-txt-muted">{task.progress}%</span>
+              {task.speed !== undefined && <span className="text-xs text-txt-muted">{formatSpeed(task.speed)}</span>}
             </>
           )}
           {task.status === 'pending' && (
-            <span className="text-xs text-gray-500 flex items-center gap-1">
+            <span className="text-xs text-txt-muted flex items-center gap-1">
               <Clock className="w-3 h-3" />
               等待中
             </span>
@@ -51,7 +51,7 @@ export function TransferItem({ task, onCancel, onRemove }: TransferItemProps) {
             </span>
           )}
           {task.status === 'canceled' && (
-            <span className="text-xs text-gray-500 flex items-center gap-1">
+            <span className="text-xs text-txt-muted flex items-center gap-1">
               <XCircle className="w-3 h-3" />
               已取消
             </span>
@@ -62,7 +62,7 @@ export function TransferItem({ task, onCancel, onRemove }: TransferItemProps) {
         {task.status === 'transferring' && (
           <button
             onClick={onCancel}
-            className="p-1.5 hover:bg-dark-700 rounded text-gray-400 hover:text-red-400"
+            className="p-1.5 hover:bg-dark-700 rounded text-txt-muted hover:text-red-400"
             title="取消"
           >
             <X className="w-3.5 h-3.5" />
@@ -71,7 +71,7 @@ export function TransferItem({ task, onCancel, onRemove }: TransferItemProps) {
         {(task.status === 'completed' || task.status === 'failed' || task.status === 'canceled') && (
           <button
             onClick={onRemove}
-            className="p-1.5 hover:bg-dark-700 rounded text-gray-400 hover:text-gray-200"
+            className="p-1.5 hover:bg-dark-700 rounded text-txt-muted hover:text-content-primary"
             title="移除"
           >
             <X className="w-3.5 h-3.5" />
diff --git a/src/components/sftp/TransferPanel.tsx b/src/components/sftp/TransferPanel.tsx
index f8aa845..7619312 100644
--- a/src/components/sftp/TransferPanel.tsx
+++ b/src/components/sftp/TransferPanel.tsx
@@ -30,7 +30,7 @@ export function TransferPanel({ tasks, isOpen, onToggle, onCancel, onRemove }: T
         <div className="flex items-center gap-2">
           <span className="text-sm font-medium">传输队列</span>
           {activeCount > 0 && (
-            <span className="px-2 py-0.5 bg-accent-blue/20 text-accent-blue text-xs rounded-full">
+            <span className="px-2 py-0.5 bg-surface-baseccent-blue/20 text-accent-blue text-xs rounded-full">
               {activeCount} 进行中
             </span>
           )}
@@ -41,7 +41,7 @@ export function TransferPanel({ tasks, isOpen, onToggle, onCancel, onRemove }: T
           )}
         </div>
         <div className="flex items-center gap-2">
-          <span className="text-xs text-gray-500">{tasks.length} 个任务</span>
+          <span className="text-xs text-txt-muted">{tasks.length} 个任务</span>
           {isOpen ? <ChevronDown className="w-4 h-4" /> : <ChevronUp className="w-4 h-4" />}
         </div>
       </button>
@@ -61,7 +61,7 @@ export function TransferPanel({ tasks, isOpen, onToggle, onCancel, onRemove }: T
       )}
 
       {isOpen && tasks.length === 0 && (
-        <div className="py-4 text-center text-gray-500 text-sm">
+        <div className="py-4 text-center text-txt-muted text-sm">
           暂无传输任务
         </div>
       )}
diff --git a/src/components/sidebar/SearchBox.tsx b/src/components/sidebar/SearchBox.tsx
index 2fae7ab..a76a589 100644
--- a/src/components/sidebar/SearchBox.tsx
+++ b/src/components/sidebar/SearchBox.tsx
@@ -13,7 +13,7 @@ interface SearchBoxProps {
 export function SearchBox({ value, onChange, placeholder = '搜索...' }: SearchBoxProps) {
   return (
     <div className="relative">
-      <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+      <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-txt-muted" />
       <input
         type="text"
         placeholder={placeholder}
diff --git a/src/components/sidebar/SessionTree.tsx b/src/components/sidebar/SessionTree.tsx
index 4c26223..46c9e5c 100644
--- a/src/components/sidebar/SessionTree.tsx
+++ b/src/components/sidebar/SessionTree.tsx
@@ -66,7 +66,7 @@ export function SessionTree({
             {/* Group Header */}
             <button
               onClick={() => onToggleGroup(group)}
-              className="w-full flex items-center gap-2 px-4 py-2 text-sm text-gray-400 hover:bg-dark-700 transition-colors"
+              className="w-full flex items-center gap-2 px-4 py-2 text-sm text-txt-muted hover:bg-dark-700 transition-colors"
             >
               <ChevronRight
                 className="w-4 h-4 transition-transform duration-200 ease-in-out"
@@ -74,7 +74,7 @@ export function SessionTree({
               />
               <Folder className="w-4 h-4" />
               <span className="flex-1 text-left">{group === 'default' ? '默认分组' : group}</span>
-              <span className="text-xs text-gray-500">{groupSessions.length}</span>
+              <span className="text-xs text-txt-muted">{groupSessions.length}</span>
             </button>
 
             {/* Sessions - CSS Grid collapse animation */}
@@ -100,8 +100,8 @@ export function SessionTree({
                     >
                       <Server className="w-4 h-4 text-accent-green flex-shrink-0" />
                       <div className="flex-1 min-w-0">
-                        <div className="font-medium text-gray-200 truncate">{session.name}</div>
-                        <div className="text-xs text-gray-500 truncate">{session.host}:{session.port}</div>
+                        <div className="font-medium text-content-primary truncate">{session.name}</div>
+                        <div className="text-xs text-txt-muted truncate">{session.host}:{session.port}</div>
                       </div>
                     </div>
                   ))}
diff --git a/src/components/snippets/SnippetPanel.tsx b/src/components/snippets/SnippetPanel.tsx
index d97921f..03593f7 100644
--- a/src/components/snippets/SnippetPanel.tsx
+++ b/src/components/snippets/SnippetPanel.tsx
@@ -54,37 +54,37 @@ function SnippetFormModal({ isOpen, initial, title, confirmText, onConfirm, onCl
       <div className="space-y-4">
         {/* 名称 */}
         <div>
-          <label className="block text-sm text-gray-400 mb-1">名称</label>
+          <label className="block text-sm text-txt-muted mb-1">名称</label>
           <input
             type="text"
             value={form.name}
             onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
             placeholder="例如：重启 Nginx"
-            className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-accent-blue text-sm"
+            className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-content-primary placeholder-ph focus:outline-none focus:border-accent-blue text-sm"
           />
         </div>
 
         {/* 命令内容 */}
         <div>
-          <label className="block text-sm text-gray-400 mb-1">命令</label>
+          <label className="block text-sm text-txt-muted mb-1">命令</label>
           <textarea
             value={form.content}
             onChange={(e) => setForm((f) => ({ ...f, content: e.target.value }))}
             placeholder="sudo systemctl restart nginx"
             rows={4}
-            className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-accent-blue text-sm font-mono resize-none"
+            className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-content-primary placeholder-ph focus:outline-none focus:border-accent-blue text-sm font-mono resize-none"
           />
         </div>
 
         {/* 标签 */}
         <div>
-          <label className="block text-sm text-gray-400 mb-1">标签 <span className="text-gray-600">(逗号分隔)</span></label>
+          <label className="block text-sm text-txt-muted mb-1">标签 <span className="text-txt-faint">(逗号分隔)</span></label>
           <input
             type="text"
             value={form.tags}
             onChange={(e) => setForm((f) => ({ ...f, tags: e.target.value }))}
             placeholder="linux, nginx, ops"
-            className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-accent-blue text-sm"
+            className="w-full px-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-content-primary placeholder-ph focus:outline-none focus:border-accent-blue text-sm"
           />
         </div>
       </div>
@@ -203,26 +203,26 @@ export default function SnippetPanel() {
       {/* 头部 */}
       <div className="flex items-center gap-2 px-4 py-3 border-b border-dark-700/30">
         <Code2 className="w-5 h-5 text-accent-blue flex-shrink-0" />
-        <h2 className="text-sm font-semibold text-gray-200">命令片段</h2>
+        <h2 className="text-sm font-semibold text-content-primary">命令片段</h2>
       </div>
 
       {/* 搜索框 */}
       <div className="p-3 border-b border-dark-700/30">
         <div className="relative">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-txt-muted" />
           <input
             type="text"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             placeholder="搜索片段..."
-            className="w-full pl-9 pr-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-sm text-white placeholder-gray-500 focus:outline-none focus:border-accent-blue"
+            className="w-full pl-9 pr-3 py-2 bg-dark-700 border border-dark-600 rounded-lg text-sm text-content-primary placeholder-ph focus:outline-none focus:border-accent-blue"
           />
           {query && (
             <button
               onClick={() => setQuery('')}
               className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 hover:bg-dark-600 rounded"
             >
-              <X className="w-3.5 h-3.5 text-gray-500" />
+              <X className="w-3.5 h-3.5 text-txt-muted" />
             </button>
           )}
         </div>
@@ -307,7 +307,7 @@ function SnippetItem({ snippet, copied, canInsert, onInsert, onCopy, onEdit, onD
     <div className="group rounded-lg border border-dark-700 hover:border-dark-600 bg-dark-800 p-2.5 transition-colors duration-150">
       {/* 名称行 */}
       <div className="flex items-start justify-between gap-2 mb-1">
-        <span className="text-sm font-medium text-gray-200 truncate flex-1" title={snippet.name}>
+        <span className="text-sm font-medium text-content-primary truncate flex-1" title={snippet.name}>
           {snippet.name}
         </span>
         <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity duration-150 flex-shrink-0">
@@ -316,7 +316,7 @@ function SnippetItem({ snippet, copied, canInsert, onInsert, onCopy, onEdit, onD
             onClick={() => onInsert(snippet.content)}
             disabled={!canInsert}
             title={canInsert ? '插入到终端' : '无活跃终端'}
-            className="p-1 rounded hover:bg-accent-blue/20 text-accent-blue disabled:text-gray-600 disabled:hover:bg-transparent transition-colors"
+            className="p-1 rounded hover:bg-surface-baseccent-blue/20 text-accent-blue disabled:text-txt-faint disabled:hover:bg-transparent transition-colors"
           >
             <Code2 className="w-3.5 h-3.5" />
           </button>
@@ -324,7 +324,7 @@ function SnippetItem({ snippet, copied, canInsert, onInsert, onCopy, onEdit, onD
           <button
             onClick={() => onCopy(snippet)}
             title="复制"
-            className="p-1 rounded hover:bg-dark-600 text-gray-400 transition-colors"
+            className="p-1 rounded hover:bg-dark-600 text-txt-muted transition-colors"
           >
             {copied ? (
               <span className="text-xs text-green-400 px-1 animate-scale-in">✓</span>
@@ -336,7 +336,7 @@ function SnippetItem({ snippet, copied, canInsert, onInsert, onCopy, onEdit, onD
           <button
             onClick={() => onEdit(snippet)}
             title="编辑"
-            className="p-1 rounded hover:bg-dark-600 text-gray-400 transition-colors"
+            className="p-1 rounded hover:bg-dark-600 text-txt-muted transition-colors"
           >
             <Pencil className="w-3.5 h-3.5" />
           </button>
@@ -348,13 +348,13 @@ function SnippetItem({ snippet, copied, canInsert, onInsert, onCopy, onEdit, onD
                   await onDelete(snippet.id)
                   setConfirmDelete(false)
                 }}
-                className="px-1.5 py-0.5 text-xs bg-red-600 hover:bg-red-500 text-white rounded transition-colors"
+                className="px-1.5 py-0.5 text-xs bg-red-600 hover:bg-red-500 text-content-primary rounded transition-colors"
               >
                 确认
               </button>
               <button
                 onClick={() => setConfirmDelete(false)}
-                className="px-1.5 py-0.5 text-xs text-gray-400 hover:text-gray-200 transition-colors"
+                className="px-1.5 py-0.5 text-xs text-txt-muted hover:text-content-primary transition-colors"
               >
                 取消
               </button>
@@ -363,7 +363,7 @@ function SnippetItem({ snippet, copied, canInsert, onInsert, onCopy, onEdit, onD
             <button
               onClick={() => setConfirmDelete(true)}
               title="删除"
-              className="p-1 rounded hover:bg-red-500/20 text-gray-400 hover:text-red-400 transition-colors"
+              className="p-1 rounded hover:bg-red-500/20 text-txt-muted hover:text-red-400 transition-colors"
             >
               <Trash2 className="w-3.5 h-3.5" />
             </button>
@@ -373,7 +373,7 @@ function SnippetItem({ snippet, copied, canInsert, onInsert, onCopy, onEdit, onD
 
       {/* 命令预览 */}
       <p
-        className="text-xs font-mono text-gray-500 truncate mb-1.5"
+        className="text-xs font-mono text-txt-muted truncate mb-1.5"
         title={snippet.content}
       >
         {preview}
@@ -385,7 +385,7 @@ function SnippetItem({ snippet, copied, canInsert, onInsert, onCopy, onEdit, onD
           {snippet.tags.map((tag) => (
             <span
               key={tag}
-              className="px-1.5 py-0.5 text-[10px] bg-dark-700 text-gray-400 rounded"
+              className="px-1.5 py-0.5 text-[10px] bg-dark-700 text-txt-muted rounded"
             >
               {tag}
             </span>
diff --git a/src/components/tabbar/TabContextMenu.tsx b/src/components/tabbar/TabContextMenu.tsx
index 5d0cc9b..a46940a 100644
--- a/src/components/tabbar/TabContextMenu.tsx
+++ b/src/components/tabbar/TabContextMenu.tsx
@@ -77,7 +77,7 @@ export function TabContextMenu({
             w-full px-4 py-2 text-left text-sm transition-colors
             ${item.danger 
               ? 'text-red-400 hover:bg-red-500/20' 
-              : 'text-gray-300 hover:bg-dark-700'
+              : 'text-content-secondary hover:bg-dark-700'
             }
           `}
         >
diff --git a/src/components/tabbar/TabItem.tsx b/src/components/tabbar/TabItem.tsx
index 8c96679..950a5f7 100644
--- a/src/components/tabbar/TabItem.tsx
+++ b/src/components/tabbar/TabItem.tsx
@@ -63,19 +63,19 @@ export function TabItem({
         border-r border-dark-700/20 cursor-pointer select-none
         transition-all duration-150 relative
         ${isActive
-          ? 'bg-dark-900 text-gray-200'
-          : 'bg-dark-800 text-gray-500 hover:bg-dark-700 hover:text-gray-400'
+          ? 'bg-dark-900 text-content-primary'
+          : 'bg-dark-800 text-txt-muted hover:bg-dark-700 hover:text-txt-muted'
         }
         ${isDragging ? 'opacity-50' : 'opacity-100'}
       `}
     >
       {/* Left drop indicator */}
       {showLeftIndicator && (
-        <div className="absolute left-0 top-0 bottom-0 w-0.5 bg-accent-blue z-10 transition-all duration-150" />
+        <div className="absolute left-0 top-0 bottom-0 w-0.5 bg-surface-baseccent-blue z-10 transition-all duration-150" />
       )}
       {/* Right drop indicator */}
       {showRightIndicator && (
-        <div className="absolute right-0 top-0 bottom-0 w-0.5 bg-accent-blue z-10 transition-all duration-150" />
+        <div className="absolute right-0 top-0 bottom-0 w-0.5 bg-surface-baseccent-blue z-10 transition-all duration-150" />
       )}
 
       {/* Status indicator */}
@@ -110,7 +110,7 @@ export function TabItem({
       {/* Active tab bottom indicator — always rendered for width transition */}
       <div
         className={`
-          absolute bottom-0 left-0 right-0 h-0.5 bg-accent-blue
+          absolute bottom-0 left-0 right-0 h-0.5 bg-surface-baseccent-blue
           transition-[opacity,transform] duration-150 origin-left
           ${isActive ? 'opacity-100 scale-x-100' : 'opacity-0 scale-x-0'}
         `}
diff --git a/src/components/terminal/TerminalOverlay.tsx b/src/components/terminal/TerminalOverlay.tsx
index 958ec10..42bf922 100644
--- a/src/components/terminal/TerminalOverlay.tsx
+++ b/src/components/terminal/TerminalOverlay.tsx
@@ -25,17 +25,17 @@ function TerminalOverlay({
       {connectionState === 'disconnected' && needsReconnect && (
         <div className="absolute inset-0 bg-dark-900/90 flex items-center justify-center z-10">
           <div className="text-center">
-            <div className="w-16 h-16 bg-accent-blue/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
+            <div className="w-16 h-16 bg-surface-baseccent-blue/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
               <TerminalIcon className="w-8 h-8 text-accent-blue" />
             </div>
-            <div className="text-gray-200 mb-2 text-lg">会话已恢复</div>
-            <div className="text-gray-400 text-sm mb-6">
+            <div className="text-content-primary mb-2 text-lg">会话已恢复</div>
+            <div className="text-txt-muted text-sm mb-6">
               上次关闭时的终端标签已恢复<br />
               点击下方按钮重新建立 SSH 连接
             </div>
             <button
               onClick={onReconnect}
-              className="px-6 py-2.5 bg-accent-blue hover:bg-blue-500 text-white rounded-lg transition-colors"
+              className="px-6 py-2.5 bg-surface-baseccent-blue hover:bg-surface-baselue-500 text-content-primary rounded-lg transition-colors"
             >
               重新连接
             </button>
@@ -48,18 +48,18 @@ function TerminalOverlay({
         <div className="absolute inset-0 bg-dark-900/90 flex items-center justify-center z-10">
           <div className="text-center">
             <div className="text-yellow-400 mb-2 text-lg">连接已挂起</div>
-            <div className="text-gray-400 text-sm mb-4">
+            <div className="text-txt-muted text-sm mb-4">
               长时间未操作，连接已进入挂起状态
             </div>
             <button
               onClick={onResume}
-              className="px-4 py-2 bg-accent-blue hover:bg-blue-500 text-white rounded transition-colors mr-2"
+              className="px-4 py-2 bg-surface-baseccent-blue hover:bg-surface-baselue-500 text-content-primary rounded transition-colors mr-2"
             >
               恢复连接
             </button>
             <button
               onClick={onReconnect}
-              className="px-4 py-2 bg-dark-700 hover:bg-dark-600 text-gray-200 rounded transition-colors"
+              className="px-4 py-2 bg-dark-700 hover:bg-dark-600 text-content-primary rounded transition-colors"
             >
               重新连接
             </button>
@@ -72,10 +72,10 @@ function TerminalOverlay({
         <div className="absolute inset-0 bg-dark-900/80 flex items-center justify-center z-10">
           <div className="text-center">
             <div className="text-red-400 mb-2">连接失败</div>
-            <div className="text-gray-400 text-sm mb-4">{statusMessage}</div>
+            <div className="text-txt-muted text-sm mb-4">{statusMessage}</div>
             <button
               onClick={onReconnect}
-              className="px-4 py-2 bg-accent-blue hover:bg-blue-500 text-white rounded transition-colors"
+              className="px-4 py-2 bg-surface-baseccent-blue hover:bg-surface-baselue-500 text-content-primary rounded transition-colors"
             >
               重新连接
             </button>
diff --git a/src/components/terminal/TerminalSearchBar.tsx b/src/components/terminal/TerminalSearchBar.tsx
index 57f2aa2..c21a7a5 100644
--- a/src/components/terminal/TerminalSearchBar.tsx
+++ b/src/components/terminal/TerminalSearchBar.tsx
@@ -24,7 +24,7 @@ function TerminalSearchBar({
 }: TerminalSearchBarProps) {
   return (
     <div className="absolute top-0 left-0 right-0 z-30 flex items-center gap-2 px-3 py-2 bg-dark-800/95 border-b border-dark-600 backdrop-blur-sm">
-      <Search size={14} className="text-gray-400 shrink-0" />
+      <Search size={14} className="text-txt-muted shrink-0" />
       <input
         ref={searchInputRef}
         type="text"
@@ -41,30 +41,30 @@ function TerminalSearchBar({
           e.stopPropagation()
         }}
         placeholder="搜索..."
-        className="flex-1 bg-dark-900 text-gray-200 text-sm px-2 py-1 rounded border border-dark-600 focus:border-accent-blue focus:outline-none placeholder-gray-500"
+        className="flex-1 bg-dark-900 text-content-primary text-sm px-2 py-1 rounded border border-dark-600 focus:border-accent-blue focus:outline-none placeholder-ph"
       />
       {searchResultCount !== undefined && (
-        <span className="text-xs text-gray-400 whitespace-nowrap min-w-[60px] text-center">
+        <span className="text-xs text-txt-muted whitespace-nowrap min-w-[60px] text-center">
           {searchResultIndex ?? 0}/{searchResultCount}
         </span>
       )}
       <button
         onClick={onSearchPrevious}
-        className="p-1 hover:bg-dark-600 rounded text-gray-400 hover:text-gray-200 transition-colors"
+        className="p-1 hover:bg-dark-600 rounded text-txt-muted hover:text-content-primary transition-colors"
         title="上一个 (Shift+Enter)"
       >
         <ChevronUp size={16} />
       </button>
       <button
         onClick={onSearchNext}
-        className="p-1 hover:bg-dark-600 rounded text-gray-400 hover:text-gray-200 transition-colors"
+        className="p-1 hover:bg-dark-600 rounded text-txt-muted hover:text-content-primary transition-colors"
         title="下一个 (Enter)"
       >
         <ChevronDown size={16} />
       </button>
       <button
         onClick={onClose}
-        className="p-1 hover:bg-dark-600 rounded text-gray-400 hover:text-gray-200 transition-colors"
+        className="p-1 hover:bg-dark-600 rounded text-txt-muted hover:text-content-primary transition-colors"
         title="关闭 (Escape)"
       >
         <X size={16} />
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
index e6bc477..13b031d 100644
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -6,9 +6,12 @@ import { darkColors, lightColors, type AppThemeMode, type ColorMap } from '../th
  * Resolves the *effective* theme ('dark' | 'light') from the user preference,
  * including the 'system' → prefers-color-scheme mapping.
  */
-function resolveEffectiveTheme(_preference: AppThemeMode): 'dark' | 'light' {
-  // 当前版本固定使用 dark 主题，后续版本开放主题切换
-  return 'dark'
+function resolveEffectiveTheme(preference: AppThemeMode): 'dark' | 'light' {
+  if (preference === 'system') {
+    if (typeof window === 'undefined') return 'dark'
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+  return preference
 }
 
 /**
@@ -38,8 +41,10 @@ export function useTheme() {
   useEffect(() => {
     const colors = effective === 'dark' ? darkColors : lightColors
 
-    // Set data attribute for potential direct CSS selectors
+    // Set data attribute for CSS selectors
     document.documentElement.setAttribute('data-theme', effective)
+
+    // Toggle Tailwind dark class
     if (effective === 'dark') {
       document.documentElement.classList.add('dark')
     } else {
@@ -49,9 +54,9 @@ export function useTheme() {
     // Apply CSS custom properties
     applyCSSVars(colors)
 
-    // Update body bg & colour (mirrors index.css body rules but via vars)
-    document.body.style.backgroundColor = '#0f172a'
-    document.body.style.color = '#e2e8f0'
+    // Update body bg & colour from tokens (not hardcoded)
+    document.body.style.backgroundColor = colors['surface-base'] || '#0f172a'
+    document.body.style.color = colors['text-primary'] || '#e2e8f0'
   }, [effective])
 
   // Listen for system colour-scheme changes when preference is 'system'
@@ -64,9 +69,16 @@ export function useTheme() {
       const newEffective = e.matches ? 'dark' : 'light'
       const colors = e.matches ? darkColors : lightColors
       document.documentElement.setAttribute('data-theme', newEffective)
+
+      if (newEffective === 'dark') {
+        document.documentElement.classList.add('dark')
+      } else {
+        document.documentElement.classList.remove('dark')
+      }
+
       applyCSSVars(colors)
-      document.body.style.backgroundColor = '#0f172a'
-      document.body.style.color = '#e2e8f0'
+      document.body.style.backgroundColor = colors['surface-base'] || '#0f172a'
+      document.body.style.color = colors['text-primary'] || '#e2e8f0'
     }
 
     mql.addEventListener('change', handler)
diff --git a/src/index.css b/src/index.css
index 5ab1923..04b481c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,55 +3,78 @@
 @tailwind utilities;
 
 /* ===================================================================
- * OpsXShell v1.3.0 — Theme CSS Variables
+ * OpsXShell v1.4.0 — Professional Theme System
  *
- * The default (no data-theme attribute) keeps dark mode as before so
- * that the very first paint looks correct even before React hydrates.
- * useTheme.ts will immediately set data-theme + override vars on mount.
+ * Default (no data-theme) is dark mode for correct first paint.
+ * useTheme.ts immediately sets data-theme + overrides vars on mount.
+ *
+ * Design: Warp-inspired warm dark + Linear luminance stacking
  * =================================================================== */
 
 :root {
-  /* ---- Dark (default, matches original hard-coded values) ---- */
+  /* ---- Dark (default, matches warm slate-navy palette) ---- */
   --color-dark-900: #0f172a;
   --color-dark-800: #1e293b;
   --color-dark-700: #334155;
   --color-dark-600: #475569;
 
-  /* Semantic tokens (dark default) */
-  --color-surface-base: #0f172a;
-  --color-surface-raised: #1e293b;
+  /* Semantic surface tokens */
+  --color-surface-base:    #0f172a;
+  --color-surface-raised:  #1e293b;
   --color-surface-overlay: #334155;
-  --color-surface-inset: #475569;
+  --color-surface-inset:   #475569;
+  --color-surface-hover:   #374151;
+  --color-surface-active:  #4b5563;
 
-  --color-text-primary:   #e2e8f0;
+  /* Text */
+  --color-text-primary:   #f1f5f9;
   --color-text-secondary: #cbd5e1;
   --color-text-muted:     #94a3b8;
   --color-text-faint:     #64748b;
   --color-text-dim:       #475569;
 
-  --color-content-primary: #e2e8f0;
+  /* Content */
+  --color-content-primary:   #f1f5f9;
   --color-content-secondary: #cbd5e1;
-  --color-content-tertiary: #94a3b8;
-  --color-content-inverse: #0f172a;
+  --color-content-tertiary:  #94a3b8;
+  --color-content-inverse:   #0f172a;
 
-  --color-border: #334155;
-  --color-border-strong: #475569;
+  /* Border */
+  --color-border:         #1e293b;
+  --color-border-subtle:  #1e293b;
+  --color-border-default: #334155;
+  --color-border-strong:  #475569;
+  --color-border-focus:   #3b82f6;
 
-  --color-accent-blue:   #3b82f6;
-  --color-accent-green:  #10b981;
-  --color-accent-purple: #8b5cf6;
-  --color-accent-orange: #f97316;
-  --color-accent-red:    #ef4444;
+  /* Accent */
+  --color-accent-blue:         #3b82f6;
+  --color-accent-blue-hover:   #60a5fa;
+  --color-accent-green:        #10b981;
+  --color-accent-purple:       #8b5cf6;
+  --color-accent-orange:       #f97316;
+  --color-accent-red:          #ef4444;
 
-  --color-feedback-success: #10b981;
-  --color-feedback-warning: #f59e0b;
-  --color-feedback-error: #ef4444;
-  --color-feedback-info: #3b82f6;
+  /* Feedback */
+  --color-feedback-success:       #10b981;
+  --color-feedback-success-bg:    #064e3b;
+  --color-feedback-warning:       #f59e0b;
+  --color-feedback-warning-bg:    #78350f;
+  --color-feedback-error:         #ef4444;
+  --color-feedback-error-bg:      #7f1d1d;
+  --color-feedback-info:          #3b82f6;
+  --color-feedback-info-bg:       #1e3a5f;
 
-  --color-scrollbar-track:   #1e293b;
-  --color-scrollbar-thumb:   #475569;
-  --color-scrollbar-thumb-h: #64748b;
+  /* Placeholder */
+  --color-placeholder:         #64748b;
+  --color-placeholder-disabled: #475569;
 
+  /* UI chrome */
+  --color-scrollbar-track:    #1e293b;
+  --color-scrollbar-thumb:    #475569;
+  --color-scrollbar-thumb-h:  #64748b;
+  --color-shadow-color:       rgba(0, 0, 0, 0.4);
+
+  /* Terminal */
   --color-terminal-bg: #0f172a;
 }
 
@@ -67,8 +90,8 @@ html, body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #0f172a !important;
-  color: #e2e8f0;
+  background-color: var(--color-surface-base) !important;
+  color: var(--color-text-primary);
   overflow: hidden;
 }
 
@@ -217,7 +240,7 @@ button {
   100% { background-position: 200% 0; }
 }
 .animate-shimmer {
-  background: linear-gradient(90deg, var(--color-dark-800) 25%, var(--color-dark-700) 50%, var(--color-dark-800) 75%);
+  background: linear-gradient(90deg, var(--color-surface-raised) 25%, var(--color-surface-overlay) 50%, var(--color-surface-raised) 75%);
   background-size: 200% 100%;
   animation: shimmer 1.5s ease-in-out infinite;
 }
diff --git a/src/themes/app-theme.ts b/src/themes/app-theme.ts
index 6513463..1d7fbe2 100644
--- a/src/themes/app-theme.ts
+++ b/src/themes/app-theme.ts
@@ -1,13 +1,14 @@
 /**
- * OpsXShell v1.3.0 — App Theme System
+ * OpsXShell v1.4.0 — Professional Theme System
  *
  * CSS-variable-driven theme definitions for Dark / Light / System modes.
- * Terminal themes (terminal.ts) remain independent — this only covers the
- * Chrome / UI layer.
+ * Inspired by Warp (warm dark terminal) + Linear (precise luminance stacking).
  *
- * Design references:
- *  - Dark:  existing slate-blue palette
- *  - Light: VS Code Light+ inspired — white canvas, soft grey borders, blue accent
+ * Design principles:
+ *  - Dark: warm near-black base, soft parchment text, restrained accent
+ *  - Light: clean canvas, ink-dark text, vibrant accent
+ *  - All colors use semantic tokens so components never reference raw values
+ *  - Surface elevation via luminance stepping, not shadows
  */
 
 // ---------------------------------------------------------------------------
@@ -20,109 +21,170 @@ export type AppThemeMode = 'dark' | 'light' | 'system'
 export type ColorMap = Record<string, string>
 
 // ---------------------------------------------------------------------------
-// Dark palette  (unchanged from original hard-coded values)
+// Dark palette
+//
+// Inspired by:
+//   - Warp:  warm near-black base (#0f172a slate-blue), cream-white text
+//   - Linear: luminance-stacking surface hierarchy, semi-transparent borders
+//
+// Surface ladder:  base → raised → overlay → inset (deep → shallow)
+// Text ladder:     primary → secondary → muted → faint → dim (hot → cold)
 // ---------------------------------------------------------------------------
-
 export const darkColors: ColorMap = {
-  // Background surfaces  (deepest → shallowest)
+  // ── Background surfaces (deepest → shallowest) ──────────────────────
+  // Level 0: Page canvas — deep slate-navy (Warp-inspired warmth)
   'dark-900': '#0f172a',
+  // Level 1: Sidebar / panels — one step up
   'dark-800': '#1e293b',
+  // Level 2: Cards / elevated surfaces — visible but restrained
   'dark-700': '#334155',
+  // Level 3: Hover / active states — lightest dark surface
   'dark-600': '#475569',
 
-  // Semantic surface tokens
-  'surface-base': '#0f172a',
-  'surface-raised': '#1e293b',
+  // ── Semantic surface tokens ──────────────────────────────────────────
+  'surface-base':    '#0f172a',
+  'surface-raised':  '#1e293b',
   'surface-overlay': '#334155',
-  'surface-inset': '#475569',
+  'surface-inset':   '#475569',
+  // Hover elevation
+  'surface-hover':   '#374151',    // gray-700 — subtle lift on hover
+  // Active/pressed
+  'surface-active':  '#4b5563',    // gray-600 — pressed state
 
-  // Text
-  'text-primary':   '#e2e8f0',  // gray-200
-  'text-secondary': '#cbd5e1',  // gray-300
-  'text-muted':     '#94a3b8',  // gray-400
-  'text-faint':     '#64748b',  // gray-500
-  'text-dim':       '#475569',  // gray-600
+  // ── Text ─────────────────────────────────────────────────────────────
+  'text-primary':   '#f1f5f9',  // warm parchment (slate-50) — not pure white
+  'text-secondary': '#cbd5e1',  // slate-300 — comfortable reading
+  'text-muted':     '#94a3b8',  // slate-400 — secondary info
+  'text-faint':     '#64748b',  // slate-500 — placeholder / dim
+  'text-dim':       '#475569',  // slate-600 — disabled / decorative
 
-  // Content tokens
-  'content-primary': '#e2e8f0',
+  // ── Content tokens ───────────────────────────────────────────────────
+  'content-primary':   '#f1f5f9',
   'content-secondary': '#cbd5e1',
-  'content-tertiary': '#94a3b8',
-  'content-inverse': '#0f172a',
+  'content-tertiary':  '#94a3b8',
+  'content-inverse':   '#0f172a',
 
-  // Border tokens
-  'border': '#334155',
-  'border-strong': '#475569',
+  // ── Border tokens ────────────────────────────────────────────────────
+  // Linear-inspired: semi-transparent feel via opaque colors
+  'border':         '#1e293b',     // whisper-thin separator
+  'border-subtle':  '#1e293b',     // minimal visibility
+  'border-default': '#334155',     // standard component border
+  'border-strong':  '#475569',     // emphasis / focus
+  'border-focus':   '#3b82f6',     // input focus ring (blue accent)
 
-  // Accent
-  'accent-blue':   '#3b82f6',
-  'accent-green':  '#10b981',
-  'accent-purple': '#8b5cf6',
-  'accent-orange': '#f97316',
-  'accent-red':    '#ef4444',
+  // ── Accent ───────────────────────────────────────────────────────────
+  'accent-blue':    '#3b82f6',
+  'accent-blue-hover': '#60a5fa',  // lighter blue for hover
+  'accent-green':   '#10b981',
+  'accent-purple':  '#8b5cf6',
+  'accent-orange':  '#f97316',
+  'accent-red':     '#ef4444',
 
-  // Feedback tokens
-  'feedback-success': '#10b981',
-  'feedback-warning': '#f59e0b',
-  'feedback-error': '#ef4444',
-  'feedback-info': '#3b82f6',
+  // ── Feedback tokens ──────────────────────────────────────────────────
+  'feedback-success':       '#10b981',
+  'feedback-success-bg':    '#064e3b',   // emerald-900 tint
+  'feedback-warning':       '#f59e0b',
+  'feedback-warning-bg':    '#78350f',   // amber-900 tint
+  'feedback-error':         '#ef4444',
+  'feedback-error-bg':      '#7f1d1d',   // red-900 tint
+  'feedback-info':          '#3b82f6',
+  'feedback-info-bg':       '#1e3a5f',   // blue-900 tint
 
-  // UI chrome
+  // ── Placeholder ──────────────────────────────────────────────────────
+  'placeholder':         '#64748b',    // slate-500
+  'placeholder-disabled': '#475569',   // slate-600
+
+  // ── UI chrome ────────────────────────────────────────────────────────
   'scrollbar-track':    '#1e293b',
   'scrollbar-thumb':    '#475569',
   'scrollbar-thumb-h':  '#64748b',
+  'shadow-color':       'rgba(0, 0, 0, 0.4)',
+
+  // ── Terminal ─────────────────────────────────────────────────────────
+  'terminal-bg':        '#0f172a',
 }
 
 // ---------------------------------------------------------------------------
-// Light palette  (VS Code Light+ inspired)
+// Light palette
+//
+// Inspired by:
+//   - Notion: warm white canvas, soft borders, clean hierarchy
+//   - VS Code Light+: readable code editor aesthetic
+//   - Linear light: subtle cool gray surfaces
+//
+// Key: warmer than typical "sterile white" — invites long sessions
 // ---------------------------------------------------------------------------
-
 export const lightColors: ColorMap = {
-  // Background surfaces
+  // ── Background surfaces (lightest → darkest) ────────────────────────
+  // Level 0: Page canvas — warm white
   'dark-900': '#ffffff',
-  'dark-800': '#f3f4f6',   // gray-100
-  'dark-700': '#e5e7eb',   // gray-200
-  'dark-600': '#d1d5db',   // gray-300
+  // Level 1: Sidebar / panels — barely-warm gray
+  'dark-800': '#f8fafc',      // slate-50
+  // Level 2: Cards / elevated — soft boundary
+  'dark-700': '#f1f5f9',      // slate-100
+  // Level 3: Hover / active — noticeable surface
+  'dark-600': '#e2e8f0',      // slate-200
 
-  // Semantic surface tokens
-  'surface-base': '#ffffff',
-  'surface-raised': '#f3f4f6',
-  'surface-overlay': '#e5e7eb',
-  'surface-inset': '#d1d5db',
+  // ── Semantic surface tokens ──────────────────────────────────────────
+  'surface-base':    '#ffffff',
+  'surface-raised':  '#f8fafc',
+  'surface-overlay': '#f1f5f9',
+  'surface-inset':   '#e2e8f0',
+  // Hover elevation
+  'surface-hover':   '#e2e8f0',    // slate-200
+  // Active/pressed
+  'surface-active':  '#cbd5e1',    // slate-300
 
-  // Text
-  'text-primary':   '#1f2937',  // gray-800
-  'text-secondary': '#374151',  // gray-700
-  'text-muted':     '#6b7280',  // gray-500
-  'text-faint':     '#9ca3af',  // gray-400
-  'text-dim':       '#d1d5db',  // gray-300
+  // ── Text ─────────────────────────────────────────────────────────────
+  'text-primary':   '#0f172a',     // slate-900 — deep ink (NOT pure black)
+  'text-secondary': '#334155',     // slate-700 — comfortable body text
+  'text-muted':     '#64748b',     // slate-500 — secondary info
+  'text-faint':     '#94a3b8',     // slate-400 — placeholder / dim
+  'text-dim':       '#cbd5e1',     // slate-300 — disabled / decorative
 
-  // Content tokens
-  'content-primary': '#1f2937',
-  'content-secondary': '#374151',
-  'content-tertiary': '#6b7280',
-  'content-inverse': '#ffffff',
+  // ── Content tokens ───────────────────────────────────────────────────
+  'content-primary':   '#0f172a',
+  'content-secondary': '#334155',
+  'content-tertiary':  '#64748b',
+  'content-inverse':   '#ffffff',
 
-  // Border tokens
-  'border': '#e5e7eb',
-  'border-strong': '#d1d5db',
+  // ── Border tokens ────────────────────────────────────────────────────
+  'border':         '#f1f5f9',      // slate-100 — whisper thin
+  'border-subtle':  '#f1f5f9',      // minimal
+  'border-default': '#e2e8f0',      // slate-200 — standard
+  'border-strong':  '#cbd5e1',      // slate-300 — emphasis
+  'border-focus':   '#3b82f6',      // same blue accent
 
-  // Accent (kept the same hue family, slightly adjusted for light bg)
-  'accent-blue':   '#2563eb',
-  'accent-green':  '#059669',
-  'accent-purple': '#7c3aed',
-  'accent-orange': '#ea580c',
-  'accent-red':    '#dc2626',
+  // ── Accent ───────────────────────────────────────────────────────────
+  'accent-blue':         '#2563eb',     // blue-600 — deeper for white bg
+  'accent-blue-hover':   '#1d4ed8',     // blue-700 — hover
+  'accent-green':        '#059669',     // emerald-600
+  'accent-purple':       '#7c3aed',     // violet-600
+  'accent-orange':       '#ea580c',     // orange-600
+  'accent-red':          '#dc2626',     // red-600
 
-  // Feedback tokens
-  'feedback-success': '#059669',
-  'feedback-warning': '#d97706',
-  'feedback-error': '#dc2626',
-  'feedback-info': '#2563eb',
+  // ── Feedback tokens ──────────────────────────────────────────────────
+  'feedback-success':       '#059669',
+  'feedback-success-bg':    '#d1fae5',   // emerald-100
+  'feedback-warning':       '#d97706',
+  'feedback-warning-bg':    '#fef3c7',   // amber-100
+  'feedback-error':         '#dc2626',
+  'feedback-error-bg':      '#fee2e2',   // red-100
+  'feedback-info':          '#2563eb',
+  'feedback-info-bg':       '#dbeafe',   // blue-100
 
-  // UI chrome
-  'scrollbar-track':    '#f3f4f6',
-  'scrollbar-thumb':    '#d1d5db',
-  'scrollbar-thumb-h':  '#9ca3af',
+  // ── Placeholder ──────────────────────────────────────────────────────
+  'placeholder':          '#94a3b8',     // slate-400
+  'placeholder-disabled':  '#cbd5e1',     // slate-300
+
+  // ── UI chrome ────────────────────────────────────────────────────────
+  'scrollbar-track':    '#f8fafc',
+  'scrollbar-thumb':    '#cbd5e1',
+  'scrollbar-thumb-h':  '#94a3b8',
+  'shadow-color':       'rgba(0, 0, 0, 0.08)',
+
+  // ── Terminal ─────────────────────────────────────────────────────────
+  'terminal-bg':        '#ffffff',
 }
 
 // ---------------------------------------------------------------------------
diff --git a/tailwind.config.js b/tailwind.config.js
index b0002cf..9f09e33 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,36 +8,68 @@ export default {
   theme: {
     extend: {
       colors: {
-        // Semantic color tokens — driven by CSS custom properties set per theme
+        // ── Semantic surface tokens (theme-aware via CSS vars) ──────────
         surface: {
-          base: 'var(--color-surface-base)',
-          raised: 'var(--color-surface-raised)',
+          base:    'var(--color-surface-base)',
+          raised:  'var(--color-surface-raised)',
           overlay: 'var(--color-surface-overlay)',
-          inset: 'var(--color-surface-inset)',
+          inset:   'var(--color-surface-inset)',
+          hover:   'var(--color-surface-hover)',
+          active:  'var(--color-surface-active)',
         },
-        // Legacy dark-* aliases for backward compatibility
+        // ── Legacy dark-* aliases (backward compat → surface tokens) ───
         dark: {
           900: 'var(--color-surface-base)',
           800: 'var(--color-surface-raised)',
           700: 'var(--color-surface-overlay)',
           600: 'var(--color-surface-inset)',
         },
+        // ── Accent colors ──────────────────────────────────────────────
         accent: {
-          blue:   'var(--color-accent-blue)',
-          green:  'var(--color-accent-green)',
-          purple: 'var(--color-accent-purple)',
-          orange: 'var(--color-accent-orange)',
-          red:    'var(--color-accent-red)',
+          blue:        'var(--color-accent-blue)',
+          'blue-hover':'var(--color-accent-blue-hover)',
+          green:       'var(--color-accent-green)',
+          purple:      'var(--color-accent-purple)',
+          orange:      'var(--color-accent-orange)',
+          red:         'var(--color-accent-red)',
         },
+        // ── Content / text tokens ──────────────────────────────────────
         content: {
           primary:   'var(--color-content-primary)',
           secondary: 'var(--color-content-secondary)',
           tertiary:  'var(--color-content-tertiary)',
           inverse:   'var(--color-content-inverse)',
         },
+        // ── Text tokens (direct mapping) ───────────────────────────────
+        txt: {
+          primary:   'var(--color-text-primary)',
+          secondary: 'var(--color-text-secondary)',
+          muted:     'var(--color-text-muted)',
+          faint:     'var(--color-text-faint)',
+          dim:       'var(--color-text-dim)',
+        },
+        // ── Border tokens ──────────────────────────────────────────────
         border: {
-          DEFAULT: 'var(--color-border)',
+          DEFAULT: 'var(--color-border-default)',
+          subtle:  'var(--color-border-subtle)',
           strong:  'var(--color-border-strong)',
+          focus:   'var(--color-border-focus)',
+        },
+        // ── Placeholder tokens ─────────────────────────────────────────
+        ph: {
+          DEFAULT:  'var(--color-placeholder)',
+          disabled: 'var(--color-placeholder-disabled)',
+        },
+        // ── Feedback / status tokens ───────────────────────────────────
+        feedback: {
+          'success':    'var(--color-feedback-success)',
+          'success-bg': 'var(--color-feedback-success-bg)',
+          'warning':    'var(--color-feedback-warning)',
+          'warning-bg': 'var(--color-feedback-warning-bg)',
+          'error':      'var(--color-feedback-error)',
+          'error-bg':   'var(--color-feedback-error-bg)',
+          'info':       'var(--color-feedback-info)',
+          'info-bg':    'var(--color-feedback-info-bg)',
         },
       },
       fontFamily: {