@import url(./sub/generic.css);
@import url(./sub/outer.css);
@import url(./sub/inner.css);
@import url(./sub/overlays.css);


:root {
	/* Links */
	--spinner: url(../res/loading-spinner.svg);
	--cover: url(../res/cover.webp);

	/* Measures */
	--field-box-shadow: 0 0 5px 3px;

	--cell-border-width: 1px;
	--cell-padding: 0.5rem;
	--prefix-gap: 0.5rem;

	/* Fonts */
	--normal-font: sans-serif;

	/* Colors */
	--accent-color: #026081;
	--fg-color: #363636;
	--bright-fg-color: #949494;

	--main-bg-color: #f6f6f6;
	--primary-bg-color: #fff;
	--secondary-bg-color: #ececec;
	--contrast-bg-color: #3b4040;
}

:root {
	color-scheme: only light;

	/* Text rendering */
	font-family: var(--normal-font);
	text-rendering: geometricprecision;
	text-size-adjust: none;

	font-size: 16px;
	letter-spacing: -0.01em;

	/* Colors */
	background-color: var(--secondary-bg-color);
	color: var(--fg-color);
	caret-color: var(--accent-color);

	@media (max-width: 420px) {
		font-size: 12px;
	}
}