:root {
    --bg-image: url("/images/resources/bg-light.webp");
    --logo-image: url("/images/resources/logo-light.webp");
    --navbar-color-1: rgba(92, 58, 33, 1);
    --navbar-color-2: rgba(185, 150, 116, 1);
    --navbar-color-3: #f2d493;
    --content-color-1: rgba(166, 157, 142, 0.3);
    --content-color-2: rgba(166, 157, 142, 1);
    --section-gradient: linear-gradient(to right, transparent 0%, rgba(139, 90, 43, 1) 20%, rgba(139, 90, 43, 0.8) 90%, transparent 100%);
    --content-background: url("/images/resources/texture1.png");
    --section-title-color: black;
    --section-title-padding: 0px;
    --normal-text: black;
    --normal-text-inverse: white;
                --normal-text-outline: white;

    --footer-color-1: rgba(92, 58, 33, 0.9);
    --footer-color-2: rgba(139, 90, 43, 0.1);
    --footer-color-3: rgba(92, 58, 33, 1);
    --footer-color-4: rgba(139, 90, 43, 0.1);

    --invertable: 0%;

    --readability-box: rgba(255, 255, 255, 0.6);

    --theme-font-1: 'gothica';

}

/* ---------- Dark Theme ---------- */
[data-theme="dark"] {
    --bg-image: url("/images/resources/bg-dark.webp");
    --logo-image: url("/images/resources/logo-dark.webp");
    --navbar-color-1: #14199a;
    --navbar-color-2: #8647da;
    --navbar-color-3: rgba(0, 0, 0, 1);
    --content-color-1: rgba(22, 21, 18, 0.7);
    --content-color-2: #14199a;
    --section-gradient: linear-gradient(to right, transparent 0%, rgba(20, 25, 154, 1) 20%, rgba(20, 25, 154, 0.8) 90%, transparent 100%);
    --content-background: rgba(22, 21, 18, 0.8);
    --section-title-color: white;
    --section-title-padding: 7px;
    --normal-text: white;
    --normal-text-inverse: black;
            --normal-text-outline: white;

    --footer-color-1: rgba(20, 25, 154, 0.9);
    --footer-color-2: rgba(126, 50, 226, 0.9);
    --footer-color-3: rgba(20, 25, 154, 1);
    --footer-color-4: rgba(134, 71, 218, 0.9);

    --invertable: 100%;

    --readability-box: rgba(0, 0, 0, 0.6);

    --theme-font-1: 'flubber';
}

/* ---------- System Preference ---------- */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --bg-image: url("/images/resources/bg-dark.webp");
        --logo-image: url("/images/resources/logo-dark.webp");
        --navbar-color-1: #14199a;
        --navbar-color-2: #14199a;
        --navbar-color-3: rgba(0, 0, 0, 1);
        --content-color-1: rgba(22, 21, 18, 0.7);
        --content-color-2: rgba(22, 21, 18, 1);
        --section-gradient: linear-gradient(to right, transparent 0%, rgba(20, 25, 154, 1) 20%, rgba(20, 25, 154, 0.8) 90%, transparent 100%);
        --content-background: rgba(22, 21, 18, 0.8);
        --section-title-color: white;
        --section-title-padding: 7px;
        --normal-text: white;
        --normal-text-inverse: black;
                --normal-text-outline: white;

        --footer-color-1: rgba(92, 58, 33, 0.9);
        --footer-color-2: rgba(139, 90, 43, 0.1);
        --footer-color-3: rgba(92, 58, 33, 1);
        --footer-color-4: rgba(139, 90, 43, 0.1);

        --invertable: 100%;

        --readability-box: rgba(0, 0, 0, 0.6);

        --theme-font-1: 'flubber';

    }

}








/* TO DO: */
/* --font-style-___ */
/* --font-style-___*/
/* --font-style-___ */
/* --font-size-small */
/* --font-size-normal */
/* --font-size-large */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */