@tailwind base;

/* Fallback */
@layer base {
	:root {
		--brand-100: #f5fafb;
		--brand-200: #ebf6f7;
		--brand-300: #d7ecef;
		--brand-400: #afd9df;
		--brand-500: #87c6cf;
		--brand-600: #37a0af;
		--brand-700: #318093;
		--brand-800: #1f6677;
	}

	.bg-brand-100 {
		background-color: #f5fafb !important;
	}
	.bg-brand-200 {
		background-color: #ebf6f7 !important;
	}
	.bg-brand-300 {
		background-color: #d7ecef !important;
	}
	.bg-brand-400 {
		background-color: #afd9df !important;
	}
	.bg-brand-500 {
		background-color: #87c6cf !important;
	}
	.bg-brand-600 {
		background-color: #37a0af !important;
	}
	.bg-brand-700 {
		background-color: #318093 !important;
	}
	.bg-brand-800 {
		background-color: #1f6677 !important;
	}

	.text-brand-100 {
		color: #f5fafb !important;
	}
	.text-brand-200 {
		color: #ebf6f7 !important;
	}
	.text-brand-300 {
		color: #d7ecef !important;
	}
	.text-brand-400 {
		color: #afd9df !important;
	}
	.text-brand-500 {
		color: #87c6cf !important;
	}
	.text-brand-600 {
		color: #37a0af !important;
	}
	.text-brand-700 {
		color: #318093 !important;
	}
	.text-brand-800 {
		color: #1f6677 !important;
	}

	.border-brand-100 {
		border-color: #f5fafb !important;
	}
	.border-brand-200 {
		border-color: #ebf6f7 !important;
	}
	.border-brand-300 {
		border-color: #d7ecef !important;
	}
	.border-brand-400 {
		border-color: #afd9df !important;
	}
	.border-brand-500 {
		border-color: #87c6cf !important;
	}
	.border-brand-600 {
		border-color: #37a0af !important;
	}
	.border-brand-700 {
		border-color: #318093 !important;
	}
	.border-brand-800 {
		border-color: #1f6677 !important;
	}

	.shadow-brand-100 {
		box-shadow: 0 0 0 1px #f5fafb;
		-webkit-appearance: none;
	}
	.shadow-brand-200 {
		box-shadow: 0 0 0 1px #ebf6f7;
		-webkit-appearance: none;
	}
	.shadow-brand-300 {
		box-shadow: 0 0 0 1px #d7ecef;
		-webkit-appearance: none;
	}
	.shadow-brand-400 {
		box-shadow: 0 0 0 1px #afd9df;
		-webkit-appearance: none;
	}
	.shadow-brand-500 {
		box-shadow: 0 0 0 1px #87c6cf;
		-webkit-appearance: none;
	}
	.shadow-brand-600 {
		box-shadow: 0 0 0 1px #37a0af;
		-webkit-appearance: none;
	}
	.shadow-brand-700 {
		box-shadow: 0 0 0 1px #318093;
		-webkit-appearance: none;
	}
	.shadow-brand-800 {
		box-shadow: 0 0 0 1px #1f6677;
		-webkit-appearance: none;
	}

	.fill-brand-100 {
		fill: #f5fafb;
	}
	.fill-brand-200 {
		fill: #ebf6f7;
	}
	.fill-brand-300 {
		fill: #d7ecef;
	}
	.fill-brand-400 {
		fill: #afd9df;
	}
	.fill-brand-500 {
		fill: #87c6cf;
	}
	.fill-brand-600 {
		fill: #37a0af;
	}
	.fill-brand-700 {
		fill: #318093;
	}
	.fill-brand-800 {
		fill: #1f6677;
	}

	/* Navigation */
	.navigation--brand-colors {
		background-color: #318093;
		border-color: #1f6677 !important;
	}

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

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

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

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

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

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

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

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

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

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

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