:root {
	--background: var(--gray-900);
	--foreground: var(--gray-100);

	--accent: #7E3AA6;

	--error: #A63A4D;
	--disk-b-alt: #582D35;

	--confirm: #3AA699;
	--disk-a-alt: #244743;

	/* shade */
	--gray-100: #141619;
	--gray-200: #1F242D;
	--gray-300: #293140;
	--gray-600: #757D92;
	--gray-700: #A9AFC0;
	--gray-800: #CED2DC;
	--gray-900: #E3E6EE;

	/* box-shadow */
	--drop-level-2: 0px 8px 32px 0px  rgba(0, 0, 0, 0.3);
	--drop-level-1: 0px 8px 12px -4px rgba(0, 0, 0, 0.15);

	/* border-radius */
	--tight-corner: 6px;
	--loose-corner: 8px;

	/* margin/padding */
	--spacing-small:  6px;
	--spacing-medium: 12px;
	--spacing-large:  24px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: var(--gray-900);
		--foreground: #FFFFF3;

		--accent: #AD34F3;

		--error: #FF4365;
		--disk-b-alt: #F49BA1;

		--confirm: #00D9C0;
		--disk-a-alt: #86F3F3;

		--gray-100: #CED2DC;
		--gray-200: #A9AFC0;
		--gray-300: #757D92;
		--gray-700: #293140;
		--gray-800: #1F242D;
		--gray-900: #141619;
	}
}

/* html { */
/* 	--text: #FCFFFD; */
/* 	--page-background: var(--text); */

/* 	--background: #5D737E; */
/* 	--text-alt: var(--background); */
/* 	--background-alt: #81949E; */

/* 	--disk-a: #E16D82; */
/* 	--disk-a-text: #FDC0C4; */
/* 	--disk-b: #71D9CC; */
/* 	--disk-b-text: #C0FDEB; */
/* } */

/* default margin */
html, body {
	margin: 0;
	padding: 0;
}

/* subsection font size */
h2 { font-size: 20px; }

/* subsubsection font size */
h3 {
	font-size: .9rem;
	padding-bottom: 6px;
}

/* navbar fix */
body { padding-left: 48px; }

/* font */
html { font-family: "Inter", sans-serif; }

/* color */
:root, html, body {
	background-color: var(--background);
	color: var(--foreground);
}

/* link fix */
a {
	color: var(--text);
	text-decoration: none;
}

/* centering misschien */
.CenteredPageInner { text-align: center; }
.CenteredPageInner > * { text-align: left; }

/* line height reset */
h1, h2, h3, p, b, i, span, td, th {
	margin: 0;
	line-height: 1.2;
}

/* table groottes met percentages werkt nu */
table { table-layout: fixed; }

/* table styles */
td, th { padding: 4px; }

input {
	color: var(--foreground);
	background-color: transparent;
	font-family: inherit;
	border: 0;
	font-size: 1rem; /* why? */
}

input::placeholder {
	font-style: italic;
	opacity: 1;
	color: var(--gray-600);
}

/* remove chrome's ugly :focus outline */
:focus { outline: none; }

/* scroll balken */
::-webkit-scrollbar { width: 0 !important; }

/* material-ui default state */
svg.MuiSvgIcon-root { transition: none !important; }

/* editable field status */
*[contenteditable] { border-color: var(--background-alt); }
*[contenteditable="true"]:focus { border-color: var(--disk-a); }
*[contenteditable="true"] {
	background-color: var(--page-background);
	color: var(--text-alt);
	padding: 6px;
	border-radius: 6px;
	border-style: solid;
	border-width: 2px;
}

.outcome.win { color: var(--disk-a-alt); }
.outcome.lose { color: var(--disk-b-alt); }
.outcome.draw { color: var(--gray-600); }