/*
 * 暗色模式：跟随系统 prefers-color-scheme，不做手动切换开关。
 *
 * 策略是「重定义调色板令牌 + 少量定点覆盖」，不重写规则：
 * 主题的四个样式表已经全部走 var(--wp--preset--color--*)，核心又只在 :root 上
 * 定义这些预设（body 只是使用），所以换掉 :root 里的值就能整体翻转，body 的
 * 背景与文字色由核心那条规则自动跟着变。
 *
 * 但有四个令牌在亮色下身兼两职，翻转会翻错，必须单独盖掉：
 *   white    既是页面底色，又是「图片/黑底上的白字」
 *   gray-900 既是正文色，又是「激活药丸/按钮的深底」和 Hero 的兜底底色
 * 前者要分成「底色变深」与「白字仍白」，后者要分成「正文变亮」与「Hero 底仍深」。
 * 药丸、搜索按钮、分页当前页那几处是深底+白字，翻转后正好变成亮底+深字，
 * 是暗色模式该有的样子，不用管。
 *
 * 所有覆盖都加 body 前缀提高特异度，而不是靠源码顺序：本文件不能把
 * photo-wall.css 声明成依赖（那会让它在全站加载），顺序因此没有保证。
 *
 * 对比度已逐对核算：正文 16.16:1、次要文字 7.17:1、链接 6.65:1，全部过 AA。
 */

@media (prefers-color-scheme: dark) {
	:root {
		/* 让 UA 的原生控件（搜索框、滚动条）也跟着走暗色 */
		color-scheme: dark;

		--wp--preset--color--white: #161616;
		--wp--preset--color--gray-50: #1e1e1e;
		--wp--preset--color--gray-100: #242424;
		--wp--preset--color--gray-200: #333333;
		--wp--preset--color--gray-300: #404040;
		--wp--preset--color--gray-400: #5a5a5a;
		--wp--preset--color--gray-500: #a3a3a3;
		--wp--preset--color--gray-600: #bdbdbd;
		--wp--preset--color--gray-700: #d4d4d4;
		--wp--preset--color--gray-900: #f2f2f2;
		--wp--preset--color--accent: #4d9fff;
	}

	/* ===== 定点覆盖 ===== */

	/* 页眉是字面 rgba 白，不吃令牌：暗色下会是一条白色横条。 */
	body .hkt-header {
		background-color: rgba(22, 22, 22, 0.8);
		border-bottom-color: rgba(51, 51, 51, 0.7);
	}

	/* Hero 兜底底色用的是 gray-900，翻转后会变成近白色，图片加载前会闪白。 */
	body .wp-block-cover.hkt-hero {
		background-color: #000000;
	}

	/* 这三处是「图片或纯黑底上的白字」，white 翻转成深色后就看不见了。 */
	body h1.hkt-hero-title,
	body h4.hkt-tile-caption,
	body .hkt-lightbox {
		color: #ffffff;
	}
}