/* Spacing */
$s-0                 : 0;
$s-1                 : 0.25rem;
$s-2                 : 0.5rem;
$s-3                 : 0.75rem;
$s-4                 : 1rem;
$s-5                 : 1.25rem;
$s-6                 : 1.5rem;
$s-7                 : 2rem;
$s-8                 : 2.5rem;
$s-9                 : 3rem;
$s-10                : 4rem;
$s-11                : 5rem;
$s-12                : 6rem;
$s-13                : 7.5rem;
$s-14                : 9rem;
$s-15                : 11rem;
$s-16                : 13rem;
$s-17                : 15.5rem;
$s-18                : 18rem;

:root {

	/* Line Height */
	--global--line-height-reset: 1;

	/* Content widths and grid */
	--global--default-content-width: 43.5rem;
	--global--10col-nogap-content-width: 74.5rem;
	--global--wide-content-width: 90rem; // 1440px
	--global--max-content-width-nogap: 90rem; // 1440px
	--global--max-content-width: 93rem; // 1488px
	--global--grid-gap: #{2 * $s-4};

	/* Border radius */
	--global--border-radius-xxs: 0.625rem;
	--global--border-radius-xs: 0.938rem;
	--global--border-radius-s: 1.25rem;
	--global--border-radius-m: 1.563rem;
	--global--border-radius-l: 1.875rem;
	--global--border-radius-xl: 2.5rem;
	--global--border-radius-xxl: 3.125rem;
	--global--border-radius-xxxl: 3.75rem;
	--global--border-radius-xxxxl: 4.375rem;
	--global--border-radius-round: 6.25em;
}

/* SM breakpoint */
@media only screen and (min-width: 48em) {

	:root {

		/* Border radius */
		--global--border-radius-xxs: 0.625rem;
		--global--border-radius-xs: 1.25rem;
		--global--border-radius-s: 1.875rem;
		--global--border-radius-m: 2.5rem;
		--global--border-radius-l: 3.125rem;
		--global--border-radius-xl: 3.75rem;
		--global--border-radius-xxl: 4.375rem;
		--global--border-radius-xxxl: 5rem;
		--global--border-radius-xxxxl: 5.625rem;
	}
}

/* Custom Global styles */
body {

	/* Global Heading Font sizes */
	--global--font-size--h12: 5.125rem;
	--global--font-size--h11: 4.375rem;
	--global--font-size--h10: 3.75rem;
	--global--font-size--h9: 3.25rem;
	--global--font-size--h8: 2.875rem;
	--global--font-size--h7: 2.375rem;
	--global--font-size--h6: 2.125rem;
	--global--font-size--h5: 1.875rem;
	--global--font-size--h4: 1.5rem;
	--global--font-size--h3: 1.25rem;
	--global--font-size--h2: 1.125rem;
	--global--font-size--h1: 1rem;

	/* Global body font sizes */
	--global--font-size--body-xxs: 0.75rem;
	--global--font-size--body-xs: 0.875rem;
	--global--font-size--body-s: 1rem;
	--global--font-size--body-m: 1.125rem;
	--global--font-size--body-l: 1.25rem;
	--global--font-size--body-xl: 1.375rem;
	--global--font-size--body-xxl: 1.5rem;
	--global--font-size--body-xxxl: 1.625rem;
	--global--font-size--body-xxxxl: 1.875rem;

	/* Default content padding */
	--global--content--padding--left: 1rem;
	--global--content--padding--right: 1rem;

	// SM breakpoint
	@media only screen and (min-width: 48em) {

		--global--font-size--h12: 8.875rem;
		--global--font-size--h11: 10.375rem;
		--global--font-size--h10: 6rem;
		--global--font-size--h9: 4.875rem;
		--global--font-size--h8: 4rem;
		--global--font-size--h7: 3.25rem;
		--global--font-size--h6: 2.75rem;
		--global--font-size--h5: 2.25rem;
		--global--font-size--h4: 1.75rem;

		--global--font-size--body-xl: 1.5rem;
		--global--font-size--body-xxl: 1.75rem;
		--global--font-size--body-xxxl: 2rem;
		--global--font-size--body-xxxxl: 2.25rem;

		/* Default content padding */
		--global--content--padding--left: 2rem;
		--global--content--padding--right: 2rem;
	}

	// MD breakpoint
	@media only screen and (min-width: 64em) {

		--global--font-size--h12: 15.125rem;
		--global--font-size--h11: 11.75rem;
		--global--font-size--h10: 9.25rem;
		--global--font-size--h9: 7.25rem;
		--global--font-size--h8: 5.625rem;
		--global--font-size--h7: 4.375rem;
		--global--font-size--h6: 3.375rem;
		--global--font-size--h5: 2.625rem;
		--global--font-size--h4: 1.875rem;
		--global--font-size--h3: 1.375rem;

		--global--font-size--body-l: 1.375rem;
		--global--font-size--body-xl: 1.625rem;
		--global--font-size--body-xxl: 1.875rem;
		--global--font-size--body-xxxl: 2.25rem;
		--global--font-size--body-xxxxl: 2.625rem;
	}

	// LG breakpoint
	@media only screen and (min-width: 80em) {
		--global--font-size--h12: 25rem;
		--global--font-size--h11: 18.625rem;
		--global--font-size--h10: 13.875rem;
		--global--font-size--h9: 10.375rem;
		--global--font-size--h8: 7.75rem;
		--global--font-size--h7: 5.75rem;
		--global--font-size--h6: 4.375rem;
		--global--font-size--h5: 3rem;
		--global--font-size--h4: 2.125rem;
		--global--font-size--h3: 1.5rem;
		--global--font-size--h2: 1.25rem;

		--global--font-size--body-m: 1.25rem;
		--global--font-size--body-l: 1.5rem;
		--global--font-size--body-xl: 1.75rem;
		--global--font-size--body-xxl: 2.125rem;
		--global--font-size--body-xxxl: 2.5rem;
		--global--font-size--body-xxxxl: 3rem;

		/* Default content padding */
		--global--content--padding--left: 3rem;
		--global--content--padding--right: 3rem;
	}

	/* Theme Heading font sizes */
	--font-size--h12: var(--global--font-size--h12);
	--font-size--h11: var(--global--font-size--h11);
	--font-size--h10: var(--global--font-size--h10);
	--font-size--h9: var(--global--font-size--h9);
	--font-size--h8: var(--global--font-size--h8);
	--font-size--h7: var(--global--font-size--h7);
	--font-size--h6: var(--global--font-size--h6);
	--font-size--h5: var(--global--font-size--h5);
	--font-size--h4: var(--global--font-size--h4);
	--font-size--h3: var(--global--font-size--h3);
	--font-size--h2: var(--global--font-size--h2);
	--font-size--h1: var(--global--font-size--h1);

	/* Theme Body font sizes */
	--font-size--body-xxs: var(--global--font-size--body-xxs);
	--font-size--body-xs: var(--global--font-size--body-xs);
	--font-size--body-s: var(--global--font-size--body-s);
	--font-size--body-m: var(--global--font-size--body-m);
	--font-size--body-l: var(--global--font-size--body-l);
	--font-size--body-xl: var(--global--font-size--body-xl);
	--font-size--body-xxl: var(--global--font-size--body-xxl);
	--font-size--body-xxxl: var(--global--font-size--body-xxxl);
	--font-size--body-xxxxl: var(--global--font-size--body-xxxxl);
}
