/* Decks color config */
html[data-theme='light'] :is(#menu, #attempts) .test-decks { --section-color: oklch(0.72 0.14 345); }
html[data-theme='light'] :is(#menu, #attempts) .free-decks { --section-color: oklch(0.69 0.15 326); }
html[data-theme='light'] :is(#menu, #attempts) .basic-counting-decks { --section-color: oklch(0.68 0.14 302); }
html[data-theme='light'] :is(#menu, #attempts) .skip-counting-decks { --section-color: oklch(0.65 0.13 282); }
html[data-theme='light'] :is(#menu, #attempts) .addition-and-subtraction-decks { --section-color: oklch(0.65 0.13 258); }
html[data-theme='light'] :is(#menu, #attempts) .multiplication-and-division-decks { --section-color: oklch(0.67 0.11 230); }
html[data-theme='light'] :is(#menu, #attempts) .negative-numbers { --section-color: oklch(0.68 0.11 200); }
html[data-theme='light'] :is(#menu, #attempts) .fractions-decks { --section-color: oklch(0.66 0.1 174); }
html[data-theme='light'] :is(#menu, #attempts) .decimals-decks { --section-color: oklch(0.7 0.12 150); }
html[data-theme='light'] :is(#menu, #attempts) .percents-decks { --section-color: oklch(0.7 0.12 132); }
html[data-theme='light'] :is(#menu, #attempts) .divisibility-tests { --section-color: oklch(0.72 0.12 112); }
html[data-theme='light'] :is(#menu, #attempts) .factors-and-multiples { --section-color: oklch(0.73 0.12 94); }
html[data-theme='light'] :is(#menu, #attempts) .powers-and-roots { --section-color: oklch(0.72 0.13 72); }
html[data-theme='light'] :is(#menu, #attempts) .geometry { --section-color: oklch(0.69 0.14 52); }
html[data-theme='light'] :is(#menu, #attempts) .binary { --section-color: oklch(0.67 0.15 36); }
html[data-theme='light'] :is(#menu, #attempts) .statistics-and-probability-decks { --section-color: oklch(0.65 0.14 20); }
html[data-theme='light'] :is(#menu, #attempts) .weights-and-measures-decks { --section-color: oklch(0.63 0.13 5); }
html[data-theme='light'] :is(#menu, #attempts) .challenging-math { --section-color: oklch(0.64 0.14 345); }
html[data-theme='light'] :is(#menu, #attempts) .xy-plane { --section-color: oklch(0.63 0.14 325); }

html[data-theme='light'] .jump-back-in-card {
	border-color: color-mix(in oklch, var(--section-color) 58%, white);
	background-color: color-mix(
		in oklch,
		var(--section-color) calc(5% + var(--jump-proficiency, 0) * 0.45%),
		transparent
	);
	color: var(--color-jump-ink);
	text-shadow: none;
	box-shadow: none;
}

html[data-theme='light'] .jump-back-in-card.is-finished :is(
		.jump-back-in-time,
		.jump-back-in-label,
		.jump-back-in-points
	) {
	color: var(--color-jump-ink);
}

html[data-theme='light'] .jump-back-in-card:focus-visible {
	outline-color: var(--color-jump-focus);
}

html[data-theme='light'] .jump-back-in-card.is-finished:focus-visible {
	outline-color: var(--color-jump-ink);
}

html[data-theme='light'] #menu > .menu-section button {
	border: 1px solid color-mix(in oklch, var(--section-color) 58%, white);
	background-color: color-mix(in oklch, var(--section-color) 30%, white);
	color: var(--light-menu-ink);
	text-shadow: none;
	box-shadow: 0 1px 2px oklch(0.25 0.03 278 / 12%);
}

html[data-theme='light'] #menu > .menu-section .menu-header-2 {
	border-color: color-mix(in oklch, var(--section-color) 72%, white);
	background-color: var(--section-color);
	color: oklch(0.2 0.035 278);
	font-weight: 700;
	box-shadow: 0 2px 5px oklch(0.25 0.03 278 / 16%);
}

html[data-theme='light'] #menu > .menu-section button:not(.menu-header-2):hover,
html[data-theme='light'] #menu > .menu-section button:not(.menu-header-2):focus-visible {
	background-color: color-mix(in oklch, var(--section-color) 43%, white);
}

html[data-theme='light'] :is(#menu, #attempts) {
	--section-color: oklch(0.67 0.13 315);
	background-color: var(--light-menu-surface);
	background-image:
		linear-gradient(oklch(0.985 0.012 92 / 82%), oklch(0.965 0.022 92 / 82%)),
		url(../numbersNEW.png);
	color: var(--light-menu-ink);
}

html[data-theme='light'] .menu-topbar {
	border-bottom-color: oklch(0.86 0.035 292);
	background-color: oklch(0.985 0.012 92 / 96%);
	box-shadow: 0 2px 12px oklch(0.25 0.03 278 / 14%);
}

html[data-theme='light'] .menu-topbar-brand {
	color: oklch(0.28 0.08 305);
}

html[data-theme='light'] .menu-topbar-points {
	border-color: oklch(0.78 0.13 83);
	background-color: oklch(0.94 0.08 90);
	color: oklch(0.38 0.1 72);
}

html[data-theme='light'] .theme-switch {
	border-color: oklch(0.75 0.04 292);
	background-color: oklch(0.96 0.015 92);
	color: oklch(0.25 0.035 278);
}

html[data-theme='light'] .menu-login-button {
	color: white;
}

html[data-theme='light'] .menu-settings-button {
	background-color: transparent;
	color: oklch(0.4 0.14 303);
}

html[data-theme='light'] .menu-settings-button:hover,
html[data-theme='light'] .menu-settings-button:focus-visible {
	background-color: oklch(0.52 0.18 303 / 10%);
}

html[data-theme='light'] .menu-header-1 {
	background-color: oklch(0.91 0.07 315);
	color: oklch(0.29 0.09 305);
	text-shadow: none;
	box-shadow: inset 0 -1px 0 oklch(0.78 0.08 315 / 55%);
}

html[data-theme='light'] .theme-toggle:not(.theme-switch) {
	background-color: oklch(0.97 0 0 / 85%);
	color: black;
}