/* 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;

/* Spacing Header Bar */
$stickyheader-mobile : 3.438rem; // 55px
$stickyheader-desktop: 5.5rem; // 88px

/* Grid Columns */
$col1                : 7.75rem; // 1 grid column
$col2                : 15.5rem; // 2 grid column
$col3                : 23.25rem;
$col4                : 31rem;
$col5                : 35.75rem;
$col6                : 46.5rem;
$col7                : 54.25rem;
$col8                : 62rem;
$col9                : 69.75rem;
$col10               : 77.5rem;
$col11               : 85.25rem;
$col12               : 93rem;

$default-content-width: 43.5rem;
$wide-content-width   : 87rem;
$max-content-width    : 87rem;
$col10-nogap          : 74.5rem;

/* Border Radius */
$border-radius-s     : 1.5rem; // 24px
$border-radius-m     : 2.25rem; // 36px
$border-radius-l     : 2.625rem; // 42px
$border-radius-circle: 6.25rem; // 100px

:root {
	/* Fonts */
	--global--font-primary: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
	--global--font-secondary: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
	--global--font-code: 'Monaco', 'Courier 10 Pitch', -apple-system, Courier, monospace;

	/* Font Families */
	--heading--font-family: var(--global--font-primary);
	--body--font-family: var(--global--font-secondary);
	--code--font-family: var(--global--font-code);

	/* Content widths and grid */
	--global--max-content-width: 93rem;
	--global--grid-gap: #{2 * $s-4}; // 1rem.

	/* 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;
}

/* Fonts */
$font__heading       : 'IBM Plex Sans', sans-serif;

@media only screen and (min-width: 48em) { // from small tablet screens (md)

	: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;
	}
}