// scss-lint:disable PropertySortOrder
@import "modules/functions";
@import "modules/color";

$black: #3c3d46;
$white: #f8f8f8;
$yellow: #ede710;
$mint: #bfd8ca;

:root {
	@include font(cabin, regular, 1);

	--global-background-color: #{$white};
	--global-font-color: #{$black};
	--global-line-height: 1.5;

	--site-menu-height: 48px;

	--black: #{$black};
	--white: #{$white};
	--yellow: #{$yellow};
	--mint: #{$mint};

	--black-dark: #{darken($black, 10%)};
	--white-dark: #{darken($white, 10%)};
	--yellow-dark: #{darken($yellow, 10%)};
	--mint-dark: #{darken($mint, 10%)};

	box-sizing: border-box;
	-moz-osx-font-smoothing: grayscale;
	-o-font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	line-height: var(--global-line-height);
	-ms-overflow-style: -ms-autohiding-scrollbar; // IE11+
	overflow-y: scroll; // All browsers without overlaying scrollbars
	text-rendering: optimizeLegibility;
	text-size-adjust: 100%; // iOS 8+

	@media only screen and (min-width: 768px) {
		--site-menu-height: 96px;
	}

	@media only screen and (min-width: 1024px) {
		--site-menu-height: 128px;
	}
}

._dotted-background {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' width='6' fill='%23bfd8ca'%3E%3Cpath d='M0 4h2v2H0zm3-3h2v2H3z'/%3E%3C/svg%3E");
	background-position: 0 2px;
	background-size: 6px 6px;
}