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

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

	--sw-key-color: var(--blue-dark); /* 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: var(--blue-dark);
	--sw-button-primary-color: var(--white);

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

	/*----- Secondary button -----*/

	--sw-button-secondary-bg: var(--brown);
	--sw-button-secondary-color: var(--white);

	--sw-button-secondary-bg-hover: transparent;
	--sw-button-secondary-color-hover: var(--brown);

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

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

	--sw-mini-date-bg: var(--blue);
	--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-text-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(--gray-600); /* 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(--gray-200);

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