:root {
--color-bg: #ffffff;
--color-surface: #f9f9f9;
--color-text: #1a1a2e;
--color-text-muted: #6b7280;
--color-border: #e5e7eb;
--color-card: #ffffff;
--color-card-shadow: rgba(0,0,0,0.08);
--color-primary: #7c3aed;
--color-primary-light: #f3f0ff;
--color-input-bg: #ffffff;
--color-input-border: #d1d5db;
--color-sidenav-bg: #1a1a2e;
}
html[data-theme="dark"] {
--color-bg: #0f0f1a;
--color-surface: #1a1a2e;
--color-text: #f1f5f9;
--color-text-muted: #94a3b8;
--color-border: #2d2d44;
--color-card: #1e1e30;
--color-card-shadow: rgba(0,0,0,0.4);
--color-primary: #a78bfa;
--color-primary-light: #2d1f4e;
--color-input-bg: #1e1e30;
--color-input-border: #3d3d5c;
--color-sidenav-bg: #0f0f1a;
}
*, *::before, *::after {
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

body {
background: var(--color-bg);
color: var(--color-text);
}
.db-card, .rp-report-item, .mp-card {
background: var(--color-card);
box-shadow: 0 2px 8px var(--color-card-shadow);
}
input, textarea, select {
background: var(--color-input-bg);
border-color: var(--color-input-border);
color: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition: none !important;
}
}