/**
 * Motion Catalog — 设计 token 层
 *
 * 本文件是全部视觉变量的唯一权威来源，命名空间 --ms-* 与目标站实测一致。
 * 主题设置面板保存的每一项都会以 CSS 变量覆盖的形式输出到本层「之后」，
 * 因此这里只放出厂默认值。
 *
 * 加载顺序：tokens.css → 运行时设置覆盖 → base.css → refine.css → 自定义 CSS
 *
 * ── 工艺底线（universal craft floor）────────────────────────────────────
 * 1. 不用纯 #fff / #000：纯白在屏幕上刺眼，且让所有层次塌成一张纸
 * 2. 中性色往品牌色相偏 0.005–0.015 chroma —— 纯中性灰没有品牌感，
 *    是「默认值」的长相
 * 3. 边框用半透明发丝线，不用硬灰实线（#ccc / #333 系是廉价感标志）
 * 4. 阴影带色相，不用纯黑（纯黑阴影在彩色背景上显脏）
 * 5. 对比度硬指标：ink/bg ≥ 7:1，muted/bg ≥ 3.5:1，组件 ≥ 3:1
 *
 * ⚠ 组件样式里不得出现硬编码颜色 / 字号 / 间距 / 时长，否则设置面板会失效。
 *
 * 品牌色 #c7ff3d 位于黄绿区（约 75°），所以下面的中性色统一往这个方向
 * 偏一点点：肉眼几乎看不出，但整体不再是「扁平冷灰」。
 */

/* ── 亮色（默认） ──────────────────────────────────────────────────────── */

:root {
	color-scheme: light;

	/* 表面：都是偏暖的近白，没有 #fff */
	--ms-canvas: #f7f8f4;
	--ms-surface: #fdfefb;
	--ms-surface-subtle: #eef0ea;
	--ms-surface-hover: #f2f4ee;
	--ms-surface-disabled: #f0f2ec;
	--ms-fill: #ebede7;

	/* 文字：#151813 对 #f7f8f4 约 15:1；muted 约 5.6:1 */
	--ms-ink: #151813;
	--ms-muted: #616559;
	--ms-quiet: #616559;

	/*
	 * 描边由 ink 派生，而不是固定灰值 —— 主题设置面板换主色时，
	 * 描边会跟着一起走，不会留下一个和全局不搭的灰。
	 */
	--ms-line: color-mix(in srgb, var(--ms-ink) 10%, transparent);
	--ms-line-strong: color-mix(in srgb, var(--ms-ink) 24%, transparent);

	/* 品牌 */
	--ms-accent: #c7ff3d;
	--ms-accent-hover: #b8ef32;
	--ms-accent-ink: #3f6b12;
	--ms-accent-soft: color-mix(in srgb, var(--ms-accent) 26%, var(--ms-surface));

	/*
	 * 落在 accent 背景上的前景色。
	 * 亮/暗两种模式下 --ms-accent 都是同一支亮绿，所以这个值必须恒定，
	 * 不能跟随 --ms-ink（暗色模式下 --ms-ink 会变成浅色，贴在亮绿上几乎看不见）。
	 */
	--ms-on-accent: #15180f;

	/* 语义 */
	--ms-focus: #4c75ff;
	--ms-blue: #4c75ff;
	--ms-success: #176a49;
	--ms-warning: #a26300;
	--ms-danger: #b42318;

	/* 阴影：色相取自 ink，不是纯黑 */
	--ms-shadow-sm: 0 1px 2px color-mix(in srgb, var(--ms-ink) 7%, transparent);
	--ms-shadow-md: 0 4px 10px -2px color-mix(in srgb, var(--ms-ink) 9%, transparent);
	--ms-shadow-media: 0 18px 40px -12px color-mix(in srgb, var(--ms-ink) 22%, transparent);
	--ms-glow: 0 8px 26px -8px color-mix(in srgb, var(--ms-accent) 55%, transparent);

	/* 字体 */
	--ms-font: "Montserrat", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
	--ms-font-heading: var(--ms-font);
	--ms-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

	/* 字号缩放系数，由设置面板改写 */
	--ms-text-scale: 1;

	/* 字阶：桌面基准，乘以 --ms-text-scale 以便整体缩放 */
	--ms-text-meta: calc(12px * var(--ms-text-scale));
	--ms-text-ui: calc(14px * var(--ms-text-scale));
	--ms-text-body: calc(15px * var(--ms-text-scale));
	--ms-text-panel: calc(16px * var(--ms-text-scale));
	--ms-text-title: calc(24px * var(--ms-text-scale));
	--ms-text-page: calc(32px * var(--ms-text-scale));
	--ms-text-hero: calc(56px * var(--ms-text-scale));

	/*
	 * 行高：display 与正文分开。
	 * 大标题压到 .95 制造「紧、大、自信」的排版张力，正文保持可读。
	 */
	--ms-leading-display: .95;
	--ms-leading-tight: 1.18;
	--ms-leading-ui: 1.45;
	--ms-leading-body: 1.6;

	/* 字距：display 收紧、标签放大 —— 排版质感主要来自这里 */
	--ms-tracking-display: -.045em;
	--ms-tracking-title: -.02em;
	--ms-tracking-label: .12em;

	/* 间距（8pt 网格；数字为 px / 4） */
	--ms-space-1: .25rem;
	--ms-space-2: .5rem;
	--ms-space-3: .75rem;
	--ms-space-4: 1rem;
	--ms-space-5: 1.25rem;
	--ms-space-6: 1.5rem;
	--ms-space-8: 2rem;
	--ms-space-10: 2.5rem;
	--ms-space-12: 3rem;
	--ms-space-16: 4rem;
	--ms-space-20: 5rem;
	--ms-space-24: 6rem;
	--ms-space-32: 8rem;

	/* 圆角：一套 scale，不混用 */
	--ms-radius-sm: 6px;
	--ms-radius-md: 10px;
	--ms-radius-lg: 16px;
	--ms-radius-xl: 22px;
	--ms-radius-pill: 999px;

	/*
	 * 动效。
	 * 缓动不用 .22,.61,.36,1 那种「轻」的减速 —— 更陡的 expo-out 才是
	 * 「克制而贵」的观感；入场时长也放慢到 700ms 级而不是 260ms。
	 */
	--ms-ease-out: cubic-bezier(.16, 1, .3, 1);
	--ms-ease-in-out: cubic-bezier(.65, .05, .36, 1);
	--ms-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
	--ms-dur-scale: 1;
	--ms-dur-micro: calc(140ms * var(--ms-dur-scale));
	--ms-dur-base: calc(220ms * var(--ms-dur-scale));
	--ms-dur-enter: calc(320ms * var(--ms-dur-scale));
	--ms-dur-exit: calc(180ms * var(--ms-dur-scale));
	--ms-dur-block: calc(420ms * var(--ms-dur-scale));
	--ms-dur-reveal: calc(700ms * var(--ms-dur-scale));
	/* 列表错开间隔，motion.js 会读取它 */
	--ms-stagger: 45ms;

	/* 布局 */
	--ms-container: 78rem;
	--ms-content: 44rem;
	--ms-grid-gap: var(--ms-space-6);
	--ms-grid-min: 15rem;
	--ms-header-height: 4rem;
	--ms-header-height-stuck: 3.25rem;
	--ms-header-blur: 12px;
	--ms-card-ratio: 4 / 3;
	--ms-measure: 68ch;

	/* 密度开关：由设置面板改写为紧凑 / 标准 / 宽松 */
	--ms-density: 1;

	/* 分层深度：纹理(z1) · 内容(z5) */
	--ms-z-texture: 1;
	--ms-z-content: 5;
}

/* ── 暗色原始值 ────────────────────────────────────────────────────────── */
/*
 * 只在这里定义一次；下面两个映射点（系统偏好 / 显式切换）引用同一批变量，
 * 避免两处色值各自维护而逐渐不同步。
 */

:root {
	--ms-dark-canvas: #0f110e;
	--ms-dark-surface: #161a14;
	--ms-dark-surface-subtle: #1e231b;
	--ms-dark-surface-hover: #262c22;
	--ms-dark-surface-disabled: #191d16;
	--ms-dark-fill: #1e231b;
	--ms-dark-ink: #f2f4ef;
	--ms-dark-muted: #9aa394;
	--ms-dark-quiet: #8d9686;
	--ms-dark-line: color-mix(in srgb, #f2f4ef 12%, transparent);
	--ms-dark-line-strong: color-mix(in srgb, #f2f4ef 26%, transparent);
	--ms-dark-accent-hover: #d4ff5c;
	--ms-dark-accent-ink: #c7ff3d;
	--ms-dark-accent-soft: color-mix(in srgb, var(--ms-accent) 18%, #0f110e);
	--ms-dark-focus: #7b96ff;
	--ms-dark-success: #3dba86;
	--ms-dark-warning: #e0a24a;
	--ms-dark-danger: #f0746a;
	--ms-dark-shadow-sm: 0 1px 2px rgb(4 8 2 / .5);
	--ms-dark-shadow-md: 0 4px 12px -2px rgb(4 8 2 / .6);
	--ms-dark-shadow-media: 0 18px 40px -12px rgb(0 0 0 / .62);
}

/* 映射点 1／2：跟随系统偏好（显式选了亮色时不生效） */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;

		--ms-canvas: var(--ms-dark-canvas);
		--ms-surface: var(--ms-dark-surface);
		--ms-surface-subtle: var(--ms-dark-surface-subtle);
		--ms-surface-hover: var(--ms-dark-surface-hover);
		--ms-surface-disabled: var(--ms-dark-surface-disabled);
		--ms-fill: var(--ms-dark-fill);
		--ms-ink: var(--ms-dark-ink);
		--ms-muted: var(--ms-dark-muted);
		--ms-quiet: var(--ms-dark-quiet);
		--ms-line: var(--ms-dark-line);
		--ms-line-strong: var(--ms-dark-line-strong);
		--ms-accent-hover: var(--ms-dark-accent-hover);
		--ms-accent-ink: var(--ms-dark-accent-ink);
		--ms-accent-soft: var(--ms-dark-accent-soft);
		--ms-focus: var(--ms-dark-focus);
		--ms-blue: var(--ms-dark-focus);
		--ms-success: var(--ms-dark-success);
		--ms-warning: var(--ms-dark-warning);
		--ms-danger: var(--ms-dark-danger);
		--ms-shadow-sm: var(--ms-dark-shadow-sm);
		--ms-shadow-md: var(--ms-dark-shadow-md);
		--ms-shadow-media: var(--ms-dark-shadow-media);
	}
}

/* 映射点 2／2：用户在设置面板里显式选择了暗色 */

:root[data-theme="dark"] {
	color-scheme: dark;

	--ms-canvas: var(--ms-dark-canvas);
	--ms-surface: var(--ms-dark-surface);
	--ms-surface-subtle: var(--ms-dark-surface-subtle);
	--ms-surface-hover: var(--ms-dark-surface-hover);
	--ms-surface-disabled: var(--ms-dark-surface-disabled);
	--ms-fill: var(--ms-dark-fill);
	--ms-ink: var(--ms-dark-ink);
	--ms-muted: var(--ms-dark-muted);
	--ms-quiet: var(--ms-dark-quiet);
	--ms-line: var(--ms-dark-line);
	--ms-line-strong: var(--ms-dark-line-strong);
	--ms-accent-hover: var(--ms-dark-accent-hover);
	--ms-accent-ink: var(--ms-dark-accent-ink);
	--ms-accent-soft: var(--ms-dark-accent-soft);
	--ms-focus: var(--ms-dark-focus);
	--ms-blue: var(--ms-dark-focus);
	--ms-success: var(--ms-dark-success);
	--ms-warning: var(--ms-dark-warning);
	--ms-danger: var(--ms-dark-danger);
	--ms-shadow-sm: var(--ms-dark-shadow-sm);
	--ms-shadow-md: var(--ms-dark-shadow-md);
	--ms-shadow-media: var(--ms-dark-shadow-media);
}

/* ── 响应式字阶（断点取自目标站实测） ──────────────────────────────────── */

@media (max-width: 39.999rem) {
	:root {
		--ms-text-meta: calc(11px * var(--ms-text-scale));
		--ms-text-ui: calc(13px * var(--ms-text-scale));
		--ms-text-body: calc(14px * var(--ms-text-scale));
		--ms-text-panel: calc(15px * var(--ms-text-scale));
		--ms-text-title: calc(20px * var(--ms-text-scale));
		--ms-text-page: calc(26px * var(--ms-text-scale));
		--ms-text-hero: calc(38px * var(--ms-text-scale));
		--ms-leading-display: 1;
		--ms-leading-tight: 1.2;
		--ms-leading-ui: 1.4;
		--ms-leading-body: 1.55;
		--ms-tracking-display: -.03em;
		--ms-grid-gap: var(--ms-space-4);
		--ms-grid-min: 12rem;
	}
}

@media (min-width: 80rem) {
	:root {
		--ms-text-hero: calc(76px * var(--ms-text-scale));
		--ms-container: 82rem;
	}
}

/* ── 同步给 WordPress 预设 ─────────────────────────────────────────────── */
/*
 * 让编辑器里的色板 / 字号 / 间距与前台保持一致。
 * 选择器写成 :root:root 是为了压过 WordPress 自己输出的 :root 声明——
 * 否则加载顺序一旦变化，设置面板改了颜色而编辑器色板不跟随。
 */

:root:root {
	--wp--preset--color--canvas: var(--ms-canvas);
	--wp--preset--color--surface: var(--ms-surface);
	--wp--preset--color--surface-subtle: var(--ms-surface-subtle);
	--wp--preset--color--surface-hover: var(--ms-surface-hover);
	--wp--preset--color--fill: var(--ms-fill);
	--wp--preset--color--ink: var(--ms-ink);
	--wp--preset--color--muted: var(--ms-muted);
	--wp--preset--color--line: var(--ms-line);
	--wp--preset--color--line-strong: var(--ms-line-strong);
	--wp--preset--color--accent: var(--ms-accent);
	--wp--preset--color--accent-hover: var(--ms-accent-hover);
	--wp--preset--color--accent-ink: var(--ms-accent-ink);
	--wp--preset--color--focus: var(--ms-focus);
	--wp--preset--color--success: var(--ms-success);
	--wp--preset--color--warning: var(--ms-warning);
	--wp--preset--color--danger: var(--ms-danger);

	--wp--preset--font-size--meta: var(--ms-text-meta);
	--wp--preset--font-size--ui: var(--ms-text-ui);
	--wp--preset--font-size--body: var(--ms-text-body);
	--wp--preset--font-size--panel: var(--ms-text-panel);
	--wp--preset--font-size--title: var(--ms-text-title);
	--wp--preset--font-size--page: var(--ms-text-page);
	--wp--preset--font-size--hero: var(--ms-text-hero);

	--wp--preset--spacing--10: var(--ms-space-1);
	--wp--preset--spacing--20: var(--ms-space-2);
	--wp--preset--spacing--30: var(--ms-space-3);
	--wp--preset--spacing--40: var(--ms-space-4);
	--wp--preset--spacing--50: var(--ms-space-6);
	--wp--preset--spacing--60: var(--ms-space-8);
	--wp--preset--spacing--70: var(--ms-space-12);
	--wp--preset--spacing--80: var(--ms-space-16);
	--wp--preset--spacing--90: var(--ms-space-24);
}