@import "tailwindcss";

/* ==========================================================================
   设计令牌（Design Tokens）
   来源：根目录 DESIGN.md（Mintlify 设计系统分析）
   命名规则：DESIGN.md 的 {colors.xxx} → --color-xxx（Tailwind v4 @theme）
             {rounded.xxx}     → --radius-xxx
             {spacing.xxx}     → --spacing-xxx
   ========================================================================== */

@theme {
	/* ---------- 颜色：品牌与强调 ---------- */
	--color-primary: #0a0a0a;
	--color-on-primary: #ffffff;
	--color-brand-green: #00d4a4;
	--color-brand-green-deep: #00b48a;
	--color-brand-green-soft: #7cebcb;
	--color-brand-tag: #3772cf;
	--color-brand-warn: #c37d0d;
	--color-brand-annotate: #1ba673;
	--color-brand-error: #d45656;
	--color-brand-cursor: #888888;

	/* ---------- 颜色：Hero 氛围渐变 ---------- */
	--color-hero-sky-from: #87a8c8;
	--color-hero-sky-to: #f5e9d8;
	--color-hero-dark-from: #1a3d4a;
	--color-hero-dark-to: #2d5a4f;

	/* ---------- 颜色：强调（证言卡片） ---------- */
	--color-testimonial-orange: #f55a3c;
	--color-testimonial-orange-deep: #cc3a1f;

	/* ---------- 颜色：表面 ---------- */
	--color-canvas: #ffffff;
	--color-canvas-dark: #0a0a0a;
	--color-surface: #f7f7f7;
	--color-surface-soft: #fafafa;
	--color-surface-code: #1c1c1e;
	--color-hairline: #e5e5e5;
	--color-hairline-soft: #ededed;
	--color-hairline-dark: #1f1f1f;

	/* ---------- 颜色：文字 ---------- */
	--color-ink: #0a0a0a;
	--color-charcoal: #1c1c1e;
	--color-slate: #3a3a3c;
	--color-steel: #5a5a5c;
	--color-stone: #888888;
	--color-muted: #a8a8aa;
	--color-on-dark: #ffffff;
	--color-on-dark-muted: #b3b3b3;

	/* ---------- 圆角 ---------- */
	--radius-xs: 4px;
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-xxl: 24px;

	/* ---------- 间距（基础单位 4px） ---------- */
	--spacing-xxs: 4px;
	--spacing-xs: 8px;
	--spacing-sm: 12px;
	--spacing-md: 16px;
	--spacing-lg: 20px;
	--spacing-xl: 24px;
	--spacing-xxl: 32px;
	--spacing-xxxl: 40px;
	--spacing-section-sm: 48px;
	--spacing-section: 64px;
	--spacing-section-lg: 96px;
	--spacing-hero: 120px;

	/* ---------- 字体族 ---------- */
	/* 中文 Noto Sans SC、英文 Inter、代码 IBM Plex Mono
	   顺序上 Inter 在前，中文字符由 Noto Sans SC 补齐（二者 unicode-range 互补）。 */
	--font-sans:
		var(--font-inter), var(--font-noto-sans-sc), -apple-system,
		BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
		"Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
	--font-mono:
		var(--font-ibm-plex-mono), "SFMono-Regular", "SF Mono", Menlo, Consolas,
		"Liberation Mono", "Courier New", monospace;

	/* ---------- 字号阶梯（含行高 / 字距） ---------- */
	--text-hero-display: 72px;
	--text-hero-display--line-height: 1.05;
	--text-hero-display--letter-spacing: -2px;
	--text-display-lg: 56px;
	--text-display-lg--line-height: 1.1;
	--text-display-lg--letter-spacing: -1.5px;
	--text-heading-1: 48px;
	--text-heading-1--line-height: 1.1;
	--text-heading-1--letter-spacing: -1px;
	--text-heading-2: 36px;
	--text-heading-2--line-height: 1.2;
	--text-heading-2--letter-spacing: -0.5px;
	--text-heading-3: 28px;
	--text-heading-3--line-height: 1.25;
	--text-heading-4: 22px;
	--text-heading-4--line-height: 1.3;
	--text-heading-5: 18px;
	--text-heading-5--line-height: 1.4;
	--text-subtitle: 18px;
	--text-subtitle--line-height: 1.5;
	--text-body-md: 16px;
	--text-body-md--line-height: 1.5;
	--text-body-sm: 14px;
	--text-body-sm--line-height: 1.5;
	--text-caption: 13px;
	--text-caption--line-height: 1.4;
	--text-micro: 12px;
	--text-micro--line-height: 1.4;
	--text-micro-uppercase: 11px;
	--text-micro-uppercase--line-height: 1.4;
	--text-micro-uppercase--letter-spacing: 0.5px;
	--text-button-md: 14px;
	--text-button-md--line-height: 1.3;
	--text-code-md: 14px;
	--text-code-md--line-height: 1.5;
	--text-code-sm: 13px;
	--text-code-sm--line-height: 1.4;
	--text-code-inline: 13px;
	--text-code-inline--line-height: 1.3;

	/* ---------- 阴影（DESIGN.md Elevation） ---------- */
	--shadow-level-1: rgba(0, 0, 0, 0.04) 0px 1px 2px 0px;
	--shadow-card: rgba(0, 0, 0, 0.08) 0px 4px 12px 0px;
	--shadow-mockup: rgba(0, 0, 0, 0.12) 0px 24px 48px -8px;
	--shadow-brand: rgba(0, 212, 164, 0.08) 0px 8px 24px;

	/* ---------- 动效 ---------- */
	--ease-brand: cubic-bezier(0.22, 1, 0.36, 1);
	--animate-fade-up: fade-up 0.5s var(--ease-brand) both;
	--animate-shimmer: shimmer 1.8s linear infinite;
}

@keyframes fade-up {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes shimmer {
	from {
		background-position: 200% 0;
	}
	to {
		background-position: -200% 0;
	}
}

/* ==========================================================================
   基础层
   ========================================================================== */

@layer base {
	:root {
		/* 站点默认承载于画布白，DESIGN.md 未发布暗色令牌，故不做自动暗色反转。 */
		--background: var(--color-canvas);
		--foreground: var(--color-ink);
		color-scheme: light;
	}

	* {
		border-color: var(--color-hairline);
	}

	html {
		-webkit-text-size-adjust: 100%;
		scroll-behavior: smooth;
		/* 固定顶栏高度 + 一点余量，避免锚点跳转被遮挡 */
		scroll-padding-top: 88px;
		/* 防止长 URL / 代码片段把布局撑出横向滚动条 */
		overflow-x: hidden;
	}

	body {
		background-color: var(--background);
		color: var(--foreground);
		font-family: var(--font-sans);
		font-size: var(--text-body-md);
		line-height: 1.5;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
	}

	code,
	kbd,
	samp,
	pre {
		font-family: var(--font-mono);
		font-feature-settings: "liga" 0;
	}

	/* 键盘可达性：统一焦点环 */
	:focus-visible {
		outline: 2px solid var(--color-brand-green);
		outline-offset: 2px;
		border-radius: var(--radius-xs);
	}

	::selection {
		background-color: var(--color-brand-green-soft);
		color: var(--color-ink);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   工具类
   ========================================================================== */

@utility text-balance-pretty {
	text-wrap: pretty;
}

/* 文章正文（由 MDX 渲染）——按 DESIGN.md 的文档式排版 */
@layer components {
	.prose-blog {
		color: var(--color-charcoal);
		font-size: var(--text-body-md);
		line-height: 1.75;
		/* 长单词 / URL 不撑破容器 */
		overflow-wrap: break-word;
		word-break: break-word;
	}

	.prose-blog > * + * {
		margin-top: 1.25em;
	}

	.prose-blog h2 {
		margin-top: 2.5em;
		margin-bottom: 0.75em;
		font-size: var(--text-heading-3);
		font-weight: 600;
		line-height: 1.25;
		letter-spacing: -0.2px;
		color: var(--color-ink);
		scroll-margin-top: 96px;
	}

	.prose-blog h3 {
		margin-top: 2em;
		margin-bottom: 0.6em;
		font-size: var(--text-heading-4);
		font-weight: 600;
		line-height: 1.3;
		color: var(--color-ink);
		scroll-margin-top: 96px;
	}

	.prose-blog h4 {
		margin-top: 1.75em;
		margin-bottom: 0.5em;
		font-size: var(--text-heading-5);
		font-weight: 600;
		line-height: 1.4;
		color: var(--color-ink);
		scroll-margin-top: 96px;
	}

	.prose-blog p,
	.prose-blog li {
		color: var(--color-slate);
	}

	.prose-blog a {
		color: var(--color-ink);
		font-weight: 500;
		text-decoration: underline;
		text-decoration-color: var(--color-brand-green);
		text-decoration-thickness: 2px;
		text-underline-offset: 3px;
	}

	.prose-blog a:hover {
		color: var(--color-brand-green-deep);
	}

	.prose-blog strong {
		color: var(--color-ink);
		font-weight: 600;
	}

	.prose-blog ul,
	.prose-blog ol {
		padding-left: 1.5em;
	}

	.prose-blog ul {
		list-style: disc;
	}

	.prose-blog ol {
		list-style: decimal;
	}

	.prose-blog li::marker {
		color: var(--color-stone);
	}

	.prose-blog li + li {
		margin-top: 0.5em;
	}

	.prose-blog blockquote {
		border-left: 3px solid var(--color-brand-green);
		padding: 0.25em 0 0.25em 1.25em;
		color: var(--color-steel);
		font-style: normal;
	}

	.prose-blog blockquote p {
		color: var(--color-steel);
	}

	.prose-blog hr {
		margin: 2.5em 0;
		border: 0;
		border-top: 1px solid var(--color-hairline);
	}

	.prose-blog img {
		border-radius: var(--radius-lg);
		border: 1px solid var(--color-hairline);
		width: 100%;
		height: auto;
	}

	/* 行内代码（DESIGN.md: code-inline） */
	.prose-blog :not(pre) > code {
		background-color: var(--color-surface);
		color: var(--color-charcoal);
		font-size: 0.875em;
		font-weight: 500;
		padding: 2px 6px;
		border-radius: var(--radius-xs);
		border: 1px solid var(--color-hairline);
		white-space: nowrap;
	}

	/* 代码块容器（DESIGN.md: code-block） */
	.prose-blog figure[data-rehype-pretty-code-figure] {
		margin: 1.75em 0;
		border-radius: var(--radius-md);
		overflow: hidden;
		border: 1px solid var(--color-hairline-dark);
		background-color: var(--color-surface-code);
	}

	.prose-blog figure[data-rehype-pretty-code-figure] figcaption {
		background-color: var(--color-surface-code);
		color: var(--color-on-dark-muted);
		font-family: var(--font-mono);
		font-size: var(--text-caption);
		padding: 8px 16px;
		border-bottom: 1px solid var(--color-hairline-dark);
	}

	.prose-blog figure[data-rehype-pretty-code-figure] pre {
		margin: 0;
		padding: 16px 0;
		overflow-x: auto;
		background-color: var(--color-surface-code);
		font-size: var(--text-code-md);
		line-height: 1.6;
	}

	.prose-blog figure[data-rehype-pretty-code-figure] code {
		display: grid;
		font-size: inherit;
		background: none;
		border: 0;
		padding: 0;
	}

	.prose-blog figure[data-rehype-pretty-code-figure] [data-line] {
		padding: 0 16px;
		border-left: 2px solid transparent;
	}

	.prose-blog figure[data-rehype-pretty-code-figure] [data-highlighted-line] {
		background-color: rgba(0, 212, 164, 0.08);
		border-left-color: var(--color-brand-green);
	}

	.prose-blog table {
		width: 100%;
		border-collapse: collapse;
		font-size: var(--text-body-sm);
		border: 1px solid var(--color-hairline);
		border-radius: var(--radius-md);
		overflow: hidden;
		display: block;
		overflow-x: auto;
	}

	.prose-blog th {
		background-color: var(--color-surface);
		color: var(--color-ink);
		font-weight: 600;
		text-align: left;
	}

	.prose-blog th,
	.prose-blog td {
		padding: 12px 20px;
		border-bottom: 1px solid var(--color-hairline-soft);
	}

	.prose-blog tr:last-child td {
		border-bottom: 0;
	}

	/* 标题锚点（rehype-autolink-headings） */
	.prose-blog .heading-anchor {
		color: var(--color-muted);
		text-decoration: none;
		margin-left: 0.4em;
		font-weight: 400;
		opacity: 0;
		transition: opacity 150ms ease;
	}

	.prose-blog h2:hover .heading-anchor,
	.prose-blog h3:hover .heading-anchor,
	.prose-blog h4:hover .heading-anchor,
	.prose-blog .heading-anchor:focus-visible {
		opacity: 1;
	}
}