:where(html.light) {
	--theme-bg-colour: #ffffff;
	--theme-txt-colour: #111111;
	--theme-text-muted: #7c7c7c;
	--theme-text-secondary: #7c7c7c;
	--theme-panel-bg: #73737315;
	--theme-border-colour: #e0e0e0;
	--theme-hover-bg: #0e0e0e18;
	--theme-elevated-bg: #ffffff;
	--theme-input-bg: #ffffff;
	--theme-input-fg: #111111;
	--theme-warning-bg: #fef3c7;
	--theme-warning-text: #92400e;
	--theme-warning-border: #f59e0b;
}

:where(html.dark) {
	--theme-bg-colour: #042f2e;
	--theme-txt-colour: #ffffff;
	--theme-text-muted: #8ea1a1;
	--theme-text-secondary: #8ea1a1;
	--theme-panel-bg: #01070755;
	--theme-border-colour: #224847;
	--theme-hover-bg: #ffffff15;
	--theme-elevated-bg: #133b3b;
	--theme-input-bg: #032726;
	--theme-input-fg: #ffffff;
	--theme-warning-bg: #451a03;
	--theme-warning-text: #fbbf24;
	--theme-warning-border: #d97706;
}

:where(html.light, html.dark),
:where(html.light, html.dark) :where(body) {
	background-color: var(--theme-bg-colour);
	color: var(--theme-txt-colour);
}