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

    /*Site Colors*/
    --white: #fff;
    --white-f8: #F8F4F1;
    --black-1e: #1E1C1C;
    --gray-52: #524E4E;
    --gray-d5: #D5D2CF;
    --gray-d9d: #D9D9D9;
    --brown-eb:: #EBF2F2;
    --teal-d9: #D9E1DF;
    --teal-c2: #C2D8D9;
    --teal-df:#dfebeb;
    --teal-34: #347C81; /*Key Color*/
    --teal-26: #265B5E;
    --orange-e9: #E95C32;
    --purple-59: #59324C;
    --red-a6: #A64B37;

    --sw-body-bg: var(--white-f8);
    --sw-text-color: var(--black-1e);
    --sw-text-color-light: var(--white-f8);

    --sw-letter-spacing: 0.03rem; /*3%*/
    --sw-letter-spacing-md: 0.04rem; /*4%*/
    --sw-letter-spacing-lg: 0.1rem; /*10%*/
    --sw-text-underline-offset: 1px;

    --sw-key-color: var(--teal-34); /* site's most prominent color */
    --sw-key-color-hover: var(--teal-26);

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

    --sw-alert-color: var(--orange-e9); /* 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(--teal-d9); /* used for focus outlines against dark backgrounds */

    /* Used for scrollbars in LEO/Quickview */
    --sw-scrollbar-track-color: var(--gray-100);
	--sw-scrollbar-thumb-color: var(--gray-400);
	--sw-scrollbar-thumb-hover: var(--gray-500);
	--sw-scrollbar-thumb-active: var(--gray-600);

    /*=============================*/
    /*=====----- BUTTONS -----=====*/
    /*=============================*/
    
    /*----- 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(--white);
    --sw-button-secondary-color: var(--black-1e);
    
    --sw-button-secondary-bg-hover: var(--sw-key-color);
    --sw-button-secondary-color-hover: var(--white);

    /*----- 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);
    --sw-button-bg-color-hover: var(--sw-key-color);

    /*----- text link + icon button -----*/
    --sw-primary-link-color: var(--sw-key-color);
    --sw-primary-link-color-hover: var(--teal-26);

    /*----- text link + icon button -----*/
    --sw-secondary-link-color: var(--black-1e);
    --sw-secondary-link-color-hover: var(--teal-26);

    /*===========================*/
    /*=====----- 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(--orange-e9);
    --sw-light-icon-color: var(--sw-key-color);
    --sw-icon-bg: var(--sw-key-color); /* used for social media icon backgrounds where applicable */

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

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

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

    --sw-container-bg: var(--teal-d9);
    --sw-container-border-color: var(--sw-key-color);
}

@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-hover-color); /* used for Media Gallery content section, which has a light background at this breakpoint */
    }
}