/* Define custom properties for colors in both light and dark modes */
:root {
    --background-light: #fff; /* Light mode background color (white) */
    --text-light: #000; /* Light mode text color (black) */
    --background-dark: #000; /* Dark mode background color (black) */
    --text-dark: #fff; /* Dark mode text color (white) */
    --link-color-light: #000; /* Black link color in light mode */
    --link-color-dark: #fff; /* White link color in dark mode */
    --fol6-light: #fff;
    --fol6-dark: #000;
}

/* Reset styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Default body styles */
body {
    background-color: var(--background-light);
    color: var(--text-light);
    transition: background-color 0.3s, color 0.3s;
}

/* Link styling */
a {
    color: var(--link-color-light); /* Black in light mode */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    color: #555; /* Slightly different shade for active links */
}

/* Dark mode styles */
.dark-mode {
    background-color: var(--background-dark);
    color: var(--text-dark);
}

.dark-mode a {
    color: var(--link-color-dark); /* White in dark mode */
}

.fol6 {
    background-color: var(--fol6-light);
}

.dark-mode .fol6 {
    background-color: var(--fol6-dark);
}

/* Auto dark mode based on system preference */
@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--background-dark);
        color: var(--text-dark);
    }

    a {
        color: var(--link-color-dark); /* White link color in dark mode */
    }

    .fol6 {
        background-color: var(--fol6-dark);
    }
}