:root {
    /*=============================*/
    /*=====----- GENERAL -----=====*/
    /*=============================*/

    --sw-body-bg: repeat center / contain url(/includes/public/assets/shared/texture.jpg);
    --sw-text-color: var(--gray-900);

    --sw-key-color: var(--primary-color-100); /* site's most prominent color */
    --sw-key-color-hover: var(--sw-key-color);

    --sw-selected-color: var(--sw-key-color); /* used for tabs and checkboxes, like in LEO index */

    --sw-alert-color: var(--tertiary-color-100); /* used primarily for badges, as in LEO index tripbuilder 💗 icon and the facility search compare toggle badge */

    --sw-focus-color: var(--sw-key-color); /* used for focus outlines */
    --sw-light-focus-color: var(--tertiary-color-100); /* used for focus outlines against dark backgrounds */

    /*=============================*/
    /*=====----- BUTTONS -----=====*/
    /*=============================*/
    /* BUTTON WITH TOP BOTTOM BORDER AND HOVER DOTS TEMPLATE */
    /*     
    button {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: row nowrap;
        gap: 11px;
        position: relative;
        padding: var(--space-2) var(--space-6);
        border-block: solid 2px var(--sw-button-primary-color);
        font-family: var(--font-link);
        font-size: var(--text-sm);
        font-weight: 800;
        color: var(--button-text-color);
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.0281rem;
    }

    button::before,
    button::after {
        content: '\f111';
        font-size: 5px;
        font-family: "Font Awesome 5 Free";
        pointer-events: none;
        display: block;
        opacity: 0;
    }

    button:focus::before,
    button:focus::after,
    button:hover::before,
    button:hover::after {
        opacity: 1;
    }
        */
    /*----- primary button -----*/

    --sw-button-primary-bg: transparent;
    --sw-button-primary-color: var(--secondary-color-100);

    --sw-button-primary-bg-hover: transparent;
    --sw-button-primary-color-hover: var(--sw-button-primary-color);


    /*----- secondary button -----*/

    --sw-button-secondary-bg: transparent;
    --sw-button-secondary-color: var(--tertiary-color-100);
    
    --sw-button-secondary-bg-hover: transparent;
    --sw-button-secondary-color-hover: var(--tertiary-color-100);

    /*----- border button -----*/

    --sw-button-border-bg: transparent;
    --sw-button-border-color: var(--secondary-color-100);

    --sw-button-border-bg-hover: transparent;
    --sw-button-border-color-hover: var(--secondary-color-100);

    /*===========================*/
    /*=====----- LINKS -----=====*/
    /*===========================*/

    --sw-link-color: var(--tertiary-color-100);
    --sw-system-link-color: var(--gray-100); /* used for Media Gallery content section, which has a dark background */

    --sw-link-hover-color: var(--tertiary-color-100);
    --sw-system-link-hover-color: var(--gray-100); /* used for Media Gallery content section, which has a dark background */

    /*===========================*/
    /*=====----- ICONS -----=====*/
    /*===========================*/

    --sw-icon-color: var(--secondary-color-100);
    --sw-light-icon-color: var(--sw-key-color);
    --sw-icon-bg: var(--tertiary-color-100); /* used for social media icon backgrounds where applicable */

    /*===============================*/
    /*=====----- MINI DATE -----=====*/
    /*===============================*/

    --sw-mini-date-bg: var(--secondary-color-100);
    --sw-mini-date-color: var(--white);

    /*================================*/
    /*=====----- CONTAINERS -----=====*/
    /*================================*/

    --sw-container-bg: var(--sw-key-color);
    --sw-container-border-color: var(--secondary-color-100);
}

@media (min-width: 1024px) {
    :root {
        /*===========================*/
        /*=====----- LINKS -----=====*/
        /*===========================*/
        --sw-system-link-color: var(--sw-link-color); /* used for Media Gallery content section, which has a light background at this breakpoint */

        --sw-system-link-hover-color: var(--sw-link-color-hover); /* used for Media Gallery content section, which has a light background at this breakpoint */
    }
}