:root {
  --color-bg: #ffffff;
  --color-surface: #f5f5f5;
  --color-surface-alt: #eaeaea;
  --color-text: #1a1a1a;
  --color-text-muted: #666666;
  --color-border: #e0e0e0;
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-text: #ffffff;
  --color-input-bg: #ffffff;
  --color-input-border: #d1d5db;
  --color-code-bg: #f3f4f6;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-error: #dc2626;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
  --radius: 6px;
  --radius-lg: 10px;
}

[data-theme="dark"] {
  --color-bg: #0f0f0f;
  --color-surface: #1a1a1a;
  --color-surface-alt: #242424;
  --color-text: #e5e5e5;
  --color-text-muted: #a0a0a0;
  --color-border: #333333;
  --color-primary: #3b82f6;
  --color-primary-hover: #60a5fa;
  --color-primary-text: #ffffff;
  --color-input-bg: #262626;
  --color-input-border: #404040;
  --color-code-bg: #1e1e1e;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0f0f0f;
    --color-surface: #1a1a1a;
    --color-surface-alt: #242424;
    --color-text: #e5e5e5;
    --color-text-muted: #a0a0a0;
    --color-border: #333333;
    --color-primary: #3b82f6;
    --color-primary-hover: #60a5fa;
    --color-primary-text: #ffffff;
    --color-input-bg: #262626;
    --color-input-border: #404040;
    --color-code-bg: #1e1e1e;
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
}