:root {
	--brand-hue: 212;
	--brand-saturation: 84%;
	--brand-lightness: 18%;
	--brand-color: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
	--accent-color: #E1CB88;
	--surface-light: #ffffff;
	--surface-light-2: #f6f6f6;
	--secondary-color: #757778;
	--shadow-color: 0px 10px 50px 0px rgba(var(--surface-light), 0.08);
	--background-color-on-focus: hsla(var(--brand-hue) var(--brand-saturation) var(--brand-lightness), .2);
	--back-shadow: 1px 2px 10px rgba(0, 0, 0, 0.08);
	--text-color: #444444;
	--text-color-mute: hsl(0 0% 60%);
	--image-back-color: #dedede;
	--icon-color: hsl(0 0% 70%);
	--icon-color-2: hsl(0 0% 50%);
	--content-width: 136.6rem;
	--gutter: 4rem;

	--horizontal-bar-color: hsl(210 14% 90%);
	--border-color: rgba(206, 212, 218, 1);
	--border-radius: 10px;
	--input-border-radius: 5px;
	--card-sahdow-color: rgba(0, 0, 0, 0.1);

	--f-title: 'Montserrat, sans-serif';
	--f-body: 'Montserrat, sans-serif';
	--fs-default: 1.6rem;
	--fs-title-1: 2rem;

	--fw-400: 400;
	--fw-500: 500;
	--fw-550: 550;
	--fw-700: 700;

	--viewport-large: 1023px;
	--viewport-medium: 767px;
	--dropdown-menu-index: 10;

	--z-index-dropdown: 100001;
	--z-index-error-dialog: 100000;
	--z-index-modal-dialog: 10000;

	--content-area: {
		display: grid;
		grid-template-columns: minmax(calc(calc(var(--gutter) / 2)), 1fr) minmax(min-content, var(--content-width)) minmax(calc(calc(var(--gutter) / 2)), 1fr);

		@media screen and(min-width: 768px) {
			grid-template-columns: minmax(var(--gutter), 1fr) minmax(min-content, var(--content-width)) minmax(var(--gutter), 1fr);
		}
	}
}