html {
	--primary-bg: hsl(150, 18%, 93%);
	--secondary-bg: hsl(0, 0%, 100%);
	--background-text: hsl(from var(--regular-text) h s calc(l/0.8));
	--regular-text: hsl(90, 22%, 31%);
	--header-text: hsl(91, 21%, 43%);

	color: var(--regular-text);
	background-color: var(--primary-bg);
	scrollbar-color: var(--header-text) var(--primary-bg);
}

:focus-visible {
	outline: var(--regular-text) solid 4px;
}

h1,
h1+p {
	color: var(--secondary-bg);
}

:is(details:has([aria-current="page"]) summary, [aria-current="page"]) {
	color: var(--secondary-bg);
	background-color: var(--background-text);
}