diff --git a/src/components/config/VisualConfigEditor.tsx b/src/components/config/VisualConfigEditor.tsx
index 7fe3ebe..29b0bec 100644
--- a/src/components/config/VisualConfigEditor.tsx
+++ b/src/components/config/VisualConfigEditor.tsx
@@ -174,8 +174,10 @@ function ToastSelect({
                 style={{
                   padding: '10px 12px',
                   borderRadius: 10,
-                  border: active ? '1px solid rgba(59, 130, 246, 0.5)' : '1px solid var(--border-color)',
-                  background: active ? 'rgba(59, 130, 246, 0.10)' : 'var(--bg-primary)',
+                  border: active
+                    ? '1px solid rgba(139, 134, 128, 0.5)'
+                    : '1px solid var(--border-color)',
+                  background: active ? 'rgba(139, 134, 128, 0.12)' : 'var(--bg-primary)',
                   color: 'var(--text-primary)',
                   cursor: 'pointer',
                   textAlign: 'left',
diff --git a/src/components/modelAlias/ModelMappingDiagram.module.scss b/src/components/modelAlias/ModelMappingDiagram.module.scss
index 20c3194..f84bd5f 100644
--- a/src/components/modelAlias/ModelMappingDiagram.module.scss
+++ b/src/components/modelAlias/ModelMappingDiagram.module.scss
@@ -114,7 +114,7 @@
   &.selected {
     border-color: var(--primary-color);
     background-color: var(--bg-secondary);
-    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
+    box-shadow: 0 0 0 2px rgba($primary-color, 0.18);
   }
 }
 
diff --git a/src/components/modelAlias/ModelMappingDiagram.tsx b/src/components/modelAlias/ModelMappingDiagram.tsx
index b207882..0762444 100644
--- a/src/components/modelAlias/ModelMappingDiagram.tsx
+++ b/src/components/modelAlias/ModelMappingDiagram.tsx
@@ -33,7 +33,7 @@ export interface ModelMappingDiagramProps {
 }
 
 const PROVIDER_COLORS = [
-  '#3b82f6', '#10b981', '#f59e0b', '#ef4444', 
+  '#8b8680', '#10b981', '#f59e0b', '#c65746',
   '#8b5cf6', '#ec4899', '#06b6d4', '#84cc16'
 ];
 
diff --git a/src/components/providers/ProviderNav/ProviderNav.module.scss b/src/components/providers/ProviderNav/ProviderNav.module.scss
index 7c169d7..8722f2e 100644
--- a/src/components/providers/ProviderNav/ProviderNav.module.scss
+++ b/src/components/providers/ProviderNav/ProviderNav.module.scss
@@ -17,12 +17,12 @@
   flex-direction: row;
   gap: 6px;
   padding: 10px 12px;
-  background: rgba(255, 255, 255, 0.7);
+  background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
-  border: 1px solid rgba(255, 255, 255, 0.3);
+  border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
   border-radius: 999px;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
   overflow-x: auto;
   scrollbar-width: none;
   max-width: inherit;
@@ -39,7 +39,7 @@
   pointer-events: none;
   opacity: 0;
   border-radius: 999px;
-  background: rgba(59, 130, 246, 0.15);
+  background: rgba($primary-color, 0.16);
   box-shadow: inset 0 0 0 2px var(--primary-color);
   transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
     width 220ms cubic-bezier(0.22, 1, 0.36, 1),
@@ -104,8 +104,8 @@
 // 暗色主题适配
 :global([data-theme='dark']) {
   .navList {
-    background: rgba(30, 30, 30, 0.7);
-    border-color: rgba(255, 255, 255, 0.1);
+    background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
+    border-color: color-mix(in srgb, var(--border-color) 55%, transparent);
     box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
   }
 
@@ -116,7 +116,7 @@
   }
 
   .indicator {
-    background: rgba(59, 130, 246, 0.25);
+    background: rgba($primary-color, 0.28);
   }
 }
 
diff --git a/src/components/usage/StatCards.tsx b/src/components/usage/StatCards.tsx
index 09c6831..43df7cf 100644
--- a/src/components/usage/StatCards.tsx
+++ b/src/components/usage/StatCards.tsx
@@ -56,9 +56,9 @@ export function StatCards({ usage, loading, modelPrices, sparklines }: StatCards
       key: 'requests',
       label: t('usage_stats.total_requests'),
       icon: <IconSatellite size={16} />,
-      accent: '#3b82f6',
-      accentSoft: 'rgba(59, 130, 246, 0.18)',
-      accentBorder: 'rgba(59, 130, 246, 0.35)',
+      accent: '#8b8680',
+      accentSoft: 'rgba(139, 134, 128, 0.18)',
+      accentBorder: 'rgba(139, 134, 128, 0.35)',
       value: loading ? '-' : (usage?.total_requests ?? 0).toLocaleString(),
       meta: (
         <>
@@ -67,7 +67,7 @@ export function StatCards({ usage, loading, modelPrices, sparklines }: StatCards
             {t('usage_stats.success_requests')}: {loading ? '-' : (usage?.success_count ?? 0)}
           </span>
           <span className={styles.statMetaItem}>
-            <span className={styles.statMetaDot} style={{ backgroundColor: '#ef4444' }} />
+            <span className={styles.statMetaDot} style={{ backgroundColor: '#c65746' }} />
             {t('usage_stats.failed_requests')}: {loading ? '-' : (usage?.failure_count ?? 0)}
           </span>
         </>
diff --git a/src/components/usage/TokenBreakdownChart.tsx b/src/components/usage/TokenBreakdownChart.tsx
index 1ff0990..7b1084a 100644
--- a/src/components/usage/TokenBreakdownChart.tsx
+++ b/src/components/usage/TokenBreakdownChart.tsx
@@ -13,7 +13,7 @@ import type { UsagePayload } from './hooks/useUsageData';
 import styles from '@/pages/UsagePage.module.scss';
 
 const TOKEN_COLORS: Record<TokenCategory, { border: string; bg: string }> = {
-  input: { border: '#3b82f6', bg: 'rgba(59, 130, 246, 0.25)' },
+  input: { border: '#8b8680', bg: 'rgba(139, 134, 128, 0.25)' },
   output: { border: '#22c55e', bg: 'rgba(34, 197, 94, 0.25)' },
   cached: { border: '#f59e0b', bg: 'rgba(245, 158, 11, 0.25)' },
   reasoning: { border: '#8b5cf6', bg: 'rgba(139, 92, 246, 0.25)' }
diff --git a/src/components/usage/hooks/useSparklines.ts b/src/components/usage/hooks/useSparklines.ts
index 491a317..5b6e6ad 100644
--- a/src/components/usage/hooks/useSparklines.ts
+++ b/src/components/usage/hooks/useSparklines.ts
@@ -104,7 +104,7 @@ export function useSparklines({ usage, loading }: UseSparklinesOptions): UseSpar
   );
 
   const requestsSparkline = useMemo(
-    () => buildSparkline(buildLastHourSeries('requests'), '#3b82f6', 'rgba(59, 130, 246, 0.18)'),
+    () => buildSparkline(buildLastHourSeries('requests'), '#8b8680', 'rgba(139, 134, 128, 0.18)'),
     [buildLastHourSeries, buildSparkline]
   );
 
diff --git a/src/pages/AiProvidersOpenAIEditPage.tsx b/src/pages/AiProvidersOpenAIEditPage.tsx
index e9ee79b..2b42681 100644
--- a/src/pages/AiProvidersOpenAIEditPage.tsx
+++ b/src/pages/AiProvidersOpenAIEditPage.tsx
@@ -59,7 +59,7 @@ function StatusSuccessIcon() {
 function StatusErrorIcon() {
   return (
     <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-      <circle cx="8" cy="8" r="8" fill="var(--danger-color, #ef4444)" />
+      <circle cx="8" cy="8" r="8" fill="var(--danger-color, #c65746)" />
       <path
         d="M5 5L11 11M11 5L5 11"
         stroke="white"
diff --git a/src/pages/AiProvidersPage.module.scss b/src/pages/AiProvidersPage.module.scss
index ddf43b8..c252dca 100644
--- a/src/pages/AiProvidersPage.module.scss
+++ b/src/pages/AiProvidersPage.module.scss
@@ -93,9 +93,9 @@
 }
 
 .statFailure {
-  background-color: var(--failure-badge-bg, #fee2e2);
-  color: var(--failure-badge-text, #991b1b);
-  border-color: var(--failure-badge-border, #fca5a5);
+  background-color: var(--failure-badge-bg);
+  color: var(--failure-badge-text);
+  border-color: var(--failure-badge-border);
 }
 
 // 字段行样式：标签 + 值
@@ -311,8 +311,8 @@
 }
 
 .apiKeyEntryStatFailure {
-  background: var(--failure-badge-bg, #fee2e2);
-  color: var(--failure-badge-text, #991b1b);
+  background: var(--failure-badge-bg);
+  color: var(--failure-badge-text);
 }
 
 // OpenAI 模型发现（二级界面）
@@ -422,11 +422,11 @@
 }
 
 .statusBlockFailure {
-  background-color: var(--danger-color, #ef4444);
+  background-color: var(--danger-color);
 }
 
 .statusBlockMixed {
-  background-color: var(--warning-color, #f59e0b);
+  background-color: var(--warning-color);
 }
 
 .statusBlockIdle {
@@ -456,8 +456,8 @@
 }
 
 .statusRateLow {
-  color: var(--failure-badge-text, #991b1b);
-  background: var(--failure-badge-bg, #fee2e2);
+  color: var(--failure-badge-text);
+  background: var(--failure-badge-bg);
 }
 
 // ============================================
@@ -775,8 +775,8 @@
 // 暗色主题适配
 :global([data-theme='dark']) {
   .headerBadge {
-    background: rgba(59, 130, 246, 0.15);
-    border-color: rgba(59, 130, 246, 0.3);
+    background: rgba($primary-color, 0.14);
+    border-color: rgba($primary-color, 0.35);
     color: var(--text-secondary);
 
     strong {
@@ -785,22 +785,22 @@
   }
 
   .modelTag {
-    background: rgba(59, 130, 246, 0.1);
+    background: rgba($primary-color, 0.1);
     border-color: var(--border-secondary);
   }
 
   .excludedModelTag {
-    background: rgba(251, 191, 36, 0.22);
-    border-color: rgba(251, 191, 36, 0.55);
-    color: #fde68a;
+    background: rgba($warning-color, 0.22);
+    border-color: rgba($warning-color, 0.55);
+    color: var(--warning-color);
 
     .modelName {
-      color: #fde68a;
+      color: var(--warning-color);
     }
   }
 
   .excludedModelsLabel {
-    color: #fde68a;
+    color: var(--warning-color);
   }
 
   .apiKeyEntryCard {
@@ -827,7 +827,7 @@
   }
 
   .statusRateLow {
-    background: rgba(239, 68, 68, 0.2);
-    color: #fca5a5;
+    background: rgba($error-color, 0.24);
+    color: #f1b0a6;
   }
 }
diff --git a/src/pages/AuthFilesPage.module.scss b/src/pages/AuthFilesPage.module.scss
index 9645061..c32af34 100644
--- a/src/pages/AuthFilesPage.module.scss
+++ b/src/pages/AuthFilesPage.module.scss
@@ -56,7 +56,7 @@
 
 .errorBox {
   padding: $spacing-md;
-  background-color: rgba(239, 68, 68, 0.1);
+  background-color: rgba($error-color, 0.1);
   border: 1px solid var(--danger-color);
   border-radius: $radius-md;
   color: var(--danger-color);
@@ -382,11 +382,11 @@
 }
 
 .quotaBarFillMedium {
-  background-color: var(--warning-color, #f59e0b);
+  background-color: var(--warning-color);
 }
 
 .quotaBarFillLow {
-  background-color: var(--danger-color, #ef4444);
+  background-color: var(--danger-color);
 }
 
 .quotaMeta {
@@ -443,7 +443,7 @@
 .quotaError {
   font-size: 12px;
   color: var(--danger-color);
-  background-color: rgba(239, 68, 68, 0.08);
+  background-color: rgba($error-color, 0.08);
   border: 1px solid var(--danger-color);
   border-radius: $radius-sm;
   padding: $spacing-xs $spacing-sm;
@@ -451,9 +451,9 @@
 
 .quotaWarning {
   font-size: 12px;
-  color: var(--warning-color, #f59e0b);
-  background-color: rgba(245, 158, 11, 0.12);
-  border: 1px solid var(--warning-color, #f59e0b);
+  color: var(--warning-text);
+  background-color: var(--warning-bg);
+  border: 1px solid var(--warning-border);
   border-radius: $radius-sm;
   padding: $spacing-xs $spacing-sm;
 }
@@ -586,9 +586,9 @@
 }
 
 .statFailure {
-  background-color: var(--failure-badge-bg, #fee2e2);
-  color: var(--failure-badge-text, #991b1b);
-  border-color: var(--failure-badge-border, #fca5a5);
+  background-color: var(--failure-badge-bg);
+  color: var(--failure-badge-text);
+  border-color: var(--failure-badge-border);
 }
 
 // 状态监测栏
@@ -627,11 +627,11 @@
 }
 
 .statusBlockFailure {
-  background-color: var(--danger-color, #ef4444);
+  background-color: var(--danger-color);
 }
 
 .statusBlockMixed {
-  background-color: var(--warning-color, #f59e0b);
+  background-color: var(--warning-color);
 }
 
 .statusBlockIdle {
@@ -661,8 +661,8 @@
 }
 
 .statusRateLow {
-  color: var(--failure-badge-text, #991b1b);
-  background: var(--failure-badge-bg, #fee2e2);
+  color: var(--failure-badge-text);
+  background: var(--failure-badge-bg);
 }
 
 .prefixProxyEditor {
@@ -687,7 +687,7 @@
   padding: $spacing-sm $spacing-md;
   border-radius: $radius-md;
   border: 1px solid var(--danger-color);
-  background-color: rgba(239, 68, 68, 0.1);
+  background-color: rgba($error-color, 0.1);
   color: var(--danger-color);
   font-size: 12px;
 }
@@ -1097,7 +1097,7 @@
 .modelExcludedBadge {
   font-size: 10px;
   color: var(--danger-color);
-  background-color: rgba(239, 68, 68, 0.1);
+  background-color: rgba($error-color, 0.1);
   padding: 2px 6px;
   border-radius: 8px;
   border: 1px solid var(--danger-color);
diff --git a/src/pages/ConfigPage.module.scss b/src/pages/ConfigPage.module.scss
index 1d3386a..e1f610a 100644
--- a/src/pages/ConfigPage.module.scss
+++ b/src/pages/ConfigPage.module.scss
@@ -192,15 +192,15 @@
   color: var(--text-secondary);
 
   &.modified {
-    color: #f59e0b;
+    color: var(--warning-color);
   }
 
   &.saved {
-    color: #16a34a;
+    color: var(--success-color);
   }
 
   &.error {
-    color: #dc2626;
+    color: var(--danger-color);
   }
 }
 
@@ -395,8 +395,8 @@
   width: 7px;
   height: 7px;
   border-radius: 999px;
-  background: #f59e0b;
-  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
+  background: var(--warning-color);
+  box-shadow: 0 0 0 2px rgba($warning-color, 0.25);
 }
 
 :global([data-theme='dark']) {
diff --git a/src/pages/LoginPage.module.scss b/src/pages/LoginPage.module.scss
index 46958b2..a877ab0 100644
--- a/src/pages/LoginPage.module.scss
+++ b/src/pages/LoginPage.module.scss
@@ -4,7 +4,7 @@
 .container {
   min-height: 100vh;
   display: flex;
-  background: var(--bg-primary);
+  background: var(--bg-secondary);
 }
 
 // 左侧品牌展示区
@@ -88,7 +88,7 @@
   justify-content: center;
   align-items: center;
   padding: $spacing-2xl;
-  background: var(--bg-primary);
+  background: var(--bg-secondary);
   position: relative;
 
   @media (max-width: $breakpoint-mobile) {
@@ -183,7 +183,7 @@
   &:focus {
     outline: none;
     border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+    box-shadow: 0 0 0 3px rgba($primary-color, 0.18);
   }
 }
 
@@ -235,8 +235,8 @@
 
 // 错误提示框
 .errorBox {
-  background: rgba(239, 68, 68, 0.1);
-  border: 1px solid rgba(239, 68, 68, 0.4);
+  background: rgba($error-color, 0.1);
+  border: 1px solid rgba($error-color, 0.4);
   border-radius: $radius-md;
   padding: $spacing-sm $spacing-md;
   color: $error-color;
diff --git a/src/pages/LogsPage.module.scss b/src/pages/LogsPage.module.scss
index 08f853a..15cbdfa 100644
--- a/src/pages/LogsPage.module.scss
+++ b/src/pages/LogsPage.module.scss
@@ -308,7 +308,7 @@
   color: var(--text-primary);
 
   &:hover {
-    background: rgba(59, 130, 246, 0.06);
+    background: rgba($primary-color, 0.06);
   }
 
   @include tablet {
@@ -409,14 +409,14 @@
 
 .statusInfo {
   color: var(--info-color);
-  background: rgba(59, 130, 246, 0.12);
-  border-color: rgba(59, 130, 246, 0.25);
+  background: rgba($primary-color, 0.12);
+  border-color: rgba($primary-color, 0.25);
 }
 
 .statusWarn {
-  color: var(--warning-color);
-  background: rgba(245, 158, 11, 0.14);
-  border-color: rgba(245, 158, 11, 0.25);
+  color: var(--warning-text);
+  background: var(--warning-bg);
+  border-color: var(--warning-border);
 }
 
 .statusError {
@@ -427,20 +427,20 @@
 
 .levelInfo {
   color: var(--info-color);
-  background: rgba(59, 130, 246, 0.12);
-  border-color: rgba(59, 130, 246, 0.25);
+  background: rgba($primary-color, 0.12);
+  border-color: rgba($primary-color, 0.25);
 }
 
 .levelWarn {
-  color: var(--warning-color);
-  background: rgba(245, 158, 11, 0.14);
-  border-color: rgba(245, 158, 11, 0.25);
+  color: var(--warning-text);
+  background: var(--warning-bg);
+  border-color: var(--warning-border);
 }
 
 .levelError {
   color: var(--error-color);
-  background: rgba(239, 68, 68, 0.12);
-  border-color: rgba(239, 68, 68, 0.25);
+  background: rgba($error-color, 0.12);
+  border-color: rgba($error-color, 0.25);
 }
 
 .levelDebug,
@@ -452,8 +452,8 @@
 
 .methodBadge {
   color: var(--text-primary);
-  background: rgba(59, 130, 246, 0.08);
-  border-color: rgba(59, 130, 246, 0.22);
+  background: rgba($primary-color, 0.08);
+  border-color: rgba($primary-color, 0.22);
 }
 
 .path {
diff --git a/src/pages/OAuthPage.module.scss b/src/pages/OAuthPage.module.scss
index 199c024..dd032ea 100644
--- a/src/pages/OAuthPage.module.scss
+++ b/src/pages/OAuthPage.module.scss
@@ -61,13 +61,13 @@
   }
 
   &.error {
-    background-color: rgba(239, 68, 68, 0.1);
-    color: #dc2626;
+    background-color: rgba($error-color, 0.12);
+    color: $error-color;
   }
 
   &.waiting {
-    background-color: rgba(59, 130, 246, 0.1);
-    color: #3b82f6;
+    background-color: rgba($primary-color, 0.12);
+    color: var(--primary-color);
   }
 }
 
diff --git a/src/pages/QuotaPage.module.scss b/src/pages/QuotaPage.module.scss
index 9ddcc7a..f30b485 100644
--- a/src/pages/QuotaPage.module.scss
+++ b/src/pages/QuotaPage.module.scss
@@ -65,7 +65,7 @@
 
 .errorBox {
   padding: $spacing-md;
-  background-color: rgba(239, 68, 68, 0.1);
+  background-color: rgba($error-color, 0.1);
   border: 1px solid var(--danger-color);
   border-radius: $radius-md;
   color: var(--danger-color);
@@ -233,11 +233,11 @@
 }
 
 .quotaBarFillMedium {
-  background-color: var(--warning-color, #f59e0b);
+  background-color: var(--warning-color);
 }
 
 .quotaBarFillLow {
-  background-color: var(--danger-color, #ef4444);
+  background-color: var(--danger-color);
 }
 
 .quotaMeta {
@@ -276,7 +276,7 @@
 .quotaError {
   font-size: 12px;
   color: var(--danger-color);
-  background-color: rgba(239, 68, 68, 0.08);
+  background-color: rgba($error-color, 0.08);
   border: 1px solid var(--danger-color);
   border-radius: $radius-sm;
   padding: $spacing-xs $spacing-sm;
@@ -284,9 +284,9 @@
 
 .quotaWarning {
   font-size: 12px;
-  color: var(--warning-color, #f59e0b);
-  background-color: rgba(245, 158, 11, 0.12);
-  border: 1px solid var(--warning-color, #f59e0b);
+  color: var(--warning-text);
+  background-color: var(--warning-bg);
+  border: 1px solid var(--warning-border);
   border-radius: $radius-sm;
   padding: $spacing-xs $spacing-sm;
 }
diff --git a/src/pages/SystemPage.module.scss b/src/pages/SystemPage.module.scss
index dbef6f1..d8e8a06 100644
--- a/src/pages/SystemPage.module.scss
+++ b/src/pages/SystemPage.module.scss
@@ -83,7 +83,7 @@
   &:hover {
     transform: translateY(-1px);
     border-color: var(--primary-color);
-    box-shadow: 0 8px 18px rgba(59, 130, 246, 0.15);
+    box-shadow: 0 8px 18px rgba($primary-color, 0.18);
   }
 
   &:active {
diff --git a/src/pages/UsagePage.module.scss b/src/pages/UsagePage.module.scss
index 64cc992..8b973e1 100644
--- a/src/pages/UsagePage.module.scss
+++ b/src/pages/UsagePage.module.scss
@@ -75,12 +75,12 @@
 
   &:focus {
     outline: none;
-    box-shadow: var(--shadow), 0 0 0 3px rgba(59, 130, 246, 0.15);
+    box-shadow: var(--shadow), 0 0 0 3px rgba($primary-color, 0.18);
   }
 
   &[aria-expanded='true'] {
     border-color: var(--primary-color);
-    box-shadow: var(--shadow), 0 0 0 3px rgba(59, 130, 246, 0.15);
+    box-shadow: var(--shadow), 0 0 0 3px rgba($primary-color, 0.18);
   }
 }
 
@@ -135,8 +135,8 @@
 }
 
 .timeRangeOptionActive {
-  border-color: rgba(59, 130, 246, 0.5);
-  background: rgba(59, 130, 246, 0.10);
+  border-color: rgba($primary-color, 0.5);
+  background: rgba($primary-color, 0.1);
   font-weight: 600;
 }
 
@@ -149,7 +149,7 @@
 
 .errorBox {
   padding: 10px;
-  background-color: rgba(239, 68, 68, 0.1);
+  background-color: rgba($error-color, 0.1);
   border: 1px solid var(--error-color);
   border-radius: $radius-sm;
   color: var(--error-color);
@@ -170,7 +170,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(243, 244, 246, 0.75);
+  background: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
 }
@@ -191,9 +191,9 @@
 }
 
 .loadingOverlaySpinner {
-  border-color: rgba(59, 130, 246, 0.25);
+  border-color: rgba($primary-color, 0.25);
   border-top-color: var(--primary-color);
-  box-shadow: 0 0 10px rgba(59, 130, 246, 0.25);
+  box-shadow: 0 0 10px rgba($primary-color, 0.25);
 }
 
 .loadingOverlayText {
@@ -214,9 +214,9 @@
 }
 
 .statCard {
-  --accent: #3b82f6;
-  --accent-soft: rgba(59, 130, 246, 0.18);
-  --accent-border: rgba(59, 130, 246, 0.35);
+  --accent: var(--primary-color);
+  --accent-soft: rgba($primary-color, 0.18);
+  --accent-border: rgba($primary-color, 0.35);
 
   grid-column: span 4;
   position: relative;
@@ -366,11 +366,11 @@
 }
 
 .statSuccess {
-  color: var(--success-color, #22c55e);
+  color: var(--success-color);
 }
 
 .statFailure {
-  color: var(--danger-color, #ef4444);
+  color: var(--danger-color);
 }
 
 .statNeutral {
@@ -459,8 +459,8 @@
 }
 
 .apiSortBtnActive {
-  border-color: rgba(59, 130, 246, 0.5);
-  background: rgba(59, 130, 246, 0.10);
+  border-color: rgba($primary-color, 0.5);
+  background: rgba($primary-color, 0.1);
   color: var(--text-primary);
   font-weight: 600;
 }
@@ -759,7 +759,7 @@
   &:focus {
     outline: none;
     border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+    box-shadow: 0 0 0 3px rgba($primary-color, 0.18);
   }
 }
 
diff --git a/src/styles/components.scss b/src/styles/components.scss
index 76e59f5..5f657d5 100644
--- a/src/styles/components.scss
+++ b/src/styles/components.scss
@@ -78,14 +78,14 @@ textarea {
   border: 1px solid var(--border-color);
   border-radius: $radius-md;
   padding: 10px 12px;
-  background-color: var(--bg-primary);
+  background-color: var(--bg-secondary);
   color: var(--text-primary);
   transition: border-color $transition-fast, box-shadow $transition-fast;
 
   &:focus {
     outline: none;
     border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+    box-shadow: 0 0 0 3px rgba($primary-color, 0.18);
   }
 }
 
@@ -144,20 +144,20 @@ textarea {
 
   &.success {
     color: $success-color;
-    border-color: rgba(16, 185, 129, 0.35);
-    background: rgba(16, 185, 129, 0.08);
+    border-color: rgba($success-color, 0.35);
+    background: rgba($success-color, 0.08);
   }
 
   &.warning {
     color: $warning-color;
-    border-color: rgba(245, 158, 11, 0.35);
-    background: rgba(245, 158, 11, 0.08);
+    border-color: rgba($warning-color, 0.35);
+    background: rgba($warning-color, 0.08);
   }
 
   &.error {
     color: $error-color;
-    border-color: rgba(239, 68, 68, 0.35);
-    background: rgba(239, 68, 68, 0.08);
+    border-color: rgba($error-color, 0.35);
+    background: rgba($error-color, 0.08);
   }
 
   &.muted {
@@ -220,13 +220,13 @@ textarea {
   }
 
   &.success {
-    border-color: rgba(16, 185, 129, 0.4);
+    border-color: rgba($success-color, 0.4);
   }
   &.warning {
-    border-color: rgba(245, 158, 11, 0.4);
+    border-color: rgba($warning-color, 0.4);
   }
   &.error {
-    border-color: rgba(239, 68, 68, 0.4);
+    border-color: rgba($error-color, 0.4);
   }
 
   .message {
@@ -611,8 +611,8 @@ textarea {
 }
 
 .error-box {
-  background: rgba(239, 68, 68, 0.1);
-  border: 1px solid rgba(239, 68, 68, 0.4);
+  background: rgba($error-color, 0.1);
+  border: 1px solid rgba($error-color, 0.4);
   border-radius: $radius-md;
   padding: $spacing-sm $spacing-md;
   color: $error-color;
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index 83f102b..2b05a9e 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -229,7 +229,7 @@
         &:focus-visible {
           outline: none;
           background: var(--bg-secondary);
-          box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+          box-shadow: 0 0 0 2px rgba($primary-color, 0.22);
         }
 
         &.active {
@@ -382,9 +382,9 @@
     }
 
     &.active {
-      background: rgba(59, 130, 246, 0.12);
+      background: rgba($primary-color, 0.14);
       color: var(--primary-color);
-      border: 1px solid rgba(59, 130, 246, 0.3);
+      border: 1px solid rgba($primary-color, 0.35);
     }
   }
 
diff --git a/src/styles/themes.scss b/src/styles/themes.scss
index 1892763..b8ae5de 100644
--- a/src/styles/themes.scss
+++ b/src/styles/themes.scss
@@ -4,39 +4,55 @@
 
 // 浅色主题（默认）
 :root {
-  --bg-primary: #ffffff;
-  --bg-secondary: #f3f4f6;
-  --bg-tertiary: #e5e7eb;
+  // 极简暖灰：浅色模式
+  --bg-secondary: #faf9f5; // 页面背景（纸感）
+  --bg-primary: #f0eee8; // 容器/卡片背景
+  --bg-tertiary: #e9e6df; // hover/次级背景
+  --bg-hover: var(--bg-tertiary);
+  --bg-quinary: #f6f4ee;
+  --bg-error-light: rgba(198, 87, 70, 0.1);
 
-  --text-primary: #1f2937;
-  --text-secondary: #6b7280;
-  --text-tertiary: #9ca3af;
+  --text-primary: #2d2a26;
+  --text-secondary: #6d6760;
+  --text-tertiary: #a29c95;
+  --text-quaternary: #c0bab3;
+  --text-muted: var(--text-tertiary);
 
-  --border-color: #e5e7eb;
-  --border-hover: #d1d5db;
+  --border-color: #e3e1db; // 边框/分割线
+  --border-secondary: var(--border-color);
+  --border-primary: #d5d2cb;
+  --border-hover: #cecac4;
 
-  --primary-color: #3b82f6;
-  --primary-hover: #2563eb;
-  --primary-active: #1d4ed8;
+  --primary-color: #8b8680; // 行动色（主色）
+  --primary-hover: #7f7a74;
+  --primary-active: #726d67;
 
   --success-color: #10b981;
-  --warning-color: #f59e0b;
-  --error-color: #ef4444;
-  --info-color: #3b82f6;
+  --warning-color: #c65746; // 错误/警告色
+  --error-color: #c65746;
+  --danger-color: var(--error-color);
+  --info-color: var(--primary-color);
+
+  --warning-bg: rgba(198, 87, 70, 0.12);
+  --warning-border: rgba(198, 87, 70, 0.35);
+  --warning-text: var(--warning-color);
 
   --success-badge-bg: #d1fae5;
   --success-badge-text: #065f46;
   --success-badge-border: #6ee7b7;
 
-  --failure-badge-bg: #fee2e2;
-  --failure-badge-text: #991b1b;
-  --failure-badge-border: #fca5a5;
+  --failure-badge-bg: rgba(198, 87, 70, 0.14);
+  --failure-badge-text: #8a3a30;
+  --failure-badge-border: rgba(198, 87, 70, 0.35);
 
-  --count-badge-bg: rgba(59, 130, 246, 0.14);
+  --count-badge-bg: rgba(139, 134, 128, 0.18);
   --count-badge-text: var(--primary-active);
 
-  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow: 0 1px 2px 0 rgb(0 0 0 / 0.08);
+  --shadow-lg: 0 10px 18px -3px rgb(0 0 0 / 0.1);
+
+  --radius-md: 8px;
+  --accent-tertiary: var(--bg-tertiary);
 }
 
 // 深色主题（#191919）
@@ -44,34 +60,49 @@
   --bg-primary: #202020;
   --bg-secondary: #191919;
   --bg-tertiary: #262626;
+  --bg-hover: #2a2a2a;
+  --bg-quinary: #1f1f1f;
+  --bg-error-light: rgba(198, 87, 70, 0.18);
 
   --text-primary: #fafafa;
   --text-secondary: #a3a3a3;
   --text-tertiary: #737373;
+  --text-quaternary: #525252;
+  --text-muted: var(--text-tertiary);
 
   --border-color: #262626;
-  --border-hover: #404040;
+  --border-secondary: var(--border-color);
+  --border-primary: #404040;
+  --border-hover: #4a4a4a;
 
-  --primary-color: #3b82f6;
-  --primary-hover: #60a5fa;
-  --primary-active: #93c5fd;
+  --primary-color: #8b8680;
+  --primary-hover: #a39e98;
+  --primary-active: #bcb7b1;
 
   --success-color: #10b981;
-  --warning-color: #f59e0b;
-  --error-color: #ef4444;
-  --info-color: #3b82f6;
+  --warning-color: #c65746;
+  --error-color: #c65746;
+  --danger-color: var(--error-color);
+  --info-color: var(--primary-color);
+
+  --warning-bg: rgba(198, 87, 70, 0.22);
+  --warning-border: rgba(198, 87, 70, 0.45);
+  --warning-text: var(--warning-color);
 
   --success-badge-bg: rgba(6, 78, 59, 0.3);
   --success-badge-text: #6ee7b7;
   --success-badge-border: #059669;
 
-  --failure-badge-bg: rgba(153, 27, 27, 0.3);
-  --failure-badge-text: #fca5a5;
-  --failure-badge-border: #dc2626;
+  --failure-badge-bg: rgba(198, 87, 70, 0.24);
+  --failure-badge-text: #f1b0a6;
+  --failure-badge-border: rgba(198, 87, 70, 0.5);
 
-  --count-badge-bg: rgba(59, 130, 246, 0.25);
+  --count-badge-bg: rgba(139, 134, 128, 0.28);
   --count-badge-text: var(--primary-active);
 
   --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3);
+
+  --radius-md: 8px;
+  --accent-tertiary: var(--bg-tertiary);
 }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 3de6bbb..ec7e53a 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -3,11 +3,11 @@
  */
 
 // 颜色
-$primary-color: #3b82f6;
+$primary-color: #8b8680;
 $success-color: #10b981;
-$warning-color: #f59e0b;
-$error-color: #ef4444;
-$info-color: #3b82f6;
+$warning-color: #c65746;
+$error-color: #c65746;
+$info-color: #8b8680;
 
 // 灰阶
 $gray-50: #f9fafb;
diff --git a/src/utils/usage.ts b/src/utils/usage.ts
index 66dceb4..ddd2119 100644
--- a/src/utils/usage.ts
+++ b/src/utils/usage.ts
@@ -1003,10 +1003,10 @@ export interface ChartData {
 }
 
 const CHART_COLORS = [
-  { borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.15)' },
+  { borderColor: '#8b8680', backgroundColor: 'rgba(139, 134, 128, 0.15)' },
   { borderColor: '#22c55e', backgroundColor: 'rgba(34, 197, 94, 0.15)' },
   { borderColor: '#f59e0b', backgroundColor: 'rgba(245, 158, 11, 0.15)' },
-  { borderColor: '#ef4444', backgroundColor: 'rgba(239, 68, 68, 0.15)' },
+  { borderColor: '#c65746', backgroundColor: 'rgba(198, 87, 70, 0.15)' },
   { borderColor: '#8b5cf6', backgroundColor: 'rgba(139, 92, 246, 0.15)' },
   { borderColor: '#06b6d4', backgroundColor: 'rgba(6, 182, 212, 0.15)' },
   { borderColor: '#ec4899', backgroundColor: 'rgba(236, 72, 153, 0.15)' },