@import 'tailwindcss';

/* 启用 class-based dark mode for Tailwind v4 */
@variant dark (.dark &);

:root {
	--background: #ffffff;
	--foreground: #171717;
	/* 主题色渐变 */
	--theme-color-1: rgb(88, 192, 252);
	--theme-color-2: rgb(189, 69, 251);
}

/* class-based dark mode - 应用到 html.dark */
html.dark,
:root.dark {
	--background: #0a0a0a;
	--foreground: #ededed;
}

/* 同时支持系统偏好 */
/* @media (prefers-color-scheme: dark) {
	html:not(.light),
	:root:not(.light) {
		--background: #0a0a0a;
		--foreground: #ededed;
	}
} */

/* 添加 Tailwind 自定义颜色 */
@theme {
	--color-background: var(--background);
	--color-foreground: var(--foreground);
}

body {
	background: var(--background);
	color: var(--foreground);
	font-family: Arial, Helvetica, sans-serif;
}

/* 确保文档页面标题在暗色模式下可见 - 只针对 prose 内的标题 */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
	color: rgba(23, 23, 23, 0.85);
}

.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4,
.dark .prose h5,
.dark .prose h6 {
	color: rgba(255, 255, 255, 0.9);
}

table,
th,
td {
	color: #171717;
}

.dark table,
.dark th,
.dark td {
	color: #ededed;
}

/* 文档页深色模式优化 */
.dark .prose {
	color: rgba(255, 255, 255, 0.7);
}

/* @media (prefers-color-scheme: dark) {
	:root:not(.light) .prose {
		color: rgba(255, 255, 255, 0.7);
	}
} */

.dark .dark\:prose-invert {
	--tw-prose-body: rgba(255, 255, 255, 0.7);
	--tw-prose-headings: rgba(255, 255, 255, 0.95);
	--tw-prose-lead: rgba(255, 255, 255, 0.7);
	--tw-prose-links: rgba(147, 197, 253, 0.9);
	--tw-prose-bold: rgba(255, 255, 255, 0.9);
	--tw-prose-counters: rgba(255, 255, 255, 0.6);
	--tw-prose-bullets: rgba(255, 255, 255, 0.5);
	--tw-prose-hr: rgba(255, 255, 255, 0.2);
	--tw-prose-quotes: rgba(255, 255, 255, 0.8);
	--tw-prose-quote-borders: rgba(255, 255, 255, 0.3);
	--tw-prose-captions: rgba(255, 255, 255, 0.6);
	--tw-prose-code: rgba(255, 255, 255, 0.9);
	--tw-prose-pre-code: rgba(255, 255, 255, 0.95);
	--tw-prose-pre-bg: rgba(0, 0, 0, 0.5);
	--tw-prose-th-borders: rgba(255, 255, 255, 0.3);
	--tw-prose-td-borders: rgba(255, 255, 255, 0.2);
}

/* @media (prefers-color-scheme: dark) {
	:root:not(.light) .dark\:prose-invert {
		--tw-prose-body: rgba(255, 255, 255, 0.7);
		--tw-prose-headings: rgba(255, 255, 255, 0.95);
		--tw-prose-lead: rgba(255, 255, 255, 0.7);
		--tw-prose-links: rgba(147, 197, 253, 0.9);
		--tw-prose-bold: rgba(255, 255, 255, 0.9);
		--tw-prose-counters: rgba(255, 255, 255, 0.6);
		--tw-prose-bullets: rgba(255, 255, 255, 0.5);
		--tw-prose-hr: rgba(255, 255, 255, 0.2);
		--tw-prose-quotes: rgba(255, 255, 255, 0.8);
		--tw-prose-quote-borders: rgba(255, 255, 255, 0.3);
		--tw-prose-captions: rgba(255, 255, 255, 0.6);
		--tw-prose-code: rgba(255, 255, 255, 0.9);
		--tw-prose-pre-code: rgba(255, 255, 255, 0.95);
		--tw-prose-pre-bg: rgba(0, 0, 0, 0.5);
		--tw-prose-th-borders: rgba(255, 255, 255, 0.3);
		--tw-prose-td-borders: rgba(255, 255, 255, 0.2);
	}
} */

/* 标题更清晰 */
.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4 {
	color: rgba(255, 255, 255, 0.95);
}

/* @media (prefers-color-scheme: dark) {
	:root:not(.light) .prose h1,
	:root:not(.light) .prose h2,
	:root:not(.light) .prose h3,
	:root:not(.light) .prose h4 {
		color: rgba(255, 255, 255, 0.95);
	}
} */

/* 链接更清晰 */
.dark .prose a {
	color: rgba(147, 197, 253, 0.9);
}

/* @media (prefers-color-scheme: dark) {
	:root:not(.light) .prose a {
		color: rgba(147, 197, 253, 0.9);
	}
} */

/* 代码块背景更黑 */
.dark .prose pre {
	background-color: rgba(0, 0, 0, 0.6);
}

/* @media (prefers-color-scheme: dark) {
	:root:not(.light) .prose pre {
		background-color: rgba(0, 0, 0, 0.6);
	}
} */

/* 表格样式 */
.dark .prose table {
	color: rgba(255, 255, 255, 0.7);
}

/* @media (prefers-color-scheme: dark) {
	:root:not(.light) .prose table {
		color: rgba(255, 255, 255, 0.7);
	}
} */

.dark .prose thead {
	color: rgba(255, 255, 255, 0.9);
	border-bottom-color: rgba(255, 255, 255, 0.3);
}

/* @media (prefers-color-scheme: dark) {
	:root:not(.light) .prose thead {
		color: rgba(255, 255, 255, 0.9);
		border-bottom-color: rgba(255, 255, 255, 0.3);
	}
} */

.dark .prose tbody tr {
	border-bottom-color: rgba(255, 255, 255, 0.2);
}

/* @media (prefers-color-scheme: dark) {
	:root:not(.light) .prose tbody tr {
		border-bottom-color: rgba(255, 255, 255, 0.2);
	}
} */