html[data-theme="light"] {
    color-scheme: light;
    --color-bg: #eef4f8;
    --color-surface: #ffffff;
    --color-surface-strong: #f8fbfd;
    --color-border: #d5e3ec;
    --color-text-main: #0f172a;
    --color-text-muted: #5f7286;
    --color-text-on-hover: #0f172a;
    --shell-sidebar-bg: rgba(255, 255, 255, 0.94);
    --shell-topbar-bg: rgba(255, 255, 255, 0.82);
    --shell-nav-active-bg: rgba(13, 148, 136, 0.12);
    --shell-nav-active-text: #0d9488;
    --shell-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
    --theme-toggle-bg: rgba(255, 255, 255, 0.92);
    --theme-toggle-border: rgba(15, 23, 42, 0.08);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #08131c;
    --color-surface: #0e1b28;
    --color-surface-strong: #132434;
    --color-border: #223749;
    --color-text-main: #edf5fb;
    --color-text-muted: #8fa5b8;
    --color-text-on-hover: #f8fbff;
    --shell-sidebar-bg: rgba(10, 21, 31, 0.96);
    --shell-topbar-bg: rgba(8, 19, 28, 0.82);
    --shell-nav-active-bg: rgba(45, 212, 191, 0.12);
    --shell-nav-active-text: #7ce6d7;
    --shell-shadow: 0 22px 60px rgba(0, 0, 0, 0.35);
    --theme-toggle-bg: rgba(14, 27, 40, 0.92);
    --theme-toggle-border: rgba(143, 165, 184, 0.18);
}

html,
body {
    background: var(--color-bg);
    color: var(--color-text-main);
}

body {
    transition:
        background-color var(--transition-base, 250ms ease),
        color var(--transition-base, 250ms ease);
}