:root {
    /* Light*/
    --light-body-background-color: #fcfefe;
    --light-background-color: #ffffff;
    --light-background-color-subtle: #f4f4f4;

    --light-border-color: #dee2e6;

    --light-primary-color: #008fab;
    --light-primary-color-hover: #00738a;

    --light-danger-color: #dc3545;
    --light-danger-color-hover: #bd2130;

    --light-text-primary-color: #ffffff;
    --light-text-secondary-color: #5e5e5e;
    --light-text-tertiary-color: #212529;

    --light-button-primary-color: #ffffff;
    --light-button-primary-border-color: #008fab;

    --light-link-primary-color: #008fab;
    --light-link-primary-color-hover: #00738a;
    --light-link-primary-color-visited: #800080;

    /* Gray */
    --gray-body-background-color: #2c2c2c;
    --gray-background-color: #3a3a3a;
    --gray-background-color-subtle: #464646;

    --gray-border-color: #5c5c5c;

    --gray-primary-color: #6b6b6b;
    --gray-primary-color-hover: #595959;

    --gray-danger-color: #b84747;
    --gray-danger-color-hover: #7a4141;

    --gray-text-primary-color: #f1f1f1;
    --gray-text-secondary-color: #b1b1b1;
    --gray-text-tertiary-color: #d6d6d6;

    --gray-button-primary-color: #e0e0e0;
    --gray-button-primary-border-color: #888888;

    --gray-link-primary-color: #c0c0c0;
    --gray-link-primary-color-hover: #a8a8a8;
    --gray-link-primary-color-visited: #CEA4B0;


    /* Dark */
    --dark-body-background-color: #222722;
    --dark-background-color: #1E1C19;
    --dark-background-color-subtle: #252521;

    --dark-border-color: #575757;

    --dark-primary-color: #526861;
    --dark-primary-color-hover: #42544f;

    --dark-danger-color: #b93845;
    --dark-danger-color-hover: #73252a;

    --dark-text-primary-color: #FFFEDE;
    --dark-text-secondary-color: #C1B9A4;
    --dark-text-tertiary-color: #F2E2C5;

    --dark-button-primary-color: #FFFEDE;
    --dark-button-primary-border-color: #75968c;

    --dark-link-primary-color: #FFFEDE;
    --dark-link-primary-color-hover: #f2e2c5;
    --dark-link-primary-color-visited: #CEA4B0;

    /* Contrast */
    --contrast-body-background-color: #cecece;
    --contrast-background-color: #ffffff;
    --contrast-background-color-subtle: #e8e8e8;

    --contrast-border-color: #666666;

    --contrast-primary-color: #008fab;
    --contrast-primary-color-hover: #00738a;

    --contrast-danger-color: #dc3545;
    --contrast-danger-color-hover: #bd2130;

    --contrast-text-primary-color: #ffffff;
    --contrast-text-secondary-color: #333333;
    --contrast-text-tertiary-color: #000000;

    --contrast-button-primary-color: #ffffff;
    --contrast-button-primary-border-color: #008fab;

    --contrast-link-primary-color: #008fab;
    --contrast-link-primary-color-hover: #00738a;
    --contrast-link-primary-color-visited: #660066;
}

body,
body.color-scheme-light {
    --body-background-color: var(--light-body-background-color);
    --background-color: var(--light-background-color);
    --background-color-subtle: var(--light-background-color-subtle);

    --border-color: var(--light-border-color);

    --primary-color: var(--light-primary-color);
    --primary-color-hover: var(--light-primary-color-hover);

    --danger-color: var(--light-danger-color);
    --danger-color-hover: var(--light-danger-color-hover);

    --text-primary-color: var(--light-text-primary-color);
    --text-secondary-color: var(--light-text-secondary-color);
    --text-tertiary-color: var(--light-text-tertiary-color);

    --button-primary-color: var(--light-button-primary-color);
    --button-primary-border-color: var(--light-button-primary-border-color);

    --link-primary-color: var(--light-link-primary-color);
    --link-primary-color-hover: var(--light-link-primary-color-hover);
    --link-primary-color-visited: var(--light-link-primary-color-visited);
}

body.color-scheme-dark {
    --body-background-color: var(--dark-body-background-color);
    --background-color: var(--dark-background-color);
    --background-color-subtle: var(--dark-background-color-subtle);

    --border-color: var(--dark-border-color);

    --primary-color: var(--dark-primary-color);
    --primary-color-hover: var(--dark-primary-color-hover);

    --danger-color: var(--dark-danger-color);
    --danger-color-hover: var(--dark-danger-color-hover);

    --text-primary-color: var(--dark-text-primary-color);
    --text-secondary-color: var(--dark-text-secondary-color);
    --text-tertiary-color: var(--dark-text-tertiary-color);

    --button-primary-color: var(--dark-button-primary-color);
    --button-primary-border-color: var(--dark-button-primary-border-color);

    --link-primary-color: var(--dark-link-primary-color);
    --link-primary-color-hover: var(--dark-link-primary-color-hover);
    --link-primary-color-visited: var(--dark-link-primary-color-visited);
}

body.color-scheme-contrast {
    --body-background-color: var(--contrast-body-background-color);
    --background-color: var(--contrast-background-color);
    --background-color-subtle: var(--contrast-background-color-subtle);

    --border-color: var(--contrast-border-color);

    --primary-color: var(--contrast-primary-color);
    --primary-color-hover: var(--contrast-primary-color-hover);

    --danger-color: var(--contrast-danger-color);
    --danger-color-hover: var(--contrast-danger-color-hover);

    --text-primary-color: var(--contrast-text-primary-color);
    --text-secondary-color: var(--contrast-text-secondary-color);
    --text-tertiary-color: var(--contrast-text-tertiary-color);

    --button-primary-color: var(--contrast-button-primary-color);
    --button-primary-border-color: var(--contrast-button-primary-border-color);

    --link-primary-color: var(--contrast-link-primary-color);
    --link-primary-color-hover: var(--contrast-link-primary-color-hover);
    --link-primary-color-visited: var(--contrast-link-primary-color-visited);
}

body.color-scheme-gray {
    --body-background-color: var(--gray-body-background-color);
    --background-color: var(--gray-background-color);
    --background-color-subtle: var(--gray-background-color-subtle);

    --border-color: var(--gray-border-color);

    --primary-color: var(--gray-primary-color);
    --primary-color-hover: var(--gray-primary-color-hover);

    --danger-color: var(--gray-danger-color);
    --danger-color-hover: var(--gray-danger-color-hover);

    --text-primary-color: var(--gray-text-primary-color);
    --text-secondary-color: var(--gray-text-secondary-color);
    --text-tertiary-color: var(--gray-text-tertiary-color);

    --button-primary-color: var(--gray-button-primary-color);
    --button-primary-border-color: var(--gray-button-primary-border-color);

    --link-primary-color: var(--gray-link-primary-color);
    --link-primary-color-hover: var(--gray-link-primary-color-hover);
    --link-primary-color-visited: var(--gray-link-primary-color-visited);
}


@media (prefers-color-scheme: dark) {
    body {
        --body-background-color: var(--dark-body-background-color);
        --background-color: var(--dark-background-color);
        --background-color-subtle: var(--dark-background-color-subtle);

        --border-color: var(--dark-border-color);

        --primary-color: var(--dark-primary-color);
        --primary-color-hover: var(--dark-primary-color-hover);

        --danger-color: var(--dark-danger-color);
        --danger-color-hover: var(--dark-danger-color-hover);

        --text-primary-color: var(--dark-text-primary-color);
        --text-secondary-color: var(--dark-text-secondary-color);
        --text-tertiary-color: var(--dark-text-tertiary-color);

        --button-primary-color: var(--dark-button-primary-color);
        --button-primary-border-color: var(--dark-button-primary-border-color);

        --link-primary-color: var(--dark-link-primary-color);
        --link-primary-color-hover: var(--dark-link-primary-color-hover);
        --link-primary-color-visited: var(--dark-link-primary-color-visited);
    }
}