/* ==========================================================================
   tokens.css — 设计变量
   100% 对齐 qwenwork.cn 生产 CSS（index-BSKk04W8.css）：
   - 自托管中文字体 Alibaba PuHuiTi（正文/组件）+ Alimama ShuHeiTi-Bold（大标题）
   - 斜体英文用 Libre Baskerville（Google Fonts）
   - 近黑文字 #202116、薄荷绿点缀 #56e891/#5cb870、薄边框 #1414141a
   - 悬浮居中胶囊导航、大圆角、大留白
   ========================================================================== */

/* ---------- 自托管中文字体（与参考站同源） ---------- */
@font-face {
  font-family: "Alibaba PuHuiTi";
  src: url("../fonts/AlibabaPuHuiTi-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Alimama ShuHeiTi";
  src: url("../fonts/AlimamaShuHeiTi-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  /* --- 品牌色 · 薄荷绿 --- */
  --brand-0:   #56e89100;
  --brand-5:   #56e8911f;
  --brand-10:  #56e89140;
  --brand-20:  #56e89180;
  --brand-30:  #56e891b3;
  --brand-40:  #41d871;
  --brand-50:  #2ad15f;
  --brand-60:  #29a651;
  --brand-70:  #238c44;
  --brand-80:  #1f7a43;
  --brand-90:  #165931;
  --brand-100: #0a2615;
  --brand-fill: #56e891;

  /* --- 圆角尺度（对齐参考站 Tailwind 配置） --- */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  10px;
  --r-xl:  12px;
  --r-2xl: 16px;
  --r-3xl: 20px;
  --r-4xl: 24px;
  --r-5xl: 28px;
  --r-6xl: 36px;
  --r-7xl: 60px;
  --r-pill: 60px;

  /* --- 间距节奏 --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* --- 字体栈 ---
     中文：自托管 Alibaba PuHuiTi + 系统中文兜底（零外部依赖、永不塌）
     大标题：Alimama ShuHeiTi（与参考站一致）
     拉丁：Instrument Sans；斜体：Libre Baskerville（Google Fonts）
     如需换成思源黑体 VF，把 'Source Han Sans SC' 加到 --font-cn 最前即可。 */
  --font-cn: "Alibaba PuHuiTi", "PingFang SC", "HarmonyOS Sans SC",
             "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC",
             "Hiragino Sans GB", sans-serif;
  --font-sans: var(--font-cn);
  --font-display-cn: "Alimama ShuHeiTi", "Alibaba PuHuiTi", var(--font-cn);
  --font-display: "Instrument Sans", var(--font-display-cn);
  --font-serif: "Libre Baskerville", Georgia, "Songti SC", "SimSun", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", "Courier New", monospace;

  /* --- 字号 --- */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-36: 36px;
  --fs-44: 44px;
  --fs-56: 56px;
  --fs-72: 72px;

  /* --- 版心 --- */
  --page-max: 1200px;
  --prose-max: 760px;
  --nav-h: 60px;
  --nav-top: 96px;   /* 悬浮胶囊导航占用的顶部空间 */

  /* --- 动效（对齐参考站缓动） --- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 220ms;
}

/* ==========================================================================
   亮色主题（默认）
   ========================================================================== */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg-base:        #ffffff;
  --bg-surface:     #ffffff;  /* 卡片表面（与 bg-card 同义，供组件使用） */
  --bg-soft:        #f7f7f3;   /* hero / 浅灰区块 */
  --bg-sage:        #eff3f2;   /* 薄荷绿淡底 */
  --bg-elevated:    #f7f4ef;
  --bg-sidebar:     #f6f6f3;
  --bg-card:        #ffffff;
  --bg-card-z0:     #1414140a;
  --bg-card-accent: #56e8911f;
  --bg-inverted:    #202116;
  --bg-blur-mask:   #fffffdf0; /* 悬浮导航半透明白 */
  --bg-code:        #f6f6f3;

  --text-primary:   #202116;
  --text-secondary: #4a463c;
  --text-tertiary:  #6b665c;
  --text-disabled:  #14141426;
  --text-accent:    #2f9b5e;   /* 可读的薄荷绿（链接/强调） */
  --text-accent-hover: #238c44;
  --text-on-inverted: #f7f7f3;

  --border-light:   #1414141a;
  --border-medium:  #14141426;
  --border-strong:  #14141433;
  --border-accent:  #202116;
  --border-focus:   #2ad15f;

  --bg-error:      #fef2f2;
  --text-error:    #dc2626;
  --border-error:  #fecaca;
  --bg-warning:    #fffbeb;
  --text-warning:  #d97706;
  --bg-info:       #eff6ff;
  --text-info:     #2563eb;

  --shadow-pop: 0 18px 48px #181b1617;  /* 对齐参考站导航阴影 */
}

/* ==========================================================================
   暗色主题（对齐参考站 dark token）
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-base:        #1b1b16;
  --bg-surface:     #1b1b16;  /* 暗色模式下卡片表面 */
  --bg-soft:        #21211a;
  --bg-sage:        #22221f;
  --bg-elevated:    #26261f;
  --bg-sidebar:     #16160f;
  --bg-card:        #24241d;
  --bg-card-z0:     #ffffff0f;
  --bg-card-accent: #56e8911f;
  --bg-inverted:    #f7f7f3;
  --bg-blur-mask:   #1b1b16d9;
  --bg-code:        #14140f;

  --text-primary:   #eeeeeb;
  --text-secondary: #b4b4ac;
  --text-tertiary:  #7b7b74;
  --text-disabled:  #ffffff2b;
  --text-accent:    #5cb870;
  --text-accent-hover: #7deba0;
  --text-on-inverted: #1b1b16;

  --border-light:   #ffffff1f;
  --border-medium:  #ffffff2b;
  --border-strong:  #ffffff29;
  --border-accent:  #f7f7f3;
  --border-focus:   #39bf64;

  --bg-error:      #3d1f1f;
  --text-error:    #fca5a5;
  --border-error:  #7f1f1f;
  --bg-warning:    #3d2f0f;
  --text-warning:  #fcd34d;
  --bg-info:       #1f2d4a;
  --text-info:     #93c5fd;

  --shadow-pop: 0 14px 38px #1518141a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg-base: #1b1b16;
    --bg-surface: #1b1b16;
    --bg-soft: #21211a;
    --bg-sage: #22221f;
    --bg-elevated: #26261f;
    --bg-sidebar: #16160f;
    --bg-card: #24241d;
    --bg-card-z0: #ffffff0f;
    --bg-card-accent: #56e8911f;
    --bg-inverted: #f7f7f3;
    --bg-blur-mask: #1b1b16d9;
    --bg-code: #14140f;
    --text-primary: #eeeeeb;
    --text-secondary: #b4b4ac;
    --text-tertiary: #7b7b74;
    --text-disabled: #ffffff2b;
    --text-accent: #5cb870;
    --text-accent-hover: #7deba0;
    --text-on-inverted: #1b1b16;
    --border-light: #ffffff1f;
    --border-medium: #ffffff2b;
    --border-strong: #ffffff29;
    --border-accent: #f7f7f3;
    --border-focus: #39bf64;

    --bg-error:      #3d1f1f;
    --text-error:    #fca5a5;
    --border-error:  #7f1f1f;
    --bg-warning:    #3d2f0f;
    --text-warning:  #fcd34d;
    --bg-info:       #1f2d4a;
    --text-info:     #93c5fd;
    --shadow-pop: 0 14px 38px #1518141a;
  }
}