/* ============================================
   设计变量：颜色 / 字体 / 字号 / 间距 / 圆角 / 缓动
   —— 整站观感改这一个文件就够，组件里不写死数值

   配色是「一个 --hue 推出整套」：改 --hue 一个数，主色、页面底、
   按钮底、hover 块、选区色整体跟着走。设置面板那个色相滑块就是改它。
   ============================================ */

:root {
	--hue: 165; /* 0–360，默认青绿。JS 会从 localStorage 覆盖它 */
	color-scheme: light;

	/* ---------------- 兜底色板 ----------------
	   不支持 oklch 的浏览器（Chrome < 111 / Safari < 15.4）用这套手调的 hsl。
	   hsl 的明度不是感知均匀的，转到黄色相时会偏暗，但总比颜色整片失效强。
	   下面 @supports 里那套才是给现代浏览器的主力值。 */
	--bg: hsl(var(--hue), 26%, 96%);
	--card: #ffffff;
	--card-hi: transparent; /* 旧的"玻璃顶边高光"已废弃，置透明即全局失效 */
	--muted: hsl(var(--hue), 25%, 92%);
	--line: rgba(0, 0, 0, 0.07);
	--line-strong: rgba(0, 0, 0, 0.12);

	--text: hsl(var(--hue), 12%, 15%);
	--text-2: rgba(0, 0, 0, 0.68);
	--text-3: rgba(0, 0, 0, 0.46);

	--accent: hsl(var(--hue), 62%, 40%);
	--accent-2: hsl(calc(var(--hue) + 40), 62%, 48%);
	--accent-soft: hsl(var(--hue), 40%, 95%);
	--accent-line: hsl(var(--hue), 45%, 86%);
	--accent-ink: hsl(var(--hue), 58%, 34%); /* 主色当文字用的深一档，保证对比度 */
	--selection: hsl(var(--hue), 45%, 88%);
}

@supports (color: oklch(0 0 0)) {
	:root {
		/* 页面底不是灰，是带主题色相的浅白；卡片是纯白。
		   两者只差一点明度，卡片零边框零阴影也能浮起来——这是整站质感的主来源。 */
		--bg: oklch(0.955 0.012 var(--hue));
		--card: #ffffff;
		--muted: oklch(0.93 0.018 var(--hue));
		--line: rgba(0, 0, 0, 0.07);
		--line-strong: rgba(0, 0, 0, 0.12);

		--text: oklch(0.28 0.02 var(--hue));
		--text-2: rgba(0, 0, 0, 0.68);
		--text-3: rgba(0, 0, 0, 0.46);

		/* oklch 的好处在这：色相转到哪，明度都是同一档感知亮度。
		   换成 hsl 的话转到黄色相会变成一坨土黄。 */
		--accent: oklch(0.70 0.14 var(--hue));
		--accent-2: oklch(0.62 0.16 calc(var(--hue) + 40));
		--accent-soft: oklch(0.955 0.028 var(--hue));
		--accent-line: oklch(0.9 0.055 var(--hue));
		--accent-ink: oklch(0.52 0.13 var(--hue));
		--selection: oklch(0.9 0.05 var(--hue));
	}
}

/* 深色。JS 会把「跟随系统」解析成明确的 light/dark 写进 data-theme，
   所以这里只需要一份，不用再抄一遍进 prefers-color-scheme 媒体查询。 */
html[data-theme="dark"] {
	color-scheme: dark;

	--bg: hsl(var(--hue), 14%, 8%);
	--card: hsl(var(--hue), 13%, 13%);
	--muted: hsl(var(--hue), 16%, 16%);
	--line: rgba(255, 255, 255, 0.09);
	--line-strong: rgba(255, 255, 255, 0.14);
	--text: hsl(var(--hue), 12%, 95%);
	--text-2: rgba(255, 255, 255, 0.66);
	--text-3: rgba(255, 255, 255, 0.45);
	--accent: hsl(var(--hue), 60%, 62%);
	--accent-2: hsl(calc(var(--hue) + 40), 60%, 68%);
	--accent-soft: hsl(var(--hue), 20%, 18%);
	--accent-line: hsl(var(--hue), 25%, 26%);
	--accent-ink: hsl(var(--hue), 55%, 70%);
	--selection: hsl(var(--hue), 35%, 30%);
}

@supports (color: oklch(0 0 0)) {
	html[data-theme="dark"] {
		/* 暗色里卡片比页面亮一档（0.228 vs 0.165），这是"抬升"的标准手法。
		   主色反而比亮色更亮（0.75 vs 0.70），保证暗底上的对比度。 */
		--bg: oklch(0.165 0.014 var(--hue));
		--card: oklch(0.228 0.016 var(--hue));
		--muted: oklch(0.26 0.018 var(--hue));
		--line: rgba(255, 255, 255, 0.09);
		--line-strong: rgba(255, 255, 255, 0.14);
		--text: oklch(0.95 0.012 var(--hue));
		--text-2: rgba(255, 255, 255, 0.66);
		--text-3: rgba(255, 255, 255, 0.45);
		--accent: oklch(0.75 0.14 var(--hue));
		--accent-2: oklch(0.7 0.15 calc(var(--hue) + 40));
		--accent-soft: oklch(0.3 0.035 var(--hue));
		--accent-line: oklch(0.38 0.06 var(--hue));
		--accent-ink: oklch(0.8 0.13 var(--hue));
		--selection: oklch(0.4 0.08 var(--hue));
	}
}

/* 两套主题共用的其余变量 */
:root {
	/* 背景：Firefly 那种干净的浅底，没有色晕也没有颗粒 */
	--bg-tint-1: transparent;
	--bg-tint-2: transparent;
	--noise: 0; /* 想开颗粒就调到 0.028 */

	--blur: 12px; /* 导航毛玻璃 */

	/* 阴影只留给"浮起来的东西"（导航、菜单、弹窗、播放器）。
	   卡片不用阴影——它靠明度差从底色上浮起来。 */
	--shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	--shadow-lift: 0 10px 34px rgba(0, 0, 0, 0.14);
	--nav-bg: rgba(255, 255, 255, 0.45); /* 导航玻璃底色 45% */
	--glass-hi: rgba(255, 255, 255, 0.18); /* 玻璃顶边内高光 */
	--glass-line: rgba(0, 0, 0, 0.06); /* 玻璃底边发丝线 */

	/* 字体：Inter 只带拉丁字母和数字，中文自动落到系统黑体（Firefly 也是这么干的） */
	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* 字号（6 档） */
	--fs-display: 40px;
	--fs-h1: 24px;
	--fs-h2: 17px;
	--fs-body: 15px;
	--fs-small: 13.5px;
	--fs-mini: 12px;

	/* 间距（8 的倍数） */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;

	/* 圆角 */
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 16px; /* 卡片统一用这档 */
	--r-pill: 9999px;

	/* 缓动：全站只用这三条 */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* 主力，起步快收尾慢 */
	--ease-spring: cubic-bezier(0.34, 1.46, 0.64, 1); /* 回弹，用于点击/悬停 */
	--ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* 对称，用于位移 */

	/* 时长 */
	--dur-press: 0.12s;
	--dur: 0.2s;
	--dur-slow: 0.36s;
	--dur-page: 0.3s; /* 页面切换。全站统一，出场入场同长 */

	/* 布局 */
	--shell: 1280px;
	--sidebar-w: 280px;
	--nav-h: 60px;
	--banner-h: 62vh; /* 横幅高 */
	--banner-overlap: 3.5rem; /* 主内容上叠，盖住横幅底边 */
}

html[data-theme="dark"] {
	--shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
	--shadow-lift: 0 10px 34px rgba(0, 0, 0, 0.55);
	--nav-bg: oklch(0.228 0.016 var(--hue) / 0.45);
	--glass-hi: rgba(255, 255, 255, 0.06);
	--glass-line: rgba(255, 255, 255, 0.1);
}

/* 手机端整体降一档 */
@media (max-width: 640px) {
	:root {
		--fs-display: 32px;
		--fs-h1: 21px;
		--fs-h2: 16px;
		--sp-5: 20px;
		--sp-6: 26px;
		--sp-7: 38px;
		--nav-h: 52px;
		--banner-h: 52vh;
		--banner-overlap: 2rem;
	}
}

/* 系统开了「减弱动态效果」就别硬动 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-press: 0.01s;
		--dur: 0.01s;
		--dur-slow: 0.01s;
		--dur-page: 0.01s;
	}
}