:root {
    --link-color: #304835;
    --link-color-visited: #304835;
    --link-color-hover: #3b5c40;       /* slightly lighter hover */
    --link-color-hover2: #526d56;      /* softer hover variant */
    --link-color-active: #304835;

    --background-color: #FAF9F7;       /* off-white */
    --background-color-accent: #E8ECE4; /* soft sage/green-grey */

    --divider-color: #D6D6D6;

    --text-color: #2F2F2F;             /* rich charcoal */
    --text-color-1: #8B8B8B;           /* muted neutral */
    --text-color-2: #4E6A4E;           /* luxury green */
    --text-color-3: #304835;           /* used to be burgundy */

    --all-button-shadow: #DADADA;
    --all-button-shadow-hover: #C1C1C1;
    --all-button-bg-hover: #EFEFEF;

    --button-bg: #4E6A4E;              /* deep leafy green */
    --button-bg-shadow: #3F563F;       /* depth for button */
    --button-bg-text: #FFFFFF;         /* white text */
}

@media (prefers-color-scheme: dark) {
    :root {
        --link-color: #BFD9BF;          /* soft mint */
        --link-color-visited: #A8C7A8;
        --link-color-hover: #C7DEC7;
        --link-color-hover2: #98B798;
        --link-color-active: #BFD9BF;

        --background-color: #1A1A1A;
        --background-color-accent: #2A2A2A;

        --divider-color: #3F3F3F;

        --text-color: #E0E0E0;
        --text-color-1: #AAAAAA;
        --text-color-2: #BFD9BF;
        --text-color-3: #AFC6AF;

        --all-button-shadow: #444444;
        --all-button-shadow-hover: #666666;
        --all-button-bg-hover: #3A3A3A;

        --button-bg: #BFD9BF;
        --button-bg-shadow: #98B798;
        --button-bg-text: #1A1A1A;
    }
}