/*
 * Your custom variables
 */

// screen size - 32px (ex. 1400 - 32 = 1368)
$grid-breakpoints: (
	xs: 0,
	sm: 576px,
	md: 768px,
	lg: 992px,
	xl: 1168px,
	xxl: 1368px,
	xxxl: 1568px,
	xxxxl: 1868px,
);
// screen size - (32px * 2) (ex. 1400 - 64 = 1336)
$container-max-widths: (
	sm: 540px,
	md: 720px,
	lg: 960px,
	xl: 1136px,
	xxl: 1336px,
	xxxl: 1536px,
	xxxxl: 1836px,
);

$full-body-min-width: map-get($grid-breakpoints, 'lg');

$font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
	'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
	'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
	'Liberation Mono', 'Courier New', monospace;

$font-family-base: 'Lato', $font-family-sans-serif;

$grid-gutter-width: 2rem;
$grid-gutter-height: 2rem;
$grid-gutter-element-height: $grid-gutter-height;

$border-radius: 0.25rem;
$border-radius-lg: 0.3rem;
$border-radius-sm: 0.2rem;

$font-size-base: 1rem;
$h1-font-size: $font-size-base * 2.25;
$h3-font-size: $font-size-base * 1.75;
$h4-font-size: $font-size-base * 1.5;
$h5-font-size: $font-size-base * 1.25;
$h6-font-size: $font-size-base;

@import '~@a2nt/ss-bootstrap-ui-webpack-boilerplate/src/scss/_variables';

// Add your site-wide + content editor typography styling

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	color: $headings-color;
}