:root {
	/*=============================*/
	/*=====----- GENERAL -----=====*/
	/*=============================*/

	--white-fd: #fdfbfa;

	--gray-a5: #a5a7a8;
	--gray-70: #707374;
	--gray-41: #414242;
	--gray-24: #242525;
	--gray-14: #141414;

	--blue-66: #66c2da;
	--blue-46: #46a8c1;
	--blue-1a: #1a829d;
	--blue-17: #17677c;
	--blue-12: #12586a;

	--orange-ff: #ffaa84;
	--orange-f2: #f28858;
	--orange-e3: #e36c36;
	--orange-d7: #d75c24;
	--orange-b5: #b54b1b;

	--yellow-fb: #fbc989;
	--yellow-f9: #f9ba69;
	--yellow-f2: #f2a23a;
	--yellow-db: #db8e2b;
	--yellow-b7: #b7751f;

	--date-section-gradient: linear-gradient(to right, var(--yellow-f9) -18%, var(--orange-f2) 125%);

	--sw-body-bg: var(--white-fd);
	--sw-text-color: var(--gray-14);
	--sw-text-color-light: var(--white-fd);

	--sw-key-color: var(--blue-1a); /* site's most prominent color */
	--sw-key-color-hover: var(--orange-e3);

	--sw-selected-color: var(--sw-key-color); /* used for tabs and checkboxes, like in LEO index */

	--sw-alert-color: var(--orange-ff); /* 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(--orange-ff); /* used for focus outlines against dark backgrounds */

	/* Used for scrollbars in LEO/Quickview */
	--sw-scrollbar-track-color: var(--white-fd);
	--sw-scrollbar-thumb-color: var(--orange-ff);
	--sw-scrollbar-thumb-hover: var(--orange-ff);
	--sw-scrollbar-thumb-active: var(--orange-ff);

	/*=============================*/
	/*=====----- BUTTONS -----=====*/
	/*=============================*/
	
	/*----- primary button -----*/

	--sw-button-primary-bg: var(--gray-14);
	--sw-button-primary-color: var(--white-fd);

	--sw-button-primary-bg-hover: var(--orange-ff);
	--sw-button-primary-color-hover: var(--gray-14);

	/*----- secondary button -----*/

	--sw-button-secondary-bg: var(--gray-14);
	--sw-button-secondary-color: var(--white-fd);
	
	--sw-button-secondary-bg-hover: var(--blue-1a);
	--sw-button-secondary-color-hover: var(--white-fd);

	/*----- tertiary button -----*/

	--sw-button-tertiary-bg: var(--white-fd);
	--sw-button-tertiary-color: var(--gray-24);
	
	--sw-button-tertiary-bg-hover: var(--gray-14);
	--sw-button-tertiary-color-hover: var(--white-fd);

	/*----- border button -----*/

	--sw-button-border-bg: var(--gray-14);
	--sw-button-border-color: var(--orange-ff);

	--sw-button-border-bg-hover: var(--orange-ff);
	--sw-button-border-color-hover: var(--orange-ff);

	/*===========================*/
	/*=====----- LINKS -----=====*/
	/*===========================*/

	--sw-link-color: var(--sw-key-color);
	--sw-system-link-color: var(--blue-66); /* 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(--orange-e3); /* 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(--date-section-gradient);
	--sw-mini-date-color: var(--gray-14);

	/*================================*/
	/*=====----- CONTAINERS -----=====*/
	/*================================*/

	--sw-container-bg: var(--gray-14);
	--sw-container-border-color: var(--orange-ff);
}

@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 */
	}
}