/* Static loader shown before the JS bundle parses and React mounts, so the first
   paint is the themed background + spinner rather than a blank page. Colours mirror
   the MUI themes in src/theme/themes.ts. React replaces #root on mount, discarding
   the .app-loader markup. loader.js overrides the vars for a saved theme mode. */
:root {
	--app-loader-bg: #f4ead5;
	--app-loader-fg: #0a5095;
}
@media (prefers-color-scheme: dark) {
	:root {
		--app-loader-bg: #1e1710;
		--app-loader-fg: #f5de47;
	}
}
.app-loader {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--app-loader-bg);
}
.app-loader__spinner {
	width: 40px;
	height: 40px;
	border: 4px solid transparent;
	border-top-color: var(--app-loader-fg);
	border-radius: 50%;
	animation: app-loader-spin 0.8s linear infinite;
}
@keyframes app-loader-spin {
	to {
		transform: rotate(360deg);
	}
}