/*******************************************************************************
THEME CONFIGURATION
主题配置 - 深色/浅色模式切换

This file contains all styles related to light/dark theme switching.
*******************************************************************************/

/*******************************************************************************
CSS CUSTOM PROPERTIES (Theme Variables)
*******************************************************************************/

:root {
	/* Light mode colors (default) */
	/* --theme-bg: #F5F5F5;
	--theme-text: #111;
	--theme-heading: #111;
	--theme-code-bg: #f7f7f7;
	--theme-code-text: inherit;
	--theme-code-border: #e7e7e7;
	--theme-pre-bg: #f7f7f7;
	--theme-pre-border: #e0e0e0;
	--theme-line-numbers-border: #ddd;
	--theme-line-numbers-text: #aaa;
	--theme-copy-btn-bg: #fff;
	--theme-copy-btn-text: #666;
	--theme-copy-btn-border: #ccc;
	--theme-copy-btn-hover-bg: #f0f0f0;
	--theme-copy-btn-hover-text: #333;
	--theme-copy-btn-copied-bg: #e6fffa;
	--theme-copy-btn-copied-text: #008000;
	--theme-copy-btn-copied-border: #008000;
	--theme-table-border: #ccc;
	--theme-table-header-bg: #f5f5f5;
	--theme-table-row-even: #fafafa;
	--theme-table-row-hover: #f0f0f0;
	--theme-math-filter: none;
	--theme-back-to-top: #555;
	--theme-back-to-top-hover: #111; */
	--theme-bg: #F8F8F8;           /* 暖白（米白） */
	--theme-text: #2c2c2c;         
	--theme-heading: #1a1a1a;
	
	/* ===== 代码块：冷灰 + 蓝边框 ===== */
	--theme-code-bg: #f0f2f5;          /* 冷灰底 */
	--theme-code-text: #2c2c2c;
	--theme-code-border: #d0d8e0;      /* 蓝灰边框 */
	
	--theme-pre-bg: #f0f2f5;
	--theme-pre-border: #d0d8e0;
	
	--theme-line-numbers-border: #d0d8e0;
	--theme-line-numbers-text: #b0bcc8;
		
	--theme-copy-btn-bg: #ffffff;
	--theme-copy-btn-text: #6b665a;
	--theme-copy-btn-border: #e3dfd6;
	--theme-copy-btn-hover-bg: #f1efe9;
	--theme-copy-btn-hover-text: #1a1a1a;
	--theme-copy-btn-copied-bg: #e8f5e9;
	--theme-copy-btn-copied-text: #2e7d32;
	--theme-copy-btn-copied-border: #2e7d32;
	
	--theme-table-border: #d6cfc4;        /* 边框加深，从 #e3dfd6 改为更明显的暖灰 */
	--theme-table-header-bg: #ede8e0;     /* 表头明显深于主背景，形成层次 */
	--theme-table-row-even: #f3f0ea;      /* 偶数行略深于主背景，产生斑马纹 */
	--theme-table-row-hover: #e8e2d8;     /* 悬停再深一点，交互反馈清晰 */

	--theme-math-filter: none;
	
	--theme-back-to-top: #7a7569;
	--theme-back-to-top-hover: #2c2c2c;
}

/* Dark mode variables */
html[data-theme="dark"],
html:not([data-theme]) {
	/* --theme-bg: #151515;
	--theme-text: #ddd;
	--theme-heading: #eee;
	--theme-code-bg: #2d2d2d;
	--theme-code-text: #e8e8e8;
	--theme-code-border: #3d3d3d;
	--theme-pre-bg: #2d2d2d;
	--theme-pre-border: #3d3d3d;
	--theme-line-numbers-border: #555;
	--theme-line-numbers-text: #666;
	--theme-copy-btn-bg: #333;
	--theme-copy-btn-text: #ccc;
	--theme-copy-btn-border: #555;
	--theme-copy-btn-hover-bg: #444;
	--theme-copy-btn-hover-text: #eee;
	--theme-copy-btn-copied-bg: #1a4d3a;
	--theme-copy-btn-copied-text: #5fda9d;
	--theme-copy-btn-copied-border: #5fda9d;
	--theme-table-border: #444;
	--theme-table-header-bg: #333;
	--theme-table-row-even: #2a2a2a;
	--theme-table-row-hover: #383838;
	--theme-math-filter: invert(1) hue-rotate(180deg);
	--theme-back-to-top: #bbb;
	--theme-back-to-top-hover: #fff; */
/* === 主背景：保持 One Dark Pro 经典 === */
	--theme-bg: #282c34;
	--theme-text: #abb2bf;
	--theme-heading: #e5e6e8;
	
	--theme-code-bg: #21252b;
	--theme-code-text: #abb2bf;
	--theme-code-border: #3e4452;
	
	--theme-pre-bg: #21252b;
	--theme-pre-border: #3e4452;
	
	--theme-line-numbers-border: #3e4452;
	--theme-line-numbers-text: #636d83;
	
	--theme-copy-btn-bg: rgba(60, 68, 82, 0.6);
	--theme-copy-btn-text: #848b9b;
	--theme-copy-btn-border: #3e4452;
	--theme-copy-btn-hover-bg: #3e4452;
	--theme-copy-btn-hover-text: #e5e6e8;
	--theme-copy-btn-copied-bg: #2c4a3e;
	--theme-copy-btn-copied-text: #98c379;
	--theme-copy-btn-copied-border: #98c379;
	
	/* === 表格：在保持 #282c34 背景下，大幅拉开对比 === */
	--theme-table-border: #4a5368;        /* 亮边框，现在清晰可见 */
	--theme-table-header-bg: #323842;     /* 明显比主背景亮/不同 */
	--theme-table-row-even: #20242b;      /* 偶数行比主背景深，形成反转斑马纹 */
	--theme-table-row-hover: #353c48;     /* 悬停亮色 */
	
	--theme-math-filter: invert(1) hue-rotate(180deg);
	
	--theme-back-to-top: #636d83;
	--theme-back-to-top-hover: #abb2bf;
}

/* System preference: only apply dark variables when no explicit theme is set */
@media (prefers-color-scheme: light) {
	html:not([data-theme]) {
		/* --theme-bg: #fffff8;
		--theme-text: #111;
		--theme-heading: #111;
		--theme-code-bg: #f7f7f7;
		--theme-code-text: inherit;
		--theme-code-border: #e7e7e7;
		--theme-pre-bg: #f7f7f7;
		--theme-pre-border: #e0e0e0;
		--theme-line-numbers-border: #ddd;
		--theme-line-numbers-text: #aaa;
		--theme-copy-btn-bg: #fff;
		--theme-copy-btn-text: #666;
		--theme-copy-btn-border: #ccc;
		--theme-copy-btn-hover-bg: #f0f0f0;
		--theme-copy-btn-hover-text: #333;
		--theme-copy-btn-copied-bg: #e6fffa;
		--theme-copy-btn-copied-text: #008000;
		--theme-copy-btn-copied-border: #008000;
		--theme-table-border: #ccc;
		--theme-table-header-bg: #f5f5f5;
		--theme-table-row-even: #fafafa;
		--theme-table-row-hover: #f0f0f0;
		--theme-math-filter: none;
		--theme-back-to-top: #555;
		--theme-back-to-top-hover: #111; */
		/* === 主背景与文字：提高对比度 === */
		--theme-bg: #fcf9f2;           /* 比桌面版 #faf8f6 更亮一点 */
		--theme-text: #1a1a1a;          /* 从 #2c2c2c 加深到 #1a1a1a */
		--theme-heading: #0d0d0d;       /* 标题接近纯黑，确保小字清晰 */
		
		/* === 代码块：更明显的层次 === */
		--theme-code-bg: #f0ece4;       /* 比桌面版 #f1efe9 略深，与背景区分更大 */
		--theme-code-text: #1a1a1a;
		--theme-code-border: #d5cec0;   /* 边框加深，小屏幕网格更清晰 */
		
		--theme-pre-bg: #f0ece4;
		--theme-pre-border: #d5cec0;
		
		/* === 行号：移动端可读性优先 === */
		--theme-line-numbers-border: #d5cec0;
		--theme-line-numbers-text: #8a8478;  /* 从 #b0aba0 加深 */
		
		/* === 复制按钮：触控优化 === */
		--theme-copy-btn-bg: #ffffff;
		--theme-copy-btn-text: #5a554a;      /* 从 #6b665a 加深 */
		--theme-copy-btn-border: #c9c0b2;    /* 边框更明显 */
		--theme-copy-btn-hover-bg: #f0ece4;   /* 移动端用 active 替代 hover */
		--theme-copy-btn-hover-text: #0d0d0d;
		--theme-copy-btn-copied-bg: #e8f5e9;
		--theme-copy-btn-copied-text: #1b5e20; /* 从 #2e7d32 加深 */
		--theme-copy-btn-copied-border: #1b5e20;
		
		/* === 表格：移动端必须清晰 === */
		--theme-table-border: #c9c0b2;       /* 从 #e3dfd6 大幅加深 */
		--theme-table-header-bg: #e8e2d6;    /* 从 #ede8e0 再深一点 */
		--theme-table-row-even: #f5f1ea;     /* 从 #f3f0ea 更明显 */
		--theme-table-row-hover: #e8e2d6;    /* 移动端用 active 替代 hover */
		
		--theme-math-filter: none;
		
		/* === 回到顶部：更大的触控目标 === */
		--theme-back-to-top: #6b655a;        /* 从 #7a7569 加深 */
		--theme-back-to-top-hover: #1a1a1a;
	}
}

/*******************************************************************************
THEME STYLES (using CSS variables)
*******************************************************************************/

html {
	background-color: var(--theme-bg);
	color: var(--theme-text);
}

body {
	background-color: var(--theme-bg);
	color: var(--theme-text);
}

h1,
h2,
h3,
h4,
h5 {
	color: var(--theme-heading);
}

a,
a:link,
a:visited {
	color: inherit;
	background-color: transparent;
	text-shadow: none;
	background-image: none;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

code {
	background-color: var(--theme-code-bg);
	color: var(--theme-code-text);
	border-color: var(--theme-code-border);
}

pre {
	background-color: var(--theme-pre-bg);
	border-color: var(--theme-pre-border);
}

pre > code {
	color: var(--theme-code-text);
}

.line-numbers-rows {
	border-right-color: var(--theme-line-numbers-border);
	color: var(--theme-line-numbers-text);
}

.copy-button {
	background-color: var(--theme-copy-btn-bg);
	color: var(--theme-copy-btn-text);
	border-color: var(--theme-copy-btn-border);
}

.copy-button:hover {
	background-color: var(--theme-copy-btn-hover-bg);
	color: var(--theme-copy-btn-hover-text);
}

.copy-button.copied {
	background-color: var(--theme-copy-btn-copied-bg);
	color: var(--theme-copy-btn-copied-text);
	border-color: var(--theme-copy-btn-copied-border);
}

div[style*="border-inline-start"] .footnote-ref,
div[style*="border-inline-start"] .marginnote,
div[style*="border-inline-start"] .footnote-ref a {
	color: var(--theme-heading);
}

table th,
table td {
	border-color: var(--theme-table-border);
}

table th,
table thead td {
	background-color: var(--theme-table-header-bg);
}

table tbody tr:nth-child(even) {
	background-color: var(--theme-table-row-even);
}

table tbody tr:hover {
	background-color: var(--theme-table-row-hover);
}

.math-inline > svg,
.math-block > svg {
	filter: var(--theme-math-filter);
}

/*******************************************************************************
BACK TO TOP BUTTON
*******************************************************************************/

.page-jump-btn {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	color: var(--theme-back-to-top);
	background: transparent;
	border: none;
	border-radius: 0.5rem;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.35rem);
	transition:
		color 0.15s ease,
		opacity 0.15s ease,
		transform 0.15s ease,
		visibility 0.15s ease;
}

.page-jump-btn.is-visible {
	display: flex;
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.page-jump-btn:hover {
	color: var(--theme-back-to-top-hover);
}

.page-jump-btn:focus-visible {
	outline: 2px solid var(--highlight-strong, rgba(128, 128, 128, 0.4));
	outline-offset: 2px;
}

.page-jump-btn svg {
	width: 2.1rem;
	height: 2.1rem;
}

@media (max-width: 760px) {
	.page-jump-btn {
		right: 1rem;
		bottom: 1rem;
		width: 2.5rem;
		height: 2.5rem;
	}
}

/*******************************************************************************
THEME TOGGLE BUTTON (DeepWiki Style)
*******************************************************************************/

.theme-toggle-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0.375rem;
	cursor: pointer;
	margin-left: auto;
	margin-right: 3em;
	margin-top: 1.6em;
	transition: background-color 0.15s ease;
	color: #374151;
	/* 浅色模式下月亮图标颜色 */
}

.theme-toggle-btn:hover {
	background: var(--highlight-weak, rgba(128, 128, 128, 0.2));
}

.theme-toggle-btn:focus-visible {
	outline: 2px solid var(--highlight-strong, rgba(128, 128, 128, 0.4));
	outline-offset: 2px;
}

.theme-toggle-btn svg {
	width: 1.8rem;
	height: 1.8rem;
}

/* 深色模式下太阳图标颜色 */
.theme-toggle-btn.is-dark {
	color: #d1d5db;
}