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

    --green-light: #edfcf6;
    --green: #00a668;
    --green-dark: #007a4e;
    --blue-light: #edf8ff;
    --blue: #006196;
    --blue-dark: #00283d;
    --orange-light: #fcf2e9;
    --orange: #df7e27;
    --orange-dark: #59250d;
    --purple-light: #faf1f8;
    --purple: #712c64;
    --purple-dark: #3b1734;
    --yellow-light: #fffae6;
    --yellow: #ffcb05;
    --yellow-dark: #7a6200;

    --white: #ffffff;
    --gray-f3: #f3f3f3;
    --gray-d6: #d6d6d6;
    --gray-7a: #7a7a7a;
    --gray-22: #222222;
    --black: #000000;

    --gradient-button: radial-gradient(57.74% 626.06% at 25.07% 99.46%, var(--green) 0%, var(--blue) 100%);
    --gradient-social-button: radial-gradient(57.05% 74.46% at 25.07% 99.46%, var(--green) 0%, var(--blue) 100%);


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

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

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

    --sw-alert-color: var(--sw-key-color); /* 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(--blue-light); /* used for focus outlines against dark backgrounds */

    /* Used for scrollbars in LEO/Quickview */
    --sw-scrollbar-track-color: var(--blue-light);
	--sw-scrollbar-thumb-color: var(--sw-key-color);
	--sw-scrollbar-thumb-hover: var(--sw-key-color);
	--sw-scrollbar-thumb-active: var(--sw-key-color);

    /*=============================*/
    /*=====----- BUTTONS -----=====*/
    /*=============================*/
    
    /*----- primary button -----*/

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

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

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

    --sw-button-secondary-bg: var(--blue-light);
    --sw-button-secondary-color: var(--green-dark);
    
    --sw-button-secondary-bg-hover: var(--blue-light);
    --sw-button-secondary-color-hover: var(--green);

    /*----- tertiary button -----*/

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

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

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

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

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

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

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

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

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

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

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

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

    --sw-container-bg: var(--blue-light);
    --sw-container-border-color: var(--blue);

    /*=================================*/
    /*=====----- COLLECTIONS -----=====*/
    /*=================================*/

    --sw-collections-widget-header-border-color: transparent;
    --sw-collections-title-color: var(--black); /* used for both widget and slide titles */
    --sw-collections-text-color: var(--black); /* used for widget and slide descriptions */
    --sw-collections-minor-text-color: var(--black); /* used for info flags, like blog categories */

    --sw-collections-text-color-light: var(--blue-light); /* used for text that overlaps images */
    --sw-collections-minor-text-color-light: var(--black);

    --sw-collections-view-all-color: var(--sw-button-primary-color);
    --sw-collections-view-all-bg: var(--sw-button-primary-bg);
    --sw-collections-view-all-color-hover: var(--sw-button-primary-color-hover);
    --sw-collections-view-all-bg-hover: var(--sw-button-primary-bg-hover);

    --sw-collections-read-more-color: var(--sw-button-secondary-color);
    --sw-collections-read-more-bg: var(--sw-button-secondary-bg);
    --sw-collections-read-more-color-hover: var(--sw-button-secondary-color-hover);
    --sw-collections-read-more-bg-hover: var(--sw-button-secondary-bg-hover);

    --sw-collections-qv-button-color: var(--sw-collections-text-color);
    --sw-collections-qv-button-color-hover: var(--sw-collections-minor-text-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 */
    }
}