:root {
  --color-bg: #ffffff;
  --color-bg-elevated: #f9fafb;
  --color-bg-code: #f3f4f6;
  --color-text: #111111;
  --color-text-muted: #666666;
  --color-border: #e5e7eb;
  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-accent-subtle: rgba(37, 99, 235, 0.08);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.1);
  --header-bg: rgba(255, 255, 255, 0.9);
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.35);
}

html[data-theme="dark"] {
  --color-bg: #0f0f0f;
  --color-bg-elevated: #1a1a1a;
  --color-bg-code: #262626;
  --color-text: #f5f5f5;
  --color-text-muted: #a3a3a3;
  --color-border: #2e2e2e;
  --color-accent: #3b82f6;
  --color-accent-hover: #60a5fa;
  --color-accent-subtle: rgba(59, 130, 246, 0.12);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.5);
  --header-bg: rgba(15, 15, 15, 0.92);
  --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.4);
}