:root {
    --body-bg: #060505;
    --main-bg: #0A0E15;
    --sidebar-bg: #111520;
    --light-bg: #171B27;
    --light-bg-hover: #1D212E;
    --border-color: rgba(255, 255, 255, 0.05);
    --accent-color: #ECD06F;
    --red-color: #BC4649;
    --green-color: #38AD69;
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.7);
}

:root[data-theme="light"] {
    --body-bg: #FFFFFF;
    --main-bg: #F5F5F5;
    --sidebar-bg: #FFFFFF;
    --light-bg: #f1f1f1;
    --light-bg-hover: #e1e1e1;
    --border-color: rgba(0, 0, 0, 0.05);
    --border-color-dark: rgba(0, 0, 0, 0.1);
    --accent-color: #ECD06F;
    --red-color: #BC4649;
    --green-color: #38AD69;
    --text-primary: #000000;
    --text-secondary: rgba(0, 0, 0, 0.7);
}

@media (prefers-color-scheme: light) {
    :root {
        --body-bg: #FFFFFF;
        --main-bg: #F5F5F5;
        --sidebar-bg: #FFFFFF;
        --light-bg: #f1f1f1;
        --light-bg-hover: #e1e1e1;
        --border-color: rgba(0, 0, 0, 0.05);
        --border-color-dark: rgba(0, 0, 0, 0.1);
        --accent-color: #ECD06F;
        --red-color: #BC4649;
        --green-color: #38AD69;
        --text-primary: #000000;
        --text-secondary: rgba(0, 0, 0, 0.7);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --body-bg: #060505;
        --main-bg: #0A0E15;
        --sidebar-bg: #111520;
        --light-bg: #171B27;
        --light-bg-hover: #1D212E;
        --border-color: rgba(255, 255, 255, 0.05);
        --accent-color: #ECD06F;
        --red-color: #BC4649;
        --green-color: #38AD69;
        --text-primary: #FFFFFF;
        --text-secondary: rgba(255, 255, 255, 0.7);
    }
}

:root[data-theme="light"] {
    --body-bg: #FFFFFF;
    --main-bg: #F5F5F5;
    --sidebar-bg: #FFFFFF;
    --light-bg: #f1f1f1;
    --light-bg-hover: #e1e1e1;
    --border-color: rgba(0, 0, 0, 0.05);
    --border-color-dark: rgba(0, 0, 0, 0.1);
    --accent-color: #ECD06F;
    --red-color: #BC4649;
    --green-color: #38AD69;
    --text-primary: #000000;
    --text-secondary: rgba(0, 0, 0, 0.7);
}

:root[data-theme="dark"] {
    --body-bg: #060505;
    --main-bg: #0A0E15;
    --sidebar-bg: #111520;
    --light-bg: #171B27;
    --light-bg-hover: #1D212E;
    --border-color: rgba(255, 255, 255, 0.05);
    --accent-color: #ECD06F;
    --red-color: #BC4649;
    --green-color: #38AD69;
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.7);
}