/**
 * WAISG 颜色布局 · 内置基础暗色皮肤（仅标准模式输出；适配模式下主题皮肤优先）
 *
 * 两层设计：
 * 1. 变量层：--waisg-* 全局可用，主题可引用 / 覆盖（"混合"模式的接管口）；
 * 2. 结构面层：按 WordPress 主题通用约定（结构元素 + 经典类名）把页头 / 文章 /
 *    侧栏 / 卡片 / 评论等容器压到暗色面板色，!important 仅用于压过主题对这批
 *    "结构性容器"的浅色底——泛用主题 80% 观感靠这一层；剩余细节用模块设置页
 *    的「自定义 CSS」微调（暗色选择器前缀 .waisg-scheme-dark）。
 *
 * color-scheme 属性让浏览器原生控件（滚动条 / 表单 / 下拉）跟随变暗。
 */

:root {
	--waisg-bg: #ffffff;
	--waisg-surface: #f6f7f8;
	--waisg-fg: #1d2327;
	--waisg-muted: #646970;
	--waisg-border: #dcdcde;
	--waisg-link: #2271b1;
	--waisg-code-bg: #f0f0f1;
}

/* 变量定义在携带状态 class 的元素上（html 或 body 任一挂载皆生效） */
:is(html, body).waisg-scheme-dark {
	color-scheme: dark;
	--waisg-bg: #1b1d20;
	--waisg-surface: #26282d;
	--waisg-fg: #ced2d8;
	--waisg-muted: #9198a1;
	--waisg-border: #383c42;
	--waisg-link: #7fb1ea;
	--waisg-code-bg: #111316;
}

/* ── 页面底色与正文 ───────────────────────────────────────── */
html.waisg-scheme-dark body,
body.waisg-scheme-dark {
	background-color: var(--waisg-bg) !important;
	color: var(--waisg-fg) !important;
}

/* ── 结构面：主题通用约定容器统一压到面板色 ────────────────── */
:is(html, body).waisg-scheme-dark :is(
	header, footer, nav, aside, article, main,
	.site-header, .site-footer, #masthead, #colophon,
	.site-content, .content-area, .site-main,
	.entry-header, .entry-content, .entry-summary, .entry, .hentry, .post, .page,
	.widget, .widget-area, .sidebar,
	.navbar, .topbar, .nav-menu, .navigation, .pagination,
	.comments-area, .comment-list, .comment, .comment-body, .comment-respond, .comment-form,
	.card, .panel, .modal, .dropdown, .sub-menu, .breadcrumbs, .tagcloud
) {
	background-color: var(--waisg-surface) !important;
	color: var(--waisg-fg) !important;
}

/* 标题在暗色面板上必须可读（主题的深色标题色不适用） */
:is(html, body).waisg-scheme-dark :is(h1, h2, h3, h4, h5, h6, .entry-title, .widget-title, .comment-author) {
	color: var(--waisg-fg) !important;
}

/* 正文区链接：主题为浅底调校的深色链接在暗底不可读，统一换行可读的浅色 */
:is(html, body).waisg-scheme-dark :is(.entry-content, .entry-summary, .comment-content, .widget) a {
	color: var(--waisg-link) !important;
}
:is(html, body).waisg-scheme-dark :is(.entry-content, .entry-summary, .comment-content, .widget) a:hover,
:is(html, body).waisg-scheme-dark :is(.entry-content, .entry-summary, .comment-content, .widget) a:focus {
	color: var(--waisg-fg) !important;
}

/* 次要文字 */
:is(html, body).waisg-scheme-dark :is(.entry-meta, .comment-metadata, .breadcrumb, .screen-reader-text) {
	color: var(--waisg-muted) !important;
}

/* ── 通用元素表层（正文里最常出现的几类） ─────────────────── */
.waisg-scheme-dark blockquote {
	background: var(--waisg-surface);
	color: var(--waisg-fg);
	border-color: var(--waisg-border);
}
.waisg-scheme-dark hr {
	border-color: var(--waisg-border);
}
.waisg-scheme-dark table,
.waisg-scheme-dark td,
.waisg-scheme-dark th {
	border-color: var(--waisg-border);
}
.waisg-scheme-dark th {
	color: var(--waisg-fg);
}
.waisg-scheme-dark :is(pre, code, kbd) {
	background-color: var(--waisg-code-bg) !important;
	color: var(--waisg-fg) !important;
}

/* ── 表单（输入类；按钮交给浏览器 color-scheme 原生渲染） ───── */
.waisg-scheme-dark :is(input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]), textarea, select) {
	background-color: var(--waisg-surface) !important;
	color: var(--waisg-fg) !important;
	border-color: var(--waisg-border) !important;
}
.waisg-scheme-dark input::placeholder,
.waisg-scheme-dark textarea::placeholder {
	color: var(--waisg-muted);
}