:root {
    /* Light mode colors */
    --color-background: #f4f4f4; /* Page background */
    --color-text: #333; /* General text color */
    --color-primary: #333; /* Primary color for text and icons */
    --color-accent: #555; /* Accent color for highlights */
    --color-hover: #e0e0e0; /* Light mode hover color */
    --list-item-background: #fff; /* Light mode list item background */
    --color-footer-background: #e0e0e0; /* Footer background */
    --color-overlay-background: rgba(0, 0, 0, 0.5); /* Overlay background */
    --color-overlay-text: #fff; /* Overlay text color */
    --font-size-heading: 2em;
    --font-size-link: 1.2em;

    /* Header specific */
    --color-header-background: #fff; /* Header background color in light mode */
    --header-banner-image: url('media/banner.png'); /* Banner image for light mode */
    --color-active-background: #f4f4f4;

    /* Label and badge colors for light mode */
    --label-completed-bg: rgba(0, 128, 0, 0.1);
    --label-completed-text: #008000;
    --label-in-progress-bg: rgba(255, 165, 0, 0.1);
    --label-in-progress-text: #FFA500;
    --label-upcoming-bg: rgba(0, 0, 255, 0.1);
    --label-upcoming-text: #0000FF;
    --date-badge-bg: rgba(0, 123, 255, 0.1);
    --date-badge-text: #333;
}

:root.dark-mode {
    /* Dark mode colors */
    --color-background: #333; /* Dark Gray */
    --color-text: #f4f4f4; /* Light Gray */
    --color-primary: #f4f4f4; /* Light Gray for text */
    --color-accent: #ddd; /* Lighter Gray for subtle highlights */
    --color-hover: #444; /* Dark mode hover color */
    --list-item-background: #444; /* Dark mode list item background */
    --color-footer-background: #444; /* Darker Gray for Footer */
    --color-overlay-background: rgba(0, 0, 0, 0.7); /* Darker overlay for better contrast */
    --color-overlay-text: #f4f4f4; /* Light text color for better readability */

    /* Header specific */
    --color-header-background: #222; /* Darker background for header in dark mode */
    --header-banner-image: url('media/banner_dark.png'); /* Banner image for dark mode */

    /* Label and badge colors for dark mode */
    --label-completed-bg: rgba(0, 128, 0, 0.2);
    --label-completed-text: #00ff00;
    --label-in-progress-bg: rgba(255, 165, 0, 0.2);
    --label-in-progress-text: #ffcc00;
    --label-upcoming-bg: rgba(0, 0, 255, 0.2);
    --label-upcoming-text: #3399ff;
    --date-badge-bg: rgba(0, 123, 255, 0.2);
    --date-badge-text: #f4f4f4;
}

#theme-toggle, 
#theme-toggle-mobile {
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    font-size: 1.5em;
}

#theme-toggle i,
#theme-toggle-mobile i {
    transition: color 0.3s;
}

:root.dark-mode #theme-toggle i,
:root.dark-mode #theme-toggle-mobile i {
    color: #f4f4f4; /* Light color in dark mode */
}

.theme-toggle-desktop {
    margin-left: 20px; /* Space between menu items and theme toggle */
}

.theme-toggle-mobile {
    display: none; /* Hide by default */
}