:root {
  /* Light theme defaults */
  --color-bg: #ffffff;
  --color-text: #222222;
  --color-accent: #0066cc;
  --color-border: #e0e0e0;
  --color-card: #f8fafc;
  --color-muted: #64748b;
  --color-success: #166534;
  --color-warning: #92400e;
  --color-error: #991b1b;
  --color-code-bg: #f3f4f6;
  --color-code-text: #111827;
  --color-nav-bg: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] {
  --color-bg: #121212;
  --color-text: #e0e0e0;
  --color-accent: #3399ff;
  --color-border: #333333;
  --color-card: #1e293b;
  --color-muted: #94a3b8;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-code-bg: #1f2937;
  --color-code-text: #f9fafb;
  --color-nav-bg: rgba(18, 18, 18, 0.95);
}

.theme-transition * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* System preference detection */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #121212;
    --color-text: #e0e0e0;
    --color-accent: #3399ff;
    --color-border: #333333;
    --color-card: #1e293b;
    --color-muted: #94a3b8;
  }
}