:root {
	color-scheme: light dark;

	--bg: hsl(0, 0%, 98%);
	--bg-faint: hsl(0, 0%, 92%);
	--border: hsl(0, 0%, 75%);
	--text: hsl(220, 15%, 20%);

	/* Pastel tints using color-mix for a "rubber pastel" flavor */
	--special-red: color-mix(in srgb, #ff6f61 70%, white);
	--special-green: color-mix(in srgb, #6fcf97 70%, white);
	--special-blue: color-mix(in srgb, #4f8cff 90%, white);
	--special-yellow: color-mix(in srgb, #ffe066 70%, white);
	--special-purple: color-mix(in srgb, #b39ddb 70%, white);
	--special-gray: color-mix(in srgb, #b0b0b0 60%, white);

	--special: var(--special-blue);
	--special-hover: color-mix(in srgb, var(--special) 60%, white);
	--on-special: hsl(0, 0%, 98%);
	--error: #ff6f61;

	--padding: 0.4rem;
	--padding-reduced: 0.25rem;
	--padding-compact: 0.125rem;
	--thickness: 0.25rem;

	--min-menu-width: 12rem;

	--fa-style: "fa-light";
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(220, 15%, 15%);
		--bg-faint: hsl(220, 15%, 22%);
		--border: hsl(0, 0%, 25%);
		--text: hsl(0, 0%, 98%);

		--special-red: color-mix(in srgb, #ff6f61 60%, #222 40%);
		--special-green: color-mix(in srgb, #6fcf97 60%, #222 40%);
		--special-blue: color-mix(in srgb, #4f8cff 100%, #222 0%);
		--special-yellow: color-mix(in srgb, #ffe066 60%, #222 40%);
		--special-purple: color-mix(in srgb, #b39ddb 60%, #222 40%);
		--special-gray: color-mix(in srgb, #b0b0b0 50%, #222 50%);
	}
}

body {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 12pt;
	background: var(--bg);
	color: var(--text);
}

h1 {
	color: var(--special);
	margin: var(--padding);
}

dialog[open] {
	position: fixed;
	padding: 0;
	font-size: smaller;
	border: thin solid var(--border);
	z-index: 1000;
	max-width: 50rem;
}

dialog h1 {
	position: relative;
	background-color: var(--special);
	color: var(--on-special);
	margin: 0;
	padding: var(--padding);
	font-size: smaller;
}

article {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

article>div {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	overflow: auto;
}

article:focus {
	outline: none;
	border: none;
}

input {
	padding: var(--padding-compact);
	margin: 0;
}

a {
	color: var(--special);
}