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

    --sw-body-bg: var(--white);
    --sw-text-color: var(--gray-900);

    --sw-key-color: var(--secondary-color-700); /* site's most prominent color */
    --sw-key-color-hover: var(--secondary-color-500);

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

    --sw-alert-color: var(--tertiary-color-500); /* 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(--primary-color-100); /* used for focus outlines against dark backgrounds */

    --arched-decoration-right-yellow: no-repeat center/contain url(/includes/public/assets/shared/decorations/yellow/right-motif.svg); 
    --arched-decoration-left-yellow: no-repeat center/contain url(/includes/public/assets/shared/decorations/yellow/left-motif.svg); 
    --arched-decoration-right-black: no-repeat center/contain url(/includes/public/assets/shared/decorations/black/right-motif.svg); 
    --arched-decoration-left-black: no-repeat center/contain url(/includes/public/assets/shared/decorations/black/left-motif.svg); 
    
    --arched-decoration-right-red: no-repeat center/contain url(/includes/public/assets/shared/decorations/red/right-motif.svg); 
    --arched-decoration-left-red: no-repeat center/contain url(/includes/public/assets/shared/decorations/red/left-motif.svg); 

    --straight-decoration-right-yellow: no-repeat center/contain url(/includes/public/assets/shared/decorations/yellow/right-motif-straight.svg); 
    --straight-decoration-right-yellow: no-repeat center/contain url(/includes/public/assets/shared/decorations/yellow/left-motif-straight.svg); 
    
    --three-line-decoration-right-yellow: no-repeat center/contain url(/includes/public/assets/shared/decorations/yellow/right-motif-three.svg); 
    --three-line-decoration-left-yellow: no-repeat center/contain url(/includes/public/assets/shared/decorations/yellow/left-motif-three.svg); 

    --top-decoration-yellow-light: no-repeat center/contain url(/includes/public/assets/shared/decorations/yellow/top-motif.svg); 
    --top-decoration-yellow-dark: no-repeat center/contain url(/includes/public/assets/shared/decorations/yellow/top-motif-dark.svg); 

    --sw-color-bar: linear-gradient(90deg, var(--secondary-color-200) 20%, var(--primary-color-300) 20%, var(--primary-color-300) 40%, var(--tertiary-color-500) 40%, var(--tertiary-color-500) 60%, var(--primary-color-800) 60%, var(--primary-color-800) 100%);

    --sw-color-bar-single: repeat-x left/100% var(--sw-color-bar);
    --sw-color-bar-double: repeat-x left/50% var(--sw-color-bar);

    /*=============================*/
    /*=====----- BUTTONS -----=====*/
    /*=============================*/

    --sw-button-font: 100 var(--text-xl)/calc(22/20) var(--font-santa-rosa);
    --sw-button-letter-spacing: 0.0625rem;
    --sw-button-gap: 4px;

    /*----- primary button -----*/

    --sw-button-primary-bg: var(--sw-key-color);
    --sw-button-primary-color: var(--white);

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


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

    --sw-button-secondary-bg: var(--gray-800);
    --sw-button-secondary-color: var(--gray-300);

    --sw-button-secondary-bg-hover: var(--gray-500);
    --sw-button-secondary-color-hover: var(--gray-300);

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

    --sw-button-border-bg: var(--white);
    --sw-button-border-color: var(--sw-key-color);

    --sw-button-border-bg-hover: var(--white);
    --sw-button-border-color-hover: var(--sw-key-color);


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

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

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

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

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

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

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

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

    --sw-container-bg: var(--primary-color-100);
    --sw-container-border-color: var(--primary-color-300);
}



@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 */
    }
}