:root {
    color-scheme: light;
    --body-bg: #f8fafc;
    --body-text: #0f172a;
    --surface-bg: rgba(255, 255, 255, 0.95);
    --surface-border: rgba(226, 232, 240, 0.7);
    --surface-soft-bg: rgba(148, 163, 184, 0.15);
    --muted-text: #64748b;
}

[data-theme="dark"] {
    color-scheme: dark;
    --body-bg: #0f172a;
    --body-text: #e2e8f0;
    --surface-bg: rgba(15, 23, 42, 0.92);
    --surface-border: rgba(71, 85, 105, 0.6);
    --surface-soft-bg: rgba(30, 41, 59, 0.6);
    --muted-text: #94a3b8;
}

body {
    background-color: var(--body-bg) !important;
    color: var(--body-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] .text-slate-900,
[data-theme="dark"] .text-slate-800,
[data-theme="dark"] .text-slate-700 {
    color: var(--body-text) !important;
}

[data-theme="dark"] .text-slate-600,
[data-theme="dark"] .text-slate-500,
[data-theme="dark"] .text-slate-400,
[data-theme="dark"] .text-slate-300 {
    color: var(--muted-text) !important;
}

[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-white\/95,
[data-theme="dark"] .bg-white\/90,
[data-theme="dark"] .bg-white\/85,
[data-theme="dark"] .bg-white\/80 {
    background-color: var(--surface-bg) !important;
}

[data-theme="dark"] .bg-white\/10,
[data-theme="dark"] .bg-white\/15,
[data-theme="dark"] .bg-white\/5,
[data-theme="dark"] .bg-slate-100\/40,
[data-theme="dark"] .bg-slate-100\/60,
[data-theme="dark"] .bg-slate-50,
[data-theme="dark"] .bg-slate-50\/70 {
    background-color: var(--surface-soft-bg) !important;
}

[data-theme="dark"] .border-white\/80,
[data-theme="dark"] .border-white\/40,
[data-theme="dark"] .border-white\/20,
[data-theme="dark"] .border-white\/10,
[data-theme="dark"] .border-slate-200,
[data-theme="dark"] .border-slate-200\/60,
[data-theme="dark"] .border-slate-200\/70,
[data-theme="dark"] .border-slate-100,
[data-theme="dark"] .border-slate-100\/60 {
    border-color: var(--surface-border) !important;
}

[data-theme="dark"] .shadow-card {
    box-shadow: 0 25px 60px -20px rgba(10, 20, 40, 0.65) !important;
}

[data-theme="dark"] .theme-toggle {
    border-color: rgba(148, 163, 184, 0.45);
    color: var(--body-text);
}

[data-theme="dark"] .theme-toggle:hover {
    border-color: rgba(148, 163, 184, 0.65);
}