/**
 * 深色模式 — 官方设计的令牌互换（ADR-0012 后续，owner ruling 2026-08-02）。
 *
 * Bricks 在 :root 上输出十个浅色令牌；此文件用同样的十个名字重绑定深色
 * 值。html[data-mh-theme]（0,1,1）在特异性上压过 :root（0,1,0），因此与
 * Bricks 内联 CSS 的加载顺序无关。
 *
 * 文库（.wk）四款皮肤各自携带固定配色，是刻意的艺术方向，不参与令牌
 * 互换 — 深色需求由「自由版」皮肤承担。
 *
 * 两个入口，一份色值：
 *   1. 显式选择：html[data-mh-theme="dark"]（切换按钮 + localStorage）
 *   2. 系统偏好：prefers-color-scheme: dark，且用户未显式选浅色
 */

html {
	color-scheme: light;
}

html[data-mh-theme="dark"] {
	color-scheme: dark;
	--bg: #141412;
	--surface: #1d1d1a;
	--ink: #e9e7e0;
	--ink-2: #a8a69d;
	--rule: #35342e;
	--rule-strong: #4c4a42;
	--accent: #55b287;
	--accent-ink: #7fc9a4;
	--visited: #a49eae;
	--flag: #d28e56;
}

@media (prefers-color-scheme: dark) {
	html:not([data-mh-theme="light"]) {
		color-scheme: dark;
		--bg: #141412;
		--surface: #1d1d1a;
		--ink: #e9e7e0;
		--ink-2: #a8a69d;
		--rule: #35342e;
		--rule-strong: #4c4a42;
		--accent: #55b287;
		--accent-ink: #7fc9a4;
		--visited: #a49eae;
		--flag: #d28e56;
	}
}

/**
 * 深色模式下的文库页。
 *
 * 文库四款皮肤保留各自固定的配色（金色渐变本身就是设计），不参与令牌
 * 互换；但在深色页面上，一块明亮的矩形直接切进黑色页脚会显得像出错。
 * 处理办法不是把整页强制回浅色（那会让深色模式读者被整屏米黄晃到），
 * 而是让这块内容读起来像「深色桌面上的一张纸」：圆角、投影、细边。
 */
html[data-mh-theme="dark"] .wk {
	border-radius: 10px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
	html:not([data-mh-theme="light"]) .wk {
		border-radius: 10px;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
	}
}

/* 切换按钮：跟随令牌，两种模式下都成立。 */
.mh-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9em;
	height: 1.9em;
	padding: 0;
	border: 1px solid var(--rule-strong);
	border-radius: 50%;
	background: var(--surface);
	color: var(--ink-2);
	font-size: 0.95em;
	line-height: 1;
	cursor: pointer;
}

.mh-theme-toggle:hover {
	color: var(--accent-ink);
	border-color: var(--accent);
}

.mh-theme-toggle:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.mh-theme-toggle-item {
	display: flex;
	align-items: center;
}

/* 头部导航找不到时的兜底：右下角悬浮。 */
.mh-theme-toggle.is-floating {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 90;
	width: 2.4em;
	height: 2.4em;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}