:root {
  --color-brand: #2563eb; /* blue-600 */
  --color-brand-hover: #1d4ed8; /* blue-700 */
  --color-brand-active: #1e40af; /* blue-800 */
  
  /* 新增：更语义化品牌 / UI 变量 (ChatPage) */
  --color-brand-primary: #2563eb;
  --color-brand-secondary: #1d4ed8;
  --color-brand-accent: #60a5fa;
  --color-ui-bg: #111827;
  --color-ui-surface: #1f2937;
  --color-ui-border: #374151;
  --color-ui-text: #f3f4f6;
  --color-ui-text-muted: #9ca3af;
  
  --color-fg: #f3f4f6; /* gray-100 */
  --color-fg-strong: #ffffff; /* white */
  --color-fg-muted: #9ca3af; /* gray-400 */
  --color-fg-subtle: #6b7280; /* gray-500 */
  --color-border: #374151; /* gray-700 */
  --color-border-muted: #4b5563; /* gray-600 */
  --color-surface: #1f2937; /* gray-800 */
  --color-surface-elevated: #111827; /* gray-900 */
  --color-focus: #60a5fa; /* blue-400 */
  --color-danger: #f87171; /* red-400 */
  
  /* 间距变量 */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 3rem;
  
  /* 圆角变量 */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  
  /* 阴影变量 */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  
  /* 字体变量 */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --color-brand: #2563eb;
    --color-brand-hover: #1d4ed8;
    --color-brand-active: #1e40af;
    
    --color-brand-primary: #2563eb;
    --color-brand-secondary: #1d4ed8;
    --color-brand-accent: #2563eb;
    --color-ui-bg: #ffffff;
    --color-ui-surface: #f9fafb;
    --color-ui-border: #e5e7eb;
    --color-ui-text: #111827;
    --color-ui-text-muted: #6b7280;
    
    --color-fg: #111827;
    --color-fg-strong: #1f2937;
    --color-fg-muted: #6b7280;
    --color-fg-subtle: #9ca3af;
    --color-border: #e5e7eb;
    --color-border-muted: #d1d5db;
    --color-surface: #ffffff;
    --color-surface-elevated: #f9fafb;
    --color-focus: #2563eb;
    --color-danger: #dc2626;
    
    /* 阴影在亮色模式下更明显 */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  }
}