/**
 * 设计令牌。
 *
 * Gallery Noir 的全部设计决策集中于此。
 * 修改此文件即可整体调整视觉，无需触碰组件样式。
 */

:root {
	/* ── 色彩 ───────────────────────────────────────────
	 *
	 * 近黑而非纯黑。纯黑（#000）会让深色照片的边缘"融掉"，
	 * 失去层次；略带蓝调的深灰能托住暗部细节，
	 * 同时避免长时间浏览的视觉疲劳。
	 */
	--mf-bg: #0a0a0b;
	--mf-bg-raised: #121214;
	--mf-bg-sunken: #060607;
	--mf-bg-overlay: rgba(10, 10, 11, 0.88);

	/*
	 * 文字层级。
	 *
	 * 纯白在暗底上会刺眼且显廉价，主文字降至 92%。
	 *
	 * 三档的透明度不是凭视觉定的，而是按对比度反推：
	 *   0.92 → 16.6:1  正文，远超要求
	 *   0.62 → 7.7:1   次要文字
	 *   0.50 → 5.0:1   最弱一档，仍满足小字号的 4.5:1
	 *
	 * 最弱一档原为 0.34（3.01:1），在 24 处 12px 的小字上
	 * 使用 —— 小字号要求 4.5:1，3.01 只够大字号用。审计
	 * 报告点名的页脚标题、分类链接、版权行都是这一档。
	 *
	 * 视觉上 0.50 仍明显弱于正文，层级关系不受影响。
	 */
	--mf-text: rgba(255, 255, 255, 0.92);
	--mf-text-muted: rgba(255, 255, 255, 0.62);
	--mf-text-faint: rgba(255, 255, 255, 0.5);

	/* 强调色：暖金。只用于交互态与细分隔线，绝不大面积铺陈。 */
	--mf-accent: #c8a96a;
	--mf-accent-dim: rgba(200, 169, 106, 0.32);
	--mf-accent-glow: rgba(200, 169, 106, 0.12);

	/* 分隔线。暗色界面中的线必须极轻，否则会切割画面。 */
	--mf-line: rgba(255, 255, 255, 0.09);
	--mf-line-strong: rgba(255, 255, 255, 0.16);

	/* ── 字体 ───────────────────────────────────────────
	 *
	 * 中文站的字体是 LCP 的头号杀手：一个思源黑体动辄数 MB。
	 * 策略是标题用衬线体建立调性，正文用系统栈实现零下载。
	 *
	 * 英文标题选 Cormorant Garamond —— 高对比度的现代衬线，
	 * 细笔画在暗底上有金属般的锐利感，与摄影作品的质感呼应，
	 * 且完全避开 Inter / Roboto 这类被用滥的无衬线体。
	 */
	--mf-font-display: "Cormorant Garamond", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
	--mf-font-body: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
	--mf-font-mono: "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, monospace;

	/* 字号。使用 clamp 实现流体排版，避免断点处的跳变。 */
	--mf-text-xs: 0.75rem;
	--mf-text-sm: 0.8125rem;
	--mf-text-base: 0.9375rem;
	--mf-text-lg: 1.0625rem;
	--mf-text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--mf-text-2xl: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
	--mf-text-3xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
	--mf-text-hero: clamp(2.75rem, 1.4rem + 6vw, 7rem);

	/* 字重。衬线显示体在细字重下最见功力。 */
	--mf-weight-light: 300;
	--mf-weight-normal: 400;
	--mf-weight-medium: 500;

	/* 字距。大字号需收紧，小字号需放开。 */
	--mf-tracking-tight: -0.02em;
	--mf-tracking-normal: 0;
	--mf-tracking-wide: 0.08em;
	--mf-tracking-widest: 0.22em;

	/* 行高 */
	--mf-leading-none: 1;
	--mf-leading-tight: 1.18;
	--mf-leading-snug: 1.4;
	--mf-leading-normal: 1.7;
	--mf-leading-loose: 1.9;

	/* ── 间距 ───────────────────────────────────────────
	 *
	 * 画廊的高级感来自呼吸感，不来自装饰。
	 * 间距梯度刻意稀疏，鼓励使用大留白。
	 */
	--mf-space-1: 0.25rem;
	--mf-space-2: 0.5rem;
	--mf-space-3: 0.75rem;
	--mf-space-4: 1rem;
	--mf-space-6: 1.5rem;
	--mf-space-8: 2rem;
	--mf-space-12: 3rem;
	--mf-space-16: 4rem;
	--mf-space-24: 6rem;
	--mf-space-32: 8rem;

	/* 区块间的垂直节奏，随视口缩放。 */
	--mf-section-gap: clamp(4rem, 3rem + 5vw, 9rem);

	/* ── 布局 ───────────────────────────────────────────*/
	--mf-container: 1440px;
	--mf-container-narrow: 760px;
	--mf-gutter: clamp(1.25rem, 0.8rem + 2.2vw, 3.5rem);

	/* 画廊网格间隙。间隙过大会割裂作品的整体感。 */
	--mf-grid-gap: clamp(0.5rem, 0.3rem + 0.9vw, 1.25rem);

	/* ── 动效 ───────────────────────────────────────────
	 *
	 * 慢、少、有物理感。
	 * 这条缓动曲线起步快、收尾极缓，模拟真实物体的减速，
	 * 比默认的 ease 更有质量感。
	 */
	--mf-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--mf-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
	--mf-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	--mf-duration-fast: 180ms;
	--mf-duration: 380ms;
	--mf-duration-slow: 680ms;
	--mf-duration-slower: 1200ms;

	/* ── 层级 ───────────────────────────────────────────*/
	--mf-z-base: 1;
	--mf-z-sticky: 100;
	--mf-z-header: 200;
	--mf-z-overlay: 300;
	--mf-z-modal: 400;
	--mf-z-toast: 500;

	/* ── 其他 ───────────────────────────────────────────*/
	--mf-radius: 2px;
	--mf-radius-lg: 4px;

	/* 暗色界面中阴影几乎不可见，改用微光表达层次。 */
	--mf-glow: 0 0 40px rgba(255, 255, 255, 0.04);
	--mf-glow-accent: 0 0 32px var(--mf-accent-glow);

	/*
	 * 首屏遮罩。
	 *
	 * 强度必须足以让白字压在任何照片上都可读 —— 包括
	 * 浅色、高调、暖色调的照片。渐变过于柔和时，
	 * 中间调的照片会把文字完全吃掉。
	 *
	 * 底部近乎不透明，向上快速衰减：文字集中在底部区域，
	 * 上方留给照片本身。
	 */
	--mf-scrim: linear-gradient(
		to top,
		rgba(6, 6, 7, 0.96) 0%,
		rgba(6, 6, 7, 0.88) 22%,
		rgba(6, 6, 7, 0.62) 45%,
		rgba(6, 6, 7, 0.28) 68%,
		rgba(6, 6, 7, 0.06) 88%,
		rgba(6, 6, 7, 0) 100%
	);
}

/*
 * 尊重系统的减弱动效偏好。
 *
 * 这不只是合规要求 —— 前庭功能障碍者会因过度动效
 * 产生真实的生理不适。全站动效在此统一降级。
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--mf-duration-fast: 1ms;
		--mf-duration: 1ms;
		--mf-duration-slow: 1ms;
		--mf-duration-slower: 1ms;
	}
}

/*
 * 亮色模式。
 *
 * Gallery Noir 的本体是暗色 —— 照片在深色背景上才能自发光，
 * 这是画廊布展的基本原理，不应随系统偏好整体翻转。
 *
 * 因此亮色模式只在用户通过站内开关显式选择时启用
 * （data-mf-theme="light"），而非跟随 prefers-color-scheme。
 * 系统偏好亮色的访客默认仍看到暗色画廊，与设计意图一致。
 */
[data-mf-theme="light"] {
	--mf-bg: #f7f6f4;
	--mf-bg-raised: #ffffff;
	--mf-bg-sunken: #eeece8;
	--mf-bg-overlay: rgba(247, 246, 244, 0.9);

	/*
	 * 亮色的透明度需要比暗色更高。
	 *
	 * 深色文字压在浅底上，降低透明度会让文字迅速向背景靠拢；
	 * 而暗底上的白字即使降到 0.5 仍有 5.36:1。同样的
	 * 「弱化 50%」在两种主题下的对比度差了一倍多。
	 *
	 * 按对比度反推的结果：
	 *   0.92 → 14.5:1
	 *   0.70 → 6.9:1
	 *   0.58 → 4.5:1  刚好达标，用于小字号
	 *
	 * 原为 0.38（2.45:1），比暗色出问题的那一档还差 —— 亮色
	 * 目前没人用，属于等着爆的问题。
	 */
	--mf-text: rgba(18, 17, 16, 0.92);
	--mf-text-muted: rgba(18, 17, 16, 0.7);
	--mf-text-faint: rgba(18, 17, 16, 0.58);

	--mf-accent: #8a6d2f;
	--mf-accent-dim: rgba(138, 109, 47, 0.3);
	--mf-accent-glow: rgba(138, 109, 47, 0.1);

	--mf-line: rgba(18, 17, 16, 0.1);
	--mf-line-strong: rgba(18, 17, 16, 0.18);

	--mf-glow: 0 2px 24px rgba(18, 17, 16, 0.06);
}