/*
 * The palette: the suite's neutral greys and white surfaces, with the accent (--blue) set at
 * runtime from the appearance settings. Dark mode keeps the same surfaces reversed.
 */
:root {
	--canvas: #f7f8fa;
	--surface: #fff;
	--sunken: #eceef2;
	--rail: #f0f2f5;
	--surface-alt: #fafafa;
	--ink: #242424;
	--ink-strong: #1b1b1b;
	--text: var(--ink);
	--muted: #616161;
	--faint: #8a8a8a;
	--subtle: #777;
	--line: #e3e6eb;
	--line-strong: #c6cbd3;
	--hover: #ebebeb;
	--blue: #0f6cbd;
	--accent-ink: #0f6cbd;
	--accent-fg: #fff;
	--selected: #e7eef8;
	--ok: #16856a;
	--danger: #c4314b;
	color-scheme: light;
}
:root[data-theme='dark'] {
	--canvas: #181a1e;
	--surface: #202228;
	--sunken: #121418;
	--rail: #1c1e23;
	--surface-alt: #252830;
	--ink: #f0f0f0;
	--ink-strong: #fff;
	--muted: #b5b5b5;
	--faint: #8d8d8d;
	--subtle: #aaa;
	--line: #34383f;
	--line-strong: #4d535d;
	--hover: #2e3138;
	--blue: #479ef5;
	--accent-ink: #7ab8ff;
	--accent-fg: #141414;
	--selected: #29384c;
	--ok: #4fc08a;
	--danger: #ff8585;
	color-scheme: dark;
}

/* Appearance settings */
fieldset:where(:not(.pptxv *, [class*='pptxv-'], [class*='pptxv-'] *)) {
	border: 0;
	margin: 0 0 18px;
	padding: 0;
}
legend:where(:not(.pptxv *, [class*='pptxv-'], [class*='pptxv-'] *)) {
	font-weight: 600;
	margin: 0 0 12px;
	padding: 0;
}
.theme-modes,
.theme-accents {
	display: flex;
	gap: 12px;
}
.theme-modes label {
	flex: 1;
	text-align: center;
	font-size: 12px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	font-weight: 400;
}
/* The radio covers its preview invisibly, so the preview is the hit target. */
.theme-modes input,
.theme-accents input {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.theme-preview {
	display: block;
	height: 64px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-panel);
	background: #f7f8fa;
	box-shadow:
		inset 14px 0 #f0f2f5,
		inset 15px 0 #e3e6eb,
		inset 0 10px #fff,
		inset 0 11px #e3e6eb;
}
.theme-preview.dark {
	background: #181a1e;
	box-shadow:
		inset 14px 0 #1c1e23,
		inset 15px 0 #34383f,
		inset 0 10px #202228,
		inset 0 11px #34383f;
}
.theme-preview.system {
	background: linear-gradient(90deg, #f7f8fa 50%, #181a1e 50%);
	box-shadow:
		inset 0 10px transparent,
		inset 0 11px #8d8d8d;
}
.theme-modes input:checked + span {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}
.theme-accents {
	flex-wrap: wrap;
}
.theme-accents label {
	font-size: 11px;
	text-align: center;
	align-items: center;
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	font-weight: 400;
}
.theme-accents span {
	display: block;
	width: 32px;
	height: 32px;
	border-radius: 50%;
}
.theme-accents input:checked + span {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}
.theme-modes input:focus-visible + span,
.theme-accents input:focus-visible + span {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}
.theme-hint {
	font-size: 12px;
	color: var(--muted);
}
#theme-picker {
	padding: 7px;
}