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

    /* COLOURS */
    --sw-site-blue: #005887;
    --sw-site-lblue: #3586B1;
    --sw-site-bluexl: #a8d5ed;
    --sw-site-black: #1d1f21;
    --sw-site-orange: #f28f66;
    --sw-site-oranged: #da7145;
    --sw-site-white: #fcfbfa;
    /* ========== */



    --sw-body-bg: var(--white);
    --sw-text-color: #1D1F21;
    --sw-key-color: #005887;/* site's most prominent color */
    --sw-key-color-hover: #F28F66;

    --sw-selected-color: #1D1F21; /* 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 */

    /* 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);

    /*=============================*/
    /*=====----- GRADIENTS -----=====*/
    /*=============================*/
    --white-to-light-blue-gradient: linear-gradient(208deg, #FAEFDE -55.5%, #A8D5ED 82.37%);
    --blue-to-light-blue-gradient: linear-gradient(-270deg, #005887 -5.53%, #A8D5ED 160.05%);

    /*=============================*/
    /*=====----- BUTTONS -----=====*/
    /*=============================*/
    
    /*----- primary button -----*/
    --sw-button-primary-bg: var(--white-to-light-blue-gradient);
    --sw-button-primary-color: var(--sw-key-color);

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

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

    --sw-button-secondary-bg:  var(--white-to-light-blue-gradient);
    --sw-button-secondary-color: var(--primary-color-900);
    
    --sw-button-secondary-bg-hover: #3586B1;
    --sw-button-secondary-border-hover: #3586B1;
    --sw-button-secondary-color-hover: #fff;

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

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

    --sw-button-border-bg-hover: #3586B1;
    --sw-button-border-color-hover: #3586B1;


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

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

    --sw-button-border-bg-light-hover: #A8D5ED;
    --sw-button-border-color-light-hover: #A8D5ED

    /*===========================*/
    /*=====----- 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: #F28F66;
    --sw-light-icon-color: #F28F66 ;
    --sw-icon-bg: #A8D5ED; /* used for social media icon backgrounds where applicable */

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

    --sw-mini-date-bg: #A8D5ED;
    --sw-mini-date-color: var(--sw-key-color);
    --sw-mini-date-bg-hover: var(--sw-key-color);
    --sw-mini-date-color-hover:  #A8D5ED;

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

    --sw-container-bg: #A8D5ED;
    --sw-container-border-color: var(--sw-key-color);

    /*================================*/
    /*=====----- WIDGETS -----=====*/
    /*================================*/

    --widget-header-color: #1D1F21;
    --mobile-nav-color: #A8D5ED;

}

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