:root {
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f7f7f8;
  --color-bg-tertiary: #ececf1;
  --color-bg-chat: #ffffff;
  --color-bg-user-msg: #f4f4f5;
  --color-bg-ai-msg: #ffffff;
  --color-bg-sidebar: #f7f7f8;
  --color-bg-hover: rgba(0, 0, 0, 0.04);
  --color-bg-active: rgba(0, 0, 0, 0.06);

  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-surface-overlay: rgba(255, 255, 255, 0.85);
  --color-surface-modal: #ffffff;

  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-light: rgba(0, 0, 0, 0.04);
  --color-border-heavy: rgba(0, 0, 0, 0.12);
  --color-border-focus: #10a37f;

  --color-text-primary: #2d333a;
  --color-text-secondary: #6b727c;
  --color-text-tertiary: #9ca3af;
  --color-text-placeholder: #acacbe;
  --color-text-inverse: #ffffff;
  --color-text-link: #10a37f;

  --color-accent: #10a37f;
  --color-accent-hover: #0e8c6b;
  --color-accent-active: #0b7559;
  --color-accent-soft: rgba(16, 163, 127, 0.08);
  --color-accent-soft-hover: rgba(16, 163, 127, 0.15);
  --color-accent-glow: rgba(16, 163, 127, 0.25);

  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-danger-soft: rgba(239, 68, 68, 0.08);
  --color-warning: #f59e0b;
  --color-warning-soft: rgba(245, 158, 11, 0.08);
  --color-success: #10a37f;
  --color-success-soft: rgba(16, 163, 127, 0.08);

  --color-gradient-start: #10a37f;
  --color-gradient-end: #0d9488;

  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-md: 14px;
  --font-size-lg: 15px;
  --font-size-xl: 16px;
  --font-size-2xl: 18px;
  --font-size-3xl: 20px;
  --font-size-4xl: 24px;
  --font-size-5xl: 28px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 1.75;

  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;

  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-3xl: 14px;
  --radius-4xl: 16px;
  --radius-full: 9999px;

  --shadow-xs: 0 0 0 1px rgba(0, 0, 0, 0.02);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 16px 24px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.04);
  --shadow-3xl: 0 24px 48px rgba(0, 0, 0, 0.12), 0 12px 24px rgba(0, 0, 0, 0.06);
  --shadow-glow: 0 0 0 3px rgba(16, 163, 127, 0.15);

  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  --sidebar-width: 260px;
  --sidebar-collapsed-width: 0px;
  --header-height: 0px;
  --input-min-height: 44px;
  --max-content-width: 800px;
}

[data-theme="dark"] {
  --color-bg-primary: #212121;
  --color-bg-secondary: #1a1a1a;
  --color-bg-tertiary: #2d2d2d;
  --color-bg-chat: #212121;
  --color-bg-user-msg: #2d2d2d;
  --color-bg-ai-msg: #212121;
  --color-bg-sidebar: #1a1a1a;
  --color-bg-hover: rgba(255, 255, 255, 0.06);
  --color-bg-active: rgba(255, 255, 255, 0.1);

  --color-surface: #2d2d2d;
  --color-surface-elevated: #363636;
  --color-surface-overlay: rgba(33, 33, 33, 0.9);
  --color-surface-modal: #2d2d2d;

  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-light: rgba(255, 255, 255, 0.04);
  --color-border-heavy: rgba(255, 255, 255, 0.12);
  --color-border-focus: #10a37f;

  --color-text-primary: #ececf1;
  --color-text-secondary: #acacbe;
  --color-text-tertiary: #6b727c;
  --color-text-placeholder: #6b727c;
  --color-text-inverse: #1a1a1a;
  --color-text-link: #10a37f;

  --color-accent: #10a37f;
  --color-accent-hover: #0e8c6b;
  --color-accent-active: #0b7559;
  --color-accent-soft: rgba(16, 163, 127, 0.12);
  --color-accent-soft-hover: rgba(16, 163, 127, 0.2);
  --color-accent-glow: rgba(16, 163, 127, 0.3);

  --shadow-xs: 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.3);
  --shadow-2xl: 0 16px 24px rgba(0, 0, 0, 0.4);
  --shadow-3xl: 0 24px 48px rgba(0, 0, 0, 0.5);
}