:root {
	/*=============================*/
	/*=====----- GENERAL -----=====*/
	/*=============================*/
	--blue: #0047b0;
	--dark-blue: #28569a;
	--lighter-blue: #d0e3ff;
	--light-blue: #E9f2ff;
	--off-white: #F4F1EC;
	--tan: #d7d0c4;
	--gold: #e1980a;
	--dark-gold: #c78549;
	--red: #ff3d3d;
	--off-black: #2c2c2c;
	--share-trigger-icon-color: var(--red);

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

	--sw-key-color: var(--primary-color-700); /* site's most prominent color */
	--sw-key-color-hover: var(--primary-color-800);

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

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

	--sw-button-primary-bg: transparent;
	--sw-button-primary-color: var(--off-black);

	--sw-button-primary-bg-hover: var(--dark-gold);
	--sw-button-primary-color-hover: var(--white);

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

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

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

	--sw-button-tertiary-bg: transparent;
	--sw-button-tertiary-color: var(--off-black);
	
	--sw-button-tertiary-bg-hover: var(--red);
	--sw-button-tertiary-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);

	/*===========================*/
	/*=====----- 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(--red);
	--sw-light-icon-color: var(--gold);
	--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(--primary-color-100);
	--sw-container-border-color: var(--primary-color-300);

	/*=================================*/
	/*=====----- 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-text-color); /* used for widget and slide descriptions */
	--sw-collections-minor-text-color: var(--off-black); /* used for info flags, like blog categories */

	--sw-collections-text-color-light: var(--gray-100); /* used for text that overlaps images */
	--sw-collections-minor-text-color-light: var(--gold);

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