/* Light Theme (default) */
:root {
    /* Backgrounds */
    --bg-dim: #E5DFC5;
    --bg0: #F3EAD3;
    --bg1: #EAE4CA;
    --bg2: #E5DFC5;
    --bg3: #DDD8BE;
    --bg4: #DBD3BA;

    /* Accents */
    --primary-color: #3A94C5;
    /* blue */
    --secondary-color: #F57D26;
    /* orange */
    --accent-red: #F85552;
    --accent-yellow: #DFA000;
    --accent-green: #BDA101;
    --accent-aqua: #35A77C;
    --accent-purple: #DF69BA;

    /* Text */
    --text-color: #5C6A72;
    --text-muted: #829181;

    /* Status Lines */
    --statusline1: #93B259;
    --statusline2: #708089;
    --statusline3: #E66868;
}

/* Dark Theme */
body[data-theme="dark"] {
    /* Backgrounds */
    --bg-dim: #293136;
    --bg0: #333C43;
    --bg1: #3A464C;
    --bg2: #434F55;
    --bg3: #4D5960;
    --bg4: #555F66;
    --bg5: #5D6B66;

    /* Accents */
    --primary-color: #7FBBB3;
    /* blue */
    --secondary-color: #E69875;
    /* orange */
    --accent-red: #E67E80;
    --accent-yellow: #DBBC7F;
    --accent-green: #A7C080;
    --accent-aqua: #83C092;
    --accent-purple: #D699B6;

    /* Text */
    --text-color: #D3C6AA;
    --text-muted: #9DA9A0;

    /* Status Lines */
    --statusline1: #A7C080;
    --statusline2: #D3C6AA;
    --statusline3: #E67E80;

    /* Specials */
    --bg-visual: #59464C;
    --bg-yellow: #55544A;
    --bg-green: #48584E;
    --bg-blue: #3F5865;
}

/* Update component colors for dark theme */
body[data-theme="dark"] .carousel-item {
    background-color: var(--bg1);
    border-color: var(--bg3);
}

body[data-theme="dark"] .timeline-item {
    background-color: var(--bg2);
}

body[data-theme="dark"] footer {
    background-color: var(--bg-dim);
}

body[data-theme="dark"] .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--bg-blue);
}

body[data-theme="dark"] .btn-primary:hover {
    background-color: var(--accent-aqua);
    border-color: var(--accent-aqua);
}