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

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

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

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

	--sw-alert-color: var(--tertiary-color-900); /* 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(--tertiary-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: var(--blue-to-teal);
	--sw-button-primary-color: var(--white);

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

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

	--sw-button-secondary-bg: var(--blue-to-dark-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: var(--light-mint-to-light-teal);
	--sw-button-tertiary-color: var(--dark-blue);

	--sw-button-tertiary-bg-hover: var(--light-mint);
	--sw-button-tertiary-color-hover: var(--dark-blue);

	/*----- quaternary button -----*/

	--sw-button-quaternary-bg: transparent;
	--sw-button-quaternary-color: var(--dark-blue);

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

	/*----- quinary button -----*/

	--sw-button-quinary-bg: rgba(0, 0, 0, 0.2);
	--sw-button-quinary-color: var(--white);

	--sw-button-quinary-bg-hover: var(--light-mint-to-light-teal);
	--sw-button-quinary-color-hover: var(--dark-blue);

	/*----- 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(--sw-key-color);
	--sw-light-icon-color: var(--tertiary-color-900);
	--sw-icon-bg: var(--sw-key-color); /* used for social media icon backgrounds where applicable */

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

	--sw-mini-date-bg: var(--tertiary-color-100);
	--sw-mini-date-color: var(--sw-key-color);

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

	--sw-container-bg: var(--primary-color-100);
	--sw-container-border-color: var(--primary-color-100);
}

@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-color-hover); /* used for Media Gallery content section, which has a light background at this breakpoint */
	}
}