@tailwind base;

/* Fallback */
@layer base {
	:root {
		--brand-100: #f4f7fa;
		--brand-200: #e9eff4;
		--brand-300: #d3dee9;
		--brand-400: #a7bed3;
		--brand-500: #7c9dbd;
		--brand-600: #245c91;
		--brand-700: #003a69;
		--brand-800: #14324f;
	}

	.bg-brand-100 {
		background-color: #f4f7fa !important;
	}
	.bg-brand-200 {
		background-color: #e9eff4 !important;
	}
	.bg-brand-300 {
		background-color: #d3dee9 !important;
	}
	.bg-brand-400 {
		background-color: #a7bed3 !important;
	}
	.bg-brand-500 {
		background-color: #7c9dbd !important;
	}
	.bg-brand-600 {
		background-color: #245c91 !important;
	}
	.bg-brand-700 {
		background-color: #003a69 !important;
	}
	.bg-brand-800 {
		background-color: #14324f !important;
	}

	.text-brand-100 {
		color: #f4f7fa !important;
	}
	.text-brand-200 {
		color: #e9eff4 !important;
	}
	.text-brand-300 {
		color: #d3dee9 !important;
	}
	.text-brand-400 {
		color: #a7bed3 !important;
	}
	.text-brand-500 {
		color: #7c9dbd !important;
	}
	.text-brand-600 {
		color: #245c91 !important;
	}
	.text-brand-700 {
		color: #003a69 !important;
	}
	.text-brand-800 {
		color: #14324f !important;
	}

	.border-brand-100 {
		border-color: #f4f7fa !important;
	}
	.border-brand-200 {
		border-color: #e9eff4 !important;
	}
	.border-brand-300 {
		border-color: #d3dee9 !important;
	}
	.border-brand-400 {
		border-color: #a7bed3 !important;
	}
	.border-brand-500 {
		border-color: #7c9dbd !important;
	}
	.border-brand-600 {
		border-color: #245c91 !important;
	}
	.border-brand-700 {
		border-color: #003a69 !important;
	}
	.border-brand-800 {
		border-color: #14324f !important;
	}

	.shadow-brand-100 {
		box-shadow: 0 0 0 1px #f4f7fa;
		-webkit-appearance: none;
	}
	.shadow-brand-200 {
		box-shadow: 0 0 0 1px #e9eff4;
		-webkit-appearance: none;
	}
	.shadow-brand-300 {
		box-shadow: 0 0 0 1px #d3dee9;
		-webkit-appearance: none;
	}
	.shadow-brand-400 {
		box-shadow: 0 0 0 1px #a7bed3;
		-webkit-appearance: none;
	}
	.shadow-brand-500 {
		box-shadow: 0 0 0 1px #7c9dbd;
		-webkit-appearance: none;
	}
	.shadow-brand-600 {
		box-shadow: 0 0 0 1px #245c91;
		-webkit-appearance: none;
	}
	.shadow-brand-700 {
		box-shadow: 0 0 0 1px #003a69;
		-webkit-appearance: none;
	}
	.shadow-brand-800 {
		box-shadow: 0 0 0 1px #14324f;
		-webkit-appearance: none;
	}

	.fill-brand-100 {
		fill: #f4f7fa;
	}
	.fill-brand-200 {
		fill: #e9eff4;
	}
	.fill-brand-300 {
		fill: #d3dee9;
	}
	.fill-brand-400 {
		fill: #a7bed3;
	}
	.fill-brand-500 {
		fill: #7c9dbd;
	}
	.fill-brand-600 {
		fill: #245c91;
	}
	.fill-brand-700 {
		fill: #003a69;
	}
	.fill-brand-800 {
		fill: #14324f;
	}

	/* Navigation */
	.navigation--brand-colors {
		background-color: #14324f;
		border-color: #003a69 !important;
	}

	.navigation-items-container--brand-colors {
		background-color: #14324f;
	}

	.nav-item-link--desktop--brand-colors {
		background-color: #14324f;
	}

	.nav-item-link--desktop--brand-colors:hover {
		background-color: #003a69;
	}

	.nav-menu-button--brand-colors {
		background-color: #14324f !important;
	}

	.nav-menu-button--brand-colors:hover {
		background-color: #003a69 !important;
	}

	.nav-search-link--brand-colors {
		background-color: #14324f !important;
	}

	.nav-search-link--brand-colors:hover {
		background-color: #003a69 !important;
	}

	.nav-accordion-item-button--mobile--brand-colors {
		background-color: #14324f !important;
	}

	.nav-accordion-item-button--mobile--brand-colors:hover {
		background-color: #003a69 !important;
	}

	.nav-accordion-body-link--mobile--brand-colors {
		background-color: #14324f !important;
	}

	.nav-accordion-body-link--mobile--brand-colors:hover {
		background-color: #003a69 !important;
	}
}