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

    /* Colors */
    --black-33: #332F21;
    --black-2d: #2D2D2D;
    --gray-cc: #CCD4E0;
    --blue-00: #003865;
    --blue-e3: #E3EFFF;
    --pink-ff: #FF8070;
    --red-e6: #E61B00;
    --beige-bc: #BCB59F;
    --beige-f5: #F5F0E5;
    --beige-f1: #F1EFE9;
    --beige-stripe: #fffefb;
    --blue-stripe: #eef5ff;
    --beige-stripe-alt: var(--beige-f1);
    --white-stripe: #fefdf8;

    --sw-body-bg: var(--white);
    --sw-text-color: var(--black-33);
    --sw-light-text-color: var(--white);

    --sw-key-color: var(--blue-00); /* site's most prominent color */
    --sw-key-color-hover: var(--pink-ff);

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

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

    --sw-blue-white-stripes: linear-gradient(to right, var(--beige-stripe), var(--beige-stripe) 15px, var(--blue-stripe) 15px, var(--blue-stripe) 30px);
    
    --sw-darkblue-white-stripes: linear-gradient(to right, var(--beige-stripe), var(--beige-stripe) 15px, var(--blue-e3) 15px, var(--blue-e3) 30px);

    --sw-beige-white-stripes:
    linear-gradient(to right,
        var(--beige-stripe-alt),
        var(--beige-stripe-alt) 15px,
        var(--white-stripe) 15px,
        var(--white-stripe) 30px
    );
	--sw-stripe-width: 30px;

    /* 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 w border -----*/

    --sw-button-primary-bg: var(--pink-ff);
    --sw-button-primary-color: var(--black);
    --sw-button-primary-border: 1px solid var(--pink-ff);
    --sw-button-primary-icon: var(--black);

    --sw-button-primary-bg-hover: var(--white);
    --sw-button-primary-color-hover: var(--red-e6);
    --sw-button-primary-border-hover: 1px solid var(--red-e6);
    --sw-button-primary-icon-hover: var(--black);

    /*----- secondary button w border -----*/

    --sw-button-secondary-bg: var(--sw-key-color);
    --sw-button-secondary-color: var(--white);
    --sw-button-secondary-border: 1px solid var(--sw-key-color);
    --sw-button-secondary-icon: var(--white);
    
    --sw-button-secondary-bg-hover: var(--white);
    --sw-button-secondary-color-hover: var(--sw-key-color);
    --sw-button-secondary-icon-hover: var(--sw-key-color);

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

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

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

    /*----- solid button -----*/

    --sw-button-solid-bg: var(--white);
    --sw-button-solid-color: var(--black);
    --sw-button-solid-icon: var(--black);

    --sw-button-solid-bg-hover: var(--pink-ff);

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

    --sw-link-color: var(--red-e6);
    --sw-system-link-color: var(--blue-e3); /* 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(--pink-ff);
    --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(--beige-f5);
    --sw-container-border-color: var(--sw-key-color);

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

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

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

    --sw-collections-minor-text-color-light: var(--white);

    --sw-collections-view-all-color: var(--black);
    --sw-collections-view-all-bg: var(--sw-button-primary-bg);
    --sw-collections-view-all-border: var(--sw-button-primary-border);
    --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-view-all-border-hover: var(--sw-button-primary-border-hover);

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

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