:root {
	/* bottom left circle of logo */
	--dark-resilient-orange: #fb6e52; /* dark */
	/*  bottom right circle of logo  */
	--the-peach-of-my-eye: #f9a253; /* mid */
	/* top center circle of logo  */
	--yellow-jade: #ffce53; /* light */
}

:root .simple-root {
	/* Default (light) theme */
	--bg: #fff;
	--accent-bg: color-mix(in srgb, var(--dark-resilient-orange) 5%, white 95%);
	--text: #212121;
	--text-light: #282a29;
	--accent: var(--dark-resilient-orange);
	--accent-hover: color-mix(in srgb, var(--accent) 90%, white 10%);
	--accent-text: var(--bg);
	--preformatted: #444;
	--disabled: #efefef;

	--border: var(--the-peach-of-my-eye);
	--code: var(--yellow-jade);
	--marked: var(--yellow-jade);
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root .simple-root {
		color-scheme: dark;
		--bg: #212121;
		--accent-bg: #2b2b2b;
		--text: #dcdcdc;
		--text-light: #ababab;
		--accent: var(--dark-resilient-orange);
		--accent-hover: color-mix(in srgb, var(--accent) 90%, white 10%);
		--accent-text: var(--bg);
		--code: var(--dark-resilient-orange);
		--preformatted: #ccc;
		--disabled: #111;
	}
}

/* stop scrolling the body */
body:has(dialog[open]) {
	overflow: hidden;
}

/* style indeterminates */
input[type="checkbox"]:indeterminate {
	background-color: var(--accent);
}
input[type="checkbox"]:indeterminate::after {
	content: " ";
	width: 0.34em;
	height: 0.1em;
	border-radius: 0;
	position: absolute;
	top: 0.2em;
	left: 0.09em;
	background-color: var(--bg);
	font-size: 1.8em;
	transform: none;
}

/* color range input knobs according to simple css theme */
input[type="range"] {
	--size: 1.5rem;
	--radius: calc(var(--standard-border-radius) - 1px);
}

input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	height: var(--size);
	width: var(--size);
	background-color: var(--accent);
	border-radius: var(--radius);
}

input[type="range"]::-moz-range-thumb {
	appearance: none;
	height: var(--size);
	width: var(--size);
	background-color: var(--accent);
	border-radius: var(--radius);
	border: none;
}