/* ═══════════════════════════════════════════════════════════════════
   Claymorphism Design System — tokens.css
   The single source of truth for CSS variables. All HTML files
   (preview.html, design.html, examples/*.html) link this one file.
   Layer order: reference → system → component → dark mode overrides.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://cdn.jsdelivr.net/npm/modern-normalize@2.0.0/modern-normalize.min.css');
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
/* 抖音美好体 (DouyinSans) — 抖音品牌开源字体，OFL 免费商用。
   由 ZeoSeven Fonts (ZSFT) 提供 CDN 分包，@font-face 内嵌 unicode-range，
   只在中文/中日韩标点范围内命中，不会污染拉丁字符。
   来源: https://fonts.zeoseven.com/items/84/
   font-family 名: 'DouyinSans'（仅一档 weight 700，视觉厚重）。 */
@import url('https://fontsapi.zeoseven.com/84/main/result.css');

/* — Reset self-补强 — */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  font-family: var(--sys-font-body);
  color: var(--sys-color-text-default);
  background: var(--sys-color-bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button {
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
ul,
ol {
  list-style: none;
}
img,
svg {
  display: block;
  max-width: 100%;
}

/* ═════════════════════════════════════════════════════════════════════
   REFERENCE LAYER — raw values. Never consumed directly by components.
   ═════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand — anchor + seven-color primary wheel ──
     调色思路调整（v3.5）：Claymorphism 不再依赖任何单一主色。之前 Coral
     (#FF7A6B) 是绝对主角，整个系统被拉向"红色系"。现在的哲学是——
       · 保留 Coral，让它作为七色主色轮里的一员，而不是独一无二的锚点。
       · CTA / focus / active state 依然需要一个"默认落点"，用 Lilac
         (#8B7CFF) 作 anchor：它色相中性、跟其它六色都不打架，也不会
         让页面被暖色统治。
       · 但组件层同时提供 .btn--primary--{coral|sky|mint|butter|peach|rose|lilac}
         变体，让"多彩"是产品可以立刻用起来的第一等语言，而不是隐藏
         在 accent 里的辅料。
     结论：Lilac 是 anchor，不是唯一 primary。七色都可作 primary CTA。 */
  --ref-brand-lilac: #8b7cff;
  --ref-brand-lilac-deep: #6e5fe8;

  /* ── Seven-color primary wheel ──
     七色沿色轮均匀分布，饱和度 65-75%、亮度 62-72% 对齐，做到"从同一
     袋粘土里挤出来"。它们不是"辅色"——每一个都可以作为一个页面 / 一个
     KPI / 一个按钮的主色，放在一起也不会打架。
       Coral   ·   5°  → 用户熟悉的红色系，回归轮盘
       Peach   ·  25°  → 温暖，收入 / 增长
       Butter  ·  45°  → 阳光，类目 / 待办
       Mint    · 165°  → 生长，on-track
       Sky     · 205°  → 信息，链接
       Lilac   · 260°  → anchor，focus，wayfinding
       Rose    · 335°  → 社交，playful
     */
  --ref-coral: #ff7a6b;    /*   5°  warm hero    */
  --ref-peach: #ffaa6b;    /*  25°  warm         */
  --ref-butter: #ffce4f;   /*  45°  sunny        */
  --ref-mint: #4fd3b0;     /* 165°  fresh        */
  --ref-sky: #5ab8ff;      /* 205°  cool         */
  --ref-lilac: #8b7cff;    /* 260°  anchor       */
  --ref-rose: #ff95bf;     /* 335°  playful      */

  /* 每个主色的 deep 变体，用于 hover / pressed / gradient 深端 */
  --ref-coral-deep: #ea5c4d;
  --ref-peach-deep: #e5864a;
  --ref-butter-deep: #e0a51e;
  --ref-mint-deep: #2eb593;
  --ref-sky-deep: #2f9be3;
  --ref-lilac-deep: #6e5fe8;
  --ref-rose-deep: #ea6ea1;

  /* 每个主色的 wash（10-16% 透明），用于 chip fill / KPI tint stripe /
     hover 底色 / 大面积柔和背景。 */
  --ref-coral-wash: rgba(255, 122, 107, 0.14);
  --ref-peach-wash: rgba(255, 170, 107, 0.14);
  --ref-butter-wash: rgba(255, 206, 79, 0.16);
  --ref-mint-wash: rgba(79, 211, 176, 0.12);
  --ref-sky-wash: rgba(90, 184, 255, 0.10);
  --ref-lilac-wash: rgba(139, 124, 255, 0.10);
  --ref-rose-wash: rgba(255, 149, 191, 0.12);

  /* ── Neutrals (cool oat-milk, slight lilac cast) ──
     底色是冷奶白 #F6F4FB —— 唯一能让 7 个饱和主色同时和平共处的中性载体：
       1. 完全去暖：暖底会让冷色 (sky/mint/lilac) 发脏。
       2. 微紫倾向：暗中和 lilac anchor 呼应，避免死灰工业感。
       3. 亮度极高：给多彩 chip / KPI / chart 足够对比空间。 */
  --ref-neutral-50: #f6f4fb;
  --ref-neutral-100: #efedf7;
  --ref-neutral-200: #e3dff0;
  --ref-neutral-300: #d2cce4;
  --ref-neutral-400: #b0a9c6;
  --ref-neutral-500: #857d9e;
  --ref-neutral-600: #5d5677;
  --ref-neutral-700: #3e3854;
  --ref-neutral-800: #2a253a;
  --ref-neutral-900: #1a162a;
  --ref-neutral-white: #ffffff;
  --ref-neutral-off-white: #fbfaff;

  /* Semantic base */
  --ref-success: #1f8f6b;
  --ref-success-bg: #dff7ed;
  --ref-success-border: #8fdfc0;
  --ref-danger: #c93f3f;
  --ref-danger-bg: #ffe1dd;
  --ref-danger-border: #f5a69c;
  --ref-warning: #b07a00;
  --ref-warning-bg: #fff3d1;
  --ref-warning-border: #f5d67a;
  --ref-info: #2f6fdb;
  --ref-info-bg: #e1edff;
  --ref-info-border: #a5c3f5;

  /* Typography families.
     ── 中文首选字体：抖音美好体（DouyinSans）──
     DouyinSans 由抖音品牌创意中心开源（OFL）、方正字库承制，仅有一档 Bold (700)
     的大字重字体。特征：90% 大字面率、大中宫、笔画粗厚，与 Fredoka 的圆润饱满
     气质天然咬合，是 Claymorphism "puffy toy" 语言的理想中文承载。
     由于 DouyinSans 只有 Bold 一档，我们做双通道设计：
       --ref-font-cjk-display : DouyinSans 优先，用于标题/按钮/标签/eyebrow/KPI
                                 —— 这些场景需要有存在感，粗字重是加分项。
       --ref-font-cjk-body    : PingFang / HarmonyOS Sans SC 优先，DouyinSans 兜底
                                 —— 正文/表格/长段落用系统字体保持阅读舒适。
     系统 fallback 顺序：PingFang SC (macOS/iOS) → HarmonyOS Sans SC (国产设备)
       → Microsoft YaHei (Windows) → Noto Sans SC (Linux/Android)。

     Fredoka 与 Plus Jakarta Sans 本身不含中文字形；DouyinSans CDN 通过
     unicode-range 分包，只在中文/中日韩标点范围命中，因此拉丁 + 中文可以混排
     且各自使用自己的字形。 */
  --ref-font-cjk-display: 'DouyinSans', 'PingFang SC', 'HarmonyOS Sans SC',
    'Microsoft YaHei', 'Noto Sans SC';
  --ref-font-cjk-body: 'PingFang SC', 'HarmonyOS Sans SC',
    'Microsoft YaHei', 'Noto Sans SC', 'DouyinSans';
  --ref-font-display: 'Fredoka', var(--ref-font-cjk-display),
    system-ui, -apple-system, sans-serif;
  --ref-font-body: 'Plus Jakarta Sans', var(--ref-font-cjk-body),
    system-ui, -apple-system, sans-serif;
  --ref-font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

  /* Spacing scale (4px base) */
  --ref-space-1: 4px;
  --ref-space-2: 8px;
  --ref-space-3: 12px;
  --ref-space-4: 16px;
  --ref-space-5: 24px;
  --ref-space-6: 32px;
  --ref-space-7: 48px;
  --ref-space-8: 64px;
  --ref-space-9: 96px;

  /* Radius scale */
  --ref-radius-sm: 12px;
  --ref-radius-md: 18px;
  --ref-radius-lg: 24px;
  --ref-radius-xl: 32px;
  --ref-radius-2xl: 40px;
  --ref-radius-full: 9999px;

  /* Shadow atoms — the clay recipe
     阴影染色从暖珊瑚色 rgba(232, 90, 74, …) 换成冷紫棕 rgba(58, 45, 92, …)。
     这样多主色（lilac / sky / mint / butter / peach / rose）在页面上并置时，
     阴影不会跟任何一个主色打架，也保留了 clay 的"色染 vs 中性灰"差异。 */
  --ref-shadow-clay-sm: 0 4px 10px -2px rgba(58, 45, 92, 0.16),
    inset 0 2px 3px rgba(255, 255, 255, 0.9),
    inset 0 -2px 3px rgba(58, 45, 92, 0.08);
  --ref-shadow-clay-md: 0 12px 24px -8px rgba(58, 45, 92, 0.22),
    inset 0 3px 5px rgba(255, 255, 255, 0.95),
    inset 0 -3px 6px rgba(58, 45, 92, 0.10);
  --ref-shadow-clay-lg: 0 24px 40px -16px rgba(58, 45, 92, 0.26),
    inset 0 4px 8px rgba(255, 255, 255, 0.9),
    inset 0 -4px 8px rgba(58, 45, 92, 0.12);
  --ref-shadow-clay-xl: 0 40px 60px -24px rgba(58, 45, 92, 0.32),
    inset 0 5px 10px rgba(255, 255, 255, 0.95),
    inset 0 -5px 10px rgba(58, 45, 92, 0.14);
  --ref-shadow-clay-inset: inset 0 6px 12px rgba(58, 45, 92, 0.12),
    inset 0 -3px 6px rgba(255, 255, 255, 0.8);
  --ref-shadow-focus-ring: 0 0 0 4px rgba(139, 124, 255, 0.32);

  /* Motion */
  --ref-ease-clay: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ref-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ref-duration-fast: 150ms;
  --ref-duration-base: 240ms;
  --ref-duration-slow: 400ms;
}

/* ═════════════════════════════════════════════════════════════════════
   SYSTEM LAYER — semantic. Components consume these.
   ═════════════════════════════════════════════════════════════════════ */
:root {
  /* Backgrounds */
  --sys-color-bg-page: var(--ref-neutral-50);
  --sys-color-bg-page-deep: var(--ref-neutral-200);
  --sys-color-bg-surface: var(--ref-neutral-white);
  --sys-color-bg-surface-sunk: var(--ref-neutral-100);
  --sys-color-bg-overlay: rgba(30, 24, 54, 0.36);

  /* Text */
  --sys-color-text-default: var(--ref-neutral-900);
  --sys-color-text-secondary: var(--ref-neutral-600);
  --sys-color-text-muted: var(--ref-neutral-500);
  --sys-color-text-subtle: var(--ref-neutral-400);
  --sys-color-text-inverse: var(--ref-neutral-off-white);

  /* Borders — 1px hairline for high-density tables, meta rows, timeline rails.
     Softer than surface strokes because clay page wash already carries visual
     weight; a full-opacity line would over-power the puffy surfaces. */
  --sys-color-border-hairline: color-mix(in oklab, var(--ref-neutral-300) 60%, transparent);

  /* Brand anchor — 只是"默认落点"，不代表唯一主色 */
  --sys-color-brand-default: var(--ref-brand-lilac);
  --sys-color-brand-hover: var(--ref-brand-lilac-deep);
  --sys-color-brand-soft: rgba(139, 124, 255, 0.10);
  --sys-color-brand-soft-active: rgba(139, 124, 255, 0.16);

  /* ── Seven-color primary wheel (system layer) ──
     组件通过这些 token 使用主色。每个主色都有一个 -wash 变体用作背景。
     命名注意：这里叫 "accent" 是历史遗留，语义上它们和 brand 平级 ——
     它们不是"辅色"，是"主色轮的一员"。 */
  --sys-color-accent-coral: var(--ref-coral);
  --sys-color-accent-peach: var(--ref-peach);
  --sys-color-accent-butter: var(--ref-butter);
  --sys-color-accent-mint: var(--ref-mint);
  --sys-color-accent-sky: var(--ref-sky);
  --sys-color-accent-lilac: var(--ref-lilac);
  --sys-color-accent-rose: var(--ref-rose);

  --sys-color-accent-coral-deep: var(--ref-coral-deep);
  --sys-color-accent-peach-deep: var(--ref-peach-deep);
  --sys-color-accent-butter-deep: var(--ref-butter-deep);
  --sys-color-accent-mint-deep: var(--ref-mint-deep);
  --sys-color-accent-sky-deep: var(--ref-sky-deep);
  --sys-color-accent-lilac-deep: var(--ref-lilac-deep);
  --sys-color-accent-rose-deep: var(--ref-rose-deep);

  --sys-color-accent-coral-wash: var(--ref-coral-wash);
  --sys-color-accent-peach-wash: var(--ref-peach-wash);
  --sys-color-accent-butter-wash: var(--ref-butter-wash);
  --sys-color-accent-mint-wash: var(--ref-mint-wash);
  --sys-color-accent-sky-wash: var(--ref-sky-wash);
  --sys-color-accent-lilac-wash: var(--ref-lilac-wash);
  --sys-color-accent-rose-wash: var(--ref-rose-wash);

  /* ── On-tone foreground colors (v3.13) ──
     每个主色轮 tone 的"深色文字"配对。之前散落在 4 个 HTML 中的
     .btn--tone-{coral|peach|butter|mint|sky|lilac|rose} 用的 hex
     色值（如 color:#4a2a15 for peach）——收敛为 tokens。
     取色原则：从每个 ref-tone 的色相往 L≈24-28、饱和度 40-55% 拉，
     跟主色底同色相但压暗，比灰更"属于自己"，也保证 WCAG AA。
     Lilac / Sky 用极暗蓝紫近黑（背景是冷紫奶白，纯黑会显脏）；
     Butter / Peach / Coral 走暖棕；Mint 走墨绿；Rose 走深梅。 */
  --sys-color-on-coral: #4a1a12;
  --sys-color-on-peach: #4a2a15;
  --sys-color-on-butter: #4a3a10;
  --sys-color-on-mint: #10382c;
  --sys-color-on-sky: #0e2942;
  --sys-color-on-lilac: #1e1748;
  --sys-color-on-rose: #4a1f34;

  /* Semantic triples */
  --sys-color-success-fg: var(--ref-success);
  --sys-color-success-bg: var(--ref-success-bg);
  --sys-color-success-border: var(--ref-success-border);
  --sys-color-danger-fg: var(--ref-danger);
  --sys-color-danger-bg: var(--ref-danger-bg);
  --sys-color-danger-border: var(--ref-danger-border);
  --sys-color-warning-fg: var(--ref-warning);
  --sys-color-warning-bg: var(--ref-warning-bg);
  --sys-color-warning-border: var(--ref-warning-border);
  --sys-color-info-fg: var(--ref-info);
  --sys-color-info-bg: var(--ref-info-bg);
  --sys-color-info-border: var(--ref-info-border);

  /* Lines */
  --sys-color-line-default: var(--ref-neutral-300);
  --sys-color-line-emphasis: var(--ref-neutral-400);

  /* Fonts */
  --sys-font-display: var(--ref-font-display);
  --sys-font-body: var(--ref-font-body);
  --sys-font-mono: var(--ref-font-mono);

  /* Spacing */
  --sys-space-inline: var(--ref-space-2);
  --sys-space-tight: var(--ref-space-3);
  --sys-space-component: var(--ref-space-4);
  --sys-space-card: var(--ref-space-5);
  --sys-space-section: var(--ref-space-6);
  --sys-space-hero: var(--ref-space-8);

  /* Radius */
  --sys-radius-chip: var(--ref-radius-sm);
  --sys-radius-button: var(--ref-radius-md);
  --sys-radius-input: var(--ref-radius-md);
  --sys-radius-card: var(--ref-radius-lg);
  --sys-radius-modal: var(--ref-radius-xl);
  --sys-radius-avatar: var(--ref-radius-full);

  /* Shadow */
  --sys-shadow-chip: var(--ref-shadow-clay-sm);
  --sys-shadow-card: var(--ref-shadow-clay-md);
  --sys-shadow-card-hover: var(--ref-shadow-clay-lg);
  --sys-shadow-hero: var(--ref-shadow-clay-lg);
  --sys-shadow-modal: var(--ref-shadow-clay-xl);
  --sys-shadow-inset: var(--ref-shadow-clay-inset);
  --sys-shadow-focus: var(--ref-shadow-focus-ring);

  /* Motion */
  --sys-ease-bounce: var(--ref-ease-clay);
  --sys-ease-standard: var(--ref-ease-out);
  --sys-duration-fast: var(--ref-duration-fast);
  --sys-duration-base: var(--ref-duration-base);
  --sys-duration-slow: var(--ref-duration-slow);

  /* ── Rainbow gradients ──
     多主色系统衍生出的两种"糖果彩虹"渐变：
       · --sys-gradient-meadow  水平温和渐变，七色 wash 依次过渡 (5°→335°)。
                                用作 page hero / marketing header / empty
                                state canvas。
       · --sys-gradient-aurora  斜向多色 mesh，六个 radial lobe 交叠。
                                用于登录背景 / feature hero / "wow" 瞬间。
     两者都用低透明 wash tokens，让内容层 (文本、卡片) 仍是主角。 */
  --sys-gradient-meadow: linear-gradient(
    120deg,
    var(--ref-coral-wash) 0%,
    var(--ref-peach-wash) 18%,
    var(--ref-butter-wash) 34%,
    var(--ref-mint-wash) 55%,
    var(--ref-sky-wash) 72%,
    var(--ref-lilac-wash) 88%,
    var(--ref-rose-wash) 100%
  );
  --sys-gradient-aurora: radial-gradient(
      120% 80% at 12% 8%,
      var(--ref-lilac-wash),
      transparent 60%
    ),
    radial-gradient(90% 70% at 92% 12%, var(--ref-sky-wash), transparent 60%),
    radial-gradient(80% 60% at 78% 96%, var(--ref-peach-wash), transparent 60%),
    radial-gradient(70% 60% at 8% 92%, var(--ref-mint-wash), transparent 60%),
    radial-gradient(60% 55% at 50% 50%, var(--ref-butter-wash), transparent 65%),
    radial-gradient(50% 50% at 96% 60%, var(--ref-coral-wash), transparent 60%),
    radial-gradient(55% 55% at 30% 30%, var(--ref-rose-wash), transparent 62%);
}

/* ═════════════════════════════════════════════════════════════════════
   COMPONENT LAYER — project-specific composites.
   ═════════════════════════════════════════════════════════════════════ */
:root {
  --comp-button-height: 48px;
  --comp-button-height-sm: 36px;
  --comp-button-height-lg: 56px;
  --comp-input-height: 48px;
  --comp-nav-item-height: 52px;
  --comp-topbar-height: 72px;
  --comp-sidebar-width: 280px;
  --comp-card-padding: var(--sys-space-card);
  --comp-kpi-display-size: clamp(40px, 4.2vw, 56px);
}

/* ═════════════════════════════════════════════════════════════════════
   DARK MODE — override reference values, system layer flows through.
   ═════════════════════════════════════════════════════════════════════ */
[data-theme='dark'] {
  /* Dark mode 底色改跟随 lilac 家族：深靛紫夜色，与 light mode 的
     微冷奶紫白呼应，避免深棕暖调打乱多主色系统。 */
  --ref-neutral-50: #16142a;
  --ref-neutral-100: #1c1932;
  --ref-neutral-200: #24203f;
  --ref-neutral-300: #302a52;
  --ref-neutral-400: #4a446a;
  --ref-neutral-500: #7c748f;
  --ref-neutral-600: #a8a1bd;
  --ref-neutral-700: #c8c2d9;
  --ref-neutral-800: #e2ddf0;
  --ref-neutral-900: #f5f2fb;
  --ref-neutral-white: #24203f;
  --ref-neutral-off-white: #f5f2fb;

  /* Clay shadows re-tuned so highlight is lower and outer shadow deeper */
  --ref-shadow-clay-sm: 0 4px 10px -2px rgba(0, 0, 0, 0.5),
    inset 0 2px 3px rgba(230, 220, 255, 0.08),
    inset 0 -2px 3px rgba(0, 0, 0, 0.35);
  --ref-shadow-clay-md: 0 12px 24px -8px rgba(0, 0, 0, 0.55),
    inset 0 3px 5px rgba(230, 220, 255, 0.1),
    inset 0 -3px 6px rgba(0, 0, 0, 0.4);
  --ref-shadow-clay-lg: 0 24px 40px -16px rgba(0, 0, 0, 0.6),
    inset 0 4px 8px rgba(230, 220, 255, 0.12),
    inset 0 -4px 8px rgba(0, 0, 0, 0.45);
  --ref-shadow-clay-xl: 0 40px 60px -24px rgba(0, 0, 0, 0.65),
    inset 0 5px 10px rgba(230, 220, 255, 0.14),
    inset 0 -5px 10px rgba(0, 0, 0, 0.5);
  --ref-shadow-clay-inset: inset 0 6px 12px rgba(0, 0, 0, 0.4),
    inset 0 -3px 6px rgba(230, 220, 255, 0.06);

  --sys-color-brand-soft: rgba(139, 124, 255, 0.16);
  --sys-color-brand-soft-active: rgba(139, 124, 255, 0.24);
  --sys-color-bg-overlay: rgba(0, 0, 0, 0.6);

  /* Dark-mode semantic backgrounds — deeper, less saturated */
  --sys-color-success-bg: #123c30;
  --sys-color-danger-bg: #4a1e1e;
  --sys-color-warning-bg: #3f2d0a;
  --sys-color-info-bg: #1a2f57;
}


/* ═════════════════════════════════════════════════════════════════════
   I18N — CJK (Chinese) adaptation layer.

   为什么需要这一层：
   1. Fredoka 与 Plus Jakarta Sans 没有中文字形，浏览器 fall through 到 CJK
      字体时，中文字形通常在同一 font-size 下视觉更大、更"重"。
      → 需要在 [lang="zh*"] 下略降字重、略增行高。
   2. 中文没有单词间距（word-break 靠字形边界），letter-spacing 会让文字
      产生"缝隙感"、破坏阅读节奏。
      → uppercase / tracking utility 在中文下需要归零。
   3. 中文文案通常比等义英文短 30-50%，按钮/tab/nav 里的固定 min-width
      在中文下反而显得空旷。
      → 组件层通过 --sys-* 变量给出中文专用的 min-width / padding。
   4. 中文竖排字形的 baseline 靠上，行高 1.4 时视觉过挤；1.6-1.7 才是
      舒适阅读区间。

   使用方式：
      <html lang="zh-CN"> 或者 <body lang="zh-CN">
      也可以在局部容器上打 lang="zh"，例如中英混排卡片的中文段落。
   ═════════════════════════════════════════════════════════════════════ */
:root {
  /* i18n semantic tokens — 默认按拉丁字符调优。 */
  --sys-lineheight-tight: 1.2;   /* Display / headline */
  --sys-lineheight-base: 1.5;    /* Body */
  --sys-lineheight-relaxed: 1.65;/* Long-form */
  --sys-tracking-eyebrow: 0.08em;/* Uppercase eyebrow / label caps */
  --sys-tracking-button: 0.02em; /* Button label */
  --sys-tracking-body: 0em;
  --sys-weight-display: 600;     /* Fredoka semibold */
  --sys-weight-strong: 600;
  --sys-weight-body: 400;
  --sys-weight-caption: 500;
  --sys-fontfeature-body: 'ss01', 'cv11';   /* Plus Jakarta stylistic */
  --sys-punct-space: 0;                     /* 拉丁下 punctuation trim 关闭 */
}

/* 中文环境覆写。同时命中 zh、zh-CN、zh-Hans、zh-Hant、zh-TW 等 */
:where([lang^='zh']) {
  /* 中文字形笔画密度更高，同 weight 视感更粗。特别是 DouyinSans (Bold 700)
     用于 display，本身就足够厚重，因此拉丁 semibold 600 → 中文 500 甚至 400。
     body 走 PingFang，保持 400 即可。 */
  --sys-weight-display: 500;
  --sys-weight-strong: 500;
  --sys-weight-body: 400;
  --sys-weight-caption: 500;

  /* 中文没有单词分隔，letter-spacing 会破坏方块字节奏。 */
  --sys-tracking-eyebrow: 0.04em; /* 只保留极轻的 uppercase-eyebrow tracking */
  --sys-tracking-button: 0em;
  --sys-tracking-body: 0em;

  /* 中文行高需要更透气 —— body 1.65，标题 1.3。 */
  --sys-lineheight-tight: 1.3;
  --sys-lineheight-base: 1.65;
  --sys-lineheight-relaxed: 1.8;

  /* 开启中文标点挤压：让"，、。"这类前后不占满字宽的符号收紧一点。 */
  --sys-punct-space: -0.05em;

  /* 中文按钮通常 2-6 字，min-width 需要保底避免"确定"变成正方形挤兑感 */
  --comp-button-min-width: 80px;

  /* 中文数字（¥12,345）依然用拉丁字体保持等宽感 */
  font-feature-settings: 'tnum' on, 'lnum' on;
  font-variant-numeric: tabular-nums lining-nums;
}

/* 中文语境下的排印细则 */
:where([lang^='zh']) body,
:where([lang^='zh']) {
  line-height: var(--sys-lineheight-base);
  letter-spacing: var(--sys-tracking-body);
  /* 允许中文换行不断词，但避免把 URL / 长英文串截断 */
  word-break: normal;
  overflow-wrap: anywhere;
  /* 中英文之间加视觉喘息（浏览器 text-spacing / auto-phrase 特性） */
  text-spacing-trim: space-all;
}

:where([lang^='zh']) h1,
:where([lang^='zh']) h2,
:where([lang^='zh']) h3,
:where([lang^='zh']) h4,
:where([lang^='zh']) h5,
:where([lang^='zh']) h6 {
  line-height: var(--sys-lineheight-tight);
  font-weight: var(--sys-weight-display);
  letter-spacing: 0;
}

/* 中文里 uppercase 会破坏字形，直接关闭 */
:where([lang^='zh']) [class*='eyebrow'],
:where([lang^='zh']) .uppercase,
:where([lang^='zh']) [style*='text-transform:uppercase'],
:where([lang^='zh']) [style*='text-transform: uppercase'] {
  text-transform: none;
  letter-spacing: var(--sys-tracking-eyebrow);
}

/* 按钮 —— 中文最小宽度保底，让"取消 / 确定"这类 2 字按钮不至于视觉塌陷 */
:where([lang^='zh']) button,
:where([lang^='zh']) .btn,
:where([lang^='zh']) [data-role='button'] {
  min-width: var(--comp-button-min-width, 80px);
  letter-spacing: var(--sys-tracking-button);
}

/* 表格里数字保持拉丁 tabular，中文表头保持中文；th 稍降 weight。 */
:where([lang^='zh']) th {
  font-weight: 500;
  letter-spacing: 0;
}

/* KPI 大字号在中文下需要略降 —— 拉丁 56px 对应中文视觉 48-52px 更平衡 */
:where([lang^='zh']) {
  --comp-kpi-display-size: clamp(36px, 3.8vw, 48px);
}


/* ═════════════════════════════════════════════════════════════════════
   REDUCED MOTION — global fallback (v3.13)

   为什么要在 tokens.css 底部而不是每个 example 里各写一遍：
   1. 单一真源。之前只有 motion / patterns / data-density / components-*
      在页面里手写了 @media (prefers-reduced-motion)，analytics / kanban
      / settings / app-layout / atoms / preview / design 都没写——
      hover 时的 puffy lift 依然会触发，对前庭系统敏感的用户不友好。
   2. 全局 :where(*) 优先级为 0，不会覆盖组件层显式动效意图，只在
      系统级 transition/animation 未被具体化时兜底。
   3. 该媒体查询是"用户系统偏好"驱动，等同于无障碍契约的一部分。

   命中范围：所有 [transition-*], [animation-*]，包括 hover lift、按钮
   press、drawer 展开等 clay motion recipe。保留 0.001ms 而非 0ms，确保
   :hover 状态切换事件仍可触发但视觉过渡瞬间完成。 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}