/* Define custom properties for colors in both light and dark modes */
:root {
    --background-light: #fff;
    --text-light: #000;
    --background-dark: #000;
    --text-dark: #fff;
    --link-color-light: #000;
    --link-color-dark: #fff;
    --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 ease, color 0.3s ease;
}

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

a:hover {
    text-decoration: underline;
}

a:active {
    color: #555;
}

/* ===========================
   DARK MODE
=========================== */

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

body.dark-mode a {
    color: var(--link-color-dark);
}

/* Header */
.fol6 {
    background-color: var(--fol6-light);
    transition: background-color 0.3s ease;
}

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

/* Left sidebar */
body.dark-mode .funrocks3 {
    background-color: var(--background-dark);
    color: var(--text-dark);
}

/* Cards / Panels */
body.dark-mode .fol3 {
    background-color: var(--background-dark);
    color: var(--text-dark);
}

/* Containers */
body.dark-mode .container,
body.dark-mode .container2 {
    background-color: transparent;
    color: var(--text-dark);
}

/* Optional: SVG icons inherit text color */
body.dark-mode svg {
    fill: currentColor;
}

/* ===========================
   SYSTEM PREFERENCE
=========================== */

@media (prefers-color-scheme: dark) {
    body:not(.dark-mode) {
        background-color: var(--background-dark);
        color: var(--text-dark);
    }

    body:not(.dark-mode) a {
        color: var(--link-color-dark);
    }

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