:root {
    color-scheme: light dark;
    --sidebar-width: 220px;
    --theme-blue1: #1969b3;
    --theme-blue2: #0b5192;
    --theme-green1: #338d33;
    --theme-green2: #0c9130;
}

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

body.preload * {
    transition: none !important;
}

:root, :root[data-theme="light"] {
    /* Background colors */
    --bg-body: #f8f9fc;
    --bg-sidebar: #4e73df;
    --bg-topbar: #ffffff;
    --bg-panel: #ffffff;
    --bg-dialog: #ffffff;
    --bg-table-header: #f5f5f5;
    --bg-table-row-even: #f9f9f9;
    --bg-table-row-hover: #f0f0f0;
    --bg-input: #ffffff;
    --bg-button: #94a0ab;
    --bg-button-hover: #7a8591;
    --bg-pill: #e3e6f0;
    --bg-pill-success: #d4edda;
    --bg-nav-active: rgba(40, 40, 118, 0.5);
    --bg-tab-inactive: #e9e9e9;
    --bg-tab-active: #ffffff;
    --bg-sysinfo-drive: #ddfbec;

    /* Text colors */
    --text-primary: #000000;
    --text-secondary: #777777;
    --text-muted: #666666;
    --text-light: #999999;
    --text-white: #ffffff;
    --text-pill-success: #155724;
    --text-tab-inactive: #a1a1a1;
    --text-tab-active: #1969b3;
    --text-sidebar-link: #ffffff;

    /* Border colors */
    --border-color: #e3e6f0;
    --border-input: #d9d9d9;
    --border-table: #ddd;
    --border-dialog: #e1e1e1;
    --border-sidebar-hr: #6888e4;

    /* Shadow colors */
    --shadow-topbar: rgba(58, 59, 69, 0.15);
    --shadow-panel: rgba(0, 0, 0, 0.2);
    --shadow-dialog: rgba(0, 0, 0, 0.16);
}

/* Dark Theme */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Background colors */
        --bg-body: #1a1a1a;
        --bg-sidebar: #2c3e87;
        --bg-topbar: #2d2d2d;
        --bg-panel: #2d2d2d;
        --bg-dialog: #2d2d2d;
        --bg-table-header: #3a3a3a;
        --bg-table-row-even: #333333;
        --bg-table-row-hover: #404040;
        --bg-input: #3a3a3a;
        --bg-button: #5a6a7b;
        --bg-button-hover: #6a7a8b;
        --bg-pill: #3a3a3a;
        --bg-pill-success: #1e4d2b;
        --bg-nav-active: rgba(20, 20, 60, 0.7);
        --bg-tab-inactive: #3a3a3a;
        --bg-tab-active: #2d2d2d;
        --bg-sysinfo-drive: #1e3d2b;

        /* Text colors */
        --text-primary: #e0e0e0;
        --text-secondary: #b0b0b0;
        --text-muted: #a0a0a0;
        --text-light: #808080;
        --text-white: #ffffff;
        --text-pill-success: #90ee90;
        --text-tab-inactive: #888888;
        --text-tab-active: #5eb3ff;
        --text-sidebar-link: #e8e8e8;

        /* Border colors */
        --border-color: #404040;
        --border-input: #505050;
        --border-table: #404040;
        --border-dialog: #404040;
        --border-sidebar-hr: #4a5a9a;

        /* Shadow colors */
        --shadow-topbar: rgba(0, 0, 0, 0.4);
        --shadow-panel: rgba(0, 0, 0, 0.5);
        --shadow-dialog: rgba(0, 0, 0, 0.6);
    }
}

/* Explicit dark theme override */
:root[data-theme="dark"] {
    /* Background colors */
    --bg-body: #1a1a1a;
    --bg-sidebar: #2c3e87;
    --bg-topbar: #2d2d2d;
    --bg-panel: #2d2d2d;
    --bg-dialog: #2d2d2d;
    --bg-table-header: #3a3a3a;
    --bg-table-row-even: #333333;
    --bg-table-row-hover: #404040;
    --bg-input: #3a3a3a;
    --bg-button: #5a6a7b;
    --bg-button-hover: #6a7a8b;
    --bg-pill: #3a3a3a;
    --bg-pill-success: #1e4d2b;
    --bg-nav-active: rgba(20, 20, 60, 0.7);
    --bg-tab-inactive: #3a3a3a;
    --bg-tab-active: #2d2d2d;
    --bg-sysinfo-drive: #1e3d2b;

    /* Text colors */
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-muted: #a0a0a0;
    --text-light: #808080;
    --text-white: #ffffff;
    --text-pill-success: #90ee90;
    --text-tab-inactive: #888888;
    --text-tab-active: #5eb3ff;
    --text-sidebar-link: #e8e8e8;

    /* Border colors */
    --border-color: #404040;
    --border-input: #505050;
    --border-table: #404040;
    --border-dialog: #404040;
    --border-sidebar-hr: #4a5a9a;

    /* Shadow colors */
    --shadow-topbar: rgba(0, 0, 0, 0.4);
    --shadow-panel: rgba(0, 0, 0, 0.5);
    --shadow-dialog: rgba(0, 0, 0, 0.6);
}