:root {
    /*=============================*/
    /*=====----- GENERAL -----=====*/
    /*=============================*/
    --black-11:#110B11;
    --white-f8: #F8FAFC;
    --gray-f4: #f4f4f4;
    --gray-5f: #F5F2EB;
    --gray-54: #54595D;
    --gray-2d: #2D3848;
    --green-a6: #A6B380;
    --green-8a: #8a9a5c;
    --green-68: #687345;
    --green-3b: #3B432C;
    --blue-1e: #1E3852;
    --blue-2d: #2d5a74;
    --blue-74: #74a5c7;
    --blue-bd: #B6D0E2;
    --blue-cc: #CCD4E0;
    --yellow-ec: #ecb233;
    --red-e0: #E01A4F;

    --sw-body-bg: var(--white);
    --sw-text-color: var(--black-11);
    --sw-light-text-color: var(--white);
    --sw-key-color: var(--green-3b); /* site's most prominent color */
    --sw-key-color-hover: var(--green-3b);
    --sw-selected-color: var(--sw-key-color); /* used for tabs and checkboxes, like in LEO index */
    --sw-alert-color: var(--yellow-ec); /* 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(--white); /* 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-11);
    --sw-button-secondary-bg-hover: var(--white);
    --sw-button-secondary-color-hover: var(--black-11);

    /*----- 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-padding: 12px 20px 12px 12px;
    --sw-button-padding-desk: 16px 23px 11px 19px;
    --sw-button-font-size: .8125rem;
    --sw-button-font-size-desk: 0.9375rem;
    --sw-button-border-radius: 10px;
    --sw-button-border-radius-desk: 15px;
    --sw-button-line-height: 1.5;
    --sw-button-before-bottom: 12px;
    --sw-button-before-bottom-desk: 14px;
    --sw-button-before-left: 12px;
    --sw-button-before-left-desk: 19px;
    --sw-button-before-width: calc(100% - 26px);
    --sw-button-before-width-desk: calc(100% - 33px);
    --sw-button-before-height: 2px;
    --sw-button-before-bg-color: var(--yellow-ec);
    --sw-button-after-bottom: 8px;
    --sw-button-after-bottom-desk: 12px;
    --sw-button-after-right: 11px;
    --sw-button-after-right-desk: 10px;
    --sw-button-after-width: 7px;
    --sw-button-after-height: 10px;
    --sw-button-after-width-desk: 9px;
    --sw-button-after-height-desk: 13px;
    --sw-button-after-bg-img: url('/includes/public/assets/shared/button-arrow-mobile-yellow.svg');
    --sw-button-after-bg-img-desk: url('/includes/public/assets/shared/button-arrow-desk-yellow.svg');
    --sw-button-after-bg-img-desk-green: url('/includes/public/assets/shared/button-arrow-green.svg');
    --sw-button-after-bg-img-desk-white: url('/includes/public/assets/shared/button-arrow-white.svg');


    /*===========================*/
    /*=====----- LINKS -----=====*/
    /*===========================*/
    --sw-link-color: var(--black-11);
    --sw-system-link-color: var(--white); /* used for Media Gallery content section, which has a dark background */
    --sw-link-hover-color: var(--black-11);
    --sw-system-link-hover-color: var(--white); /* 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(--white);
    --sw-mini-date-color: var(--black-11);

    /*================================*/
    /*=====----- CONTAINERS -----=====*/
    /*================================*/
    --sw-container-bg: var(--white);
    --sw-container-border-color: var(--sw-key-color);

    /*=================================*/
    /*=====----- COLLECTIONS -----=====*/
    /*=================================*/
    --sw-collections-widget-header-border-color: var(--gray-200);
    --sw-collections-title-color: var(--black-11); /* used for both widget and slide titles */
    --sw-collections-text-color: var(--sw-text-color); /* used for widget and slide descriptions */
    --sw-collections-minor-text-color: var(--black-11); /* 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(--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 */
    }
}