// Function, variables
@import "../vars";

// Theme Customize
@import "../../../../plugins/system/t4/themes/base/scss/theme.tpl";


:root {
	--font-special-family: __special_font_family;
	--heading-color: #111;
	--border-color: rgba(0,0,0,0.1);

	--gutter-xs: 12px;
	--gutter-sm: 24px;
	--gutter-normal: 32px;
	--gutter-lg:	64px;
	--gutter-xl: 128px;

	--hero-font-size: 60px;

	// Tablet view
	@include media-breakpoint-down(xxl) {
		--hero-font-size: 40px;
		--h1-font-size: 34px;
		--h2-font-size: 32px;

		--gutter-normal: 32px;
		--gutter-lg:	32px;
		--gutter-xl: 64px;
	}

	// Mobile view
	@include media-breakpoint-down(lg) {
		--h1-font-size: 30px;
		--h2-font-size: 28px;
		--h3-font-size: 24px;

		--gutter-xl: 32px;
	}

	@include media-breakpoint-down(sm) {
		--hero-font-size: 30px;
		--h1-font-size: 28px;
		--h2-font-size: 26px;
		--h3-font-size: 24px;
		--h4-font-size: 22px;

		--gutter-sm: 16px;
		--gutter-normal: 24px;
		--gutter-lg:	24px;
		--gutter-xl: 24px;
	}
}

@each $color, $value in $theme-colors {
  .bg-#{$color} {
    background-color: var(--color-#{$color})!important;
  }
}