:root {
	/* Color */
	--type-primary: #323130;
	--type-secondary: #505E5C;
	--type-disabled: #A19F9D;
	--body-divider: #EDE8E9;
	--input-border: #8A8886;
	--input-hover-border: #323130;
	--theme-primary: #0078D4;
	--theme-lighter-alt: #EFF6FC;
	--theme-lighter: #DEECF9;
	--theme-light: #C7E0F4;
	--theme-tertiary: #2B88D8;
	--theme-dark-alt: #106EBE;
	--theme-dark: #005A9E;
	--theme-darker: #004578;
	--error-fill: #FDE7E9;
	--error: #A80000;
	--success-fill: #DFF6DD;
	--success: #107C10;
	--severe-fill: #FED9CC;
	--severe: #D83B01;
	--warning-fill: #FFF4CE;
	--warning: #797775;
	--white: #FFFFFF;
	--black: #000000;

	/* Typography */
	--metadata: 12px;
	--body: 14px;
	--subject: 16px;
	--header: 18px;
	--pane-header: 20px;
	--page-title: 28px;
	--greeting-title: 32px;
	--hero-title: 42px;
	--xl-numerics: 68px;

	--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, Oxygen-Sans, Ubuntu, Cantarell,
		"Helvetica Neue", sans-serif;
		font-size: var(--body);

	--regular: 400;
	--semi-bold: 500;
	--bold: 700;

	/* Greys */
	--grey10: #FAF9FB;
	--grey20: #F3F2F1;
	--grey30: #EDEBE9;
	--grey40: #E1DFDD;
	--grey50: #D2D0CE;
	--grey60: #C8C6C4;
	--grey90: #A19F9D;
	--grey130: #605E5C;
	--grey150: #3B3A39;
	--grey160: #323130;
	--grey190: #201F1E;

	/* Spacing */
	--s1: 4px;
	--s2: calc(var(--s1) * 2);
	--s3: calc(var(--s1) * 3);
	--s4: calc(var(--s1) * 4);
	--s5: calc(var(--s1) * 5);
	--s6: calc(var(--s1) * 6);

	/* Shadows */
	--depth-4: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
	--depth-8: 0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);
	--depth-16: 0px 1.2px 3.6px rgba(0, 0, 0, 0.1), 0px 6.4px 14.4px rgba(0, 0, 0, 0.13);
	--depth-64: 0px 4.8px 14.4px rgba(0, 0, 0, 0.18), 0px 25.6px 57.6px rgba(0, 0, 0, 0.22);
}

html{
	display: flex;
	flex: 1;
	min-height: 100%;
	color: var(--type-primary);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
	Roboto, Oxygen-Sans, Ubuntu, Cantarell,
	"Helvetica Neue", sans-serif;
	font-size: var(--body);
	/*letter-spacing: 0.01em;*/
}

body {
	display: flex;
	flex: 1;
	flex-direction: column;
	margin: 0;
}

button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

.group {
	display: flex;
	flex-direction: row;
}

.stack {
	display: flex;
	flex-direction: column;
}

.error {
	font-size: var(--metadata);
	color: var(--error);
}