/*
 * 数学拆书工坊 · 设计令牌（方向 A · 克制水墨）
 * 唯一的数值来源：页面和组件样式只能写 var(--…)，不写字面颜色、字号、间距。
 * 来源：需求文档 §0.3 色板；方向 A 设计稿（2026-11-06 用户选定）；参考站分析 analysis.html。
 * 命名：--mbs-<类别>-<用途>。新增令牌先加在这里，再在组件里用。
 */
:root {
  /* ---- 颜色 · 基础色（文档 §0.3.1） ---- */
  --mbs-color-paper: #F4F0E6;        /* 宣纸底（主） */
  --mbs-color-paper-2: #EBE5D7;      /* 宣纸底（分区、格子底） */
  --mbs-color-ink: #1B1A17;          /* 浓墨：标题、正文、主按钮 */
  --mbs-color-ink-2: #4F4A40;        /* 淡墨：次级正文，对宣纸底对比度 ≥ 7:1 */
  --mbs-color-indigo: #22384F;       /* 花青：数学术语标签、链接 */
  --mbs-color-cinnabar: #A8332A;     /* 朱砂：印章、朱批、主行动 */
  --mbs-color-ochre: #B08541;        /* 赭石：分隔、引用线 */
  --mbs-color-edge: #D6CDB9;         /* 纸边：细线、表格线 */
  --mbs-color-sheet: #FFFDF7;        /* 讲义页面：白纸（深色模式不变） */
  --mbs-color-sheet-ink: #1B1A17;
  --mbs-color-sheet-ink-2: #6B655A;
  --mbs-color-sheet-edge: #E6DECB;
  --mbs-color-sheet-term: #22384F;  /* 讲义内术语（深色模式不变） */
  --mbs-color-sheet-zhu: #A8332A;   /* 讲义内朱批（深色模式不变） */
  --mbs-color-sheet-fold: #EAE2CE;   /* 书脊阴影一侧 */
  --mbs-color-sheet-light: #FAF6EB;  /* 书页外缘 */
  --mbs-color-page-edge-1: #E5DCC6;  /* 书页叠边，由浅到深 */
  --mbs-color-page-edge-2: #F6F0E2;
  --mbs-color-page-edge-3: #DDD2B9;
  --mbs-color-page-edge-4: #F2EBDB;
  --mbs-color-page-edge-5: #D6CAAE;
  --mbs-color-on-cinnabar: #FFF8EE;  /* 朱砂底上的字 */
  --mbs-color-seal-ink: #F7E9DF;     /* 印章里的字 */
  --mbs-color-shadow: rgba(20, 12, 0, 0.5);
  --mbs-color-noise: rgba(102, 84, 51, 0.10);
  --mbs-color-press-shade: rgba(0, 0, 0, 0.22);  /* 实底按钮下沿的压痕 */

  /* ---- 颜色 · 别名（组件只用这一组） ---- */
  --mbs-bg: var(--mbs-color-paper);
  --mbs-bg-2: var(--mbs-color-paper-2);
  --mbs-fg: var(--mbs-color-ink);
  --mbs-fg-2: var(--mbs-color-ink-2);
  --mbs-line: var(--mbs-color-edge);
  --mbs-accent: var(--mbs-color-cinnabar);
  --mbs-term: var(--mbs-color-indigo);
  --mbs-btn-bg: var(--mbs-color-ink);
  --mbs-btn-fg: var(--mbs-color-paper);

  /* ---- 字体（文档 §0.3.2：宋体标题 + 黑体正文 + 楷体朱批） ---- */
  --mbs-font-serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", serif;
  --mbs-font-sans: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", system-ui, sans-serif;
  --mbs-font-kai: "Kaiti SC", "STKaiti", "KaiTi", var(--mbs-font-serif);
  --mbs-font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- 字号（正文 ≥ 15px，文档 §0.3.2） ---- */
  --mbs-text-xs: 12.5px;   /* 页脚码、格子类别 */
  --mbs-text-sm: 14.5px;   /* 说明、标签 */
  --mbs-text-md: 17px;     /* 正文 */
  --mbs-text-lg: 19px;     /* 讲义页标题、FAQ 问题 */
  --mbs-text-xl: 24px;     /* 宣言（手机） */
  --mbs-text-2xl: clamp(26px, 3.6vw, 40px);   /* 段落标题 */
  --mbs-text-hero-b: clamp(44px, 6.4vw, 96px); /* 居中首屏标题 */
  --mbs-text-stat: clamp(64px, 9vw, 120px);    /* 巨型数字 */
  --mbs-text-sheet: 15.5px;                    /* 讲义页正文 */
  --mbs-text-flip: 12px;                       /* 翻页动画里的书页字 */

  /* ---- 字重 ---- */
  --mbs-weight-regular: 400;
  --mbs-weight-medium: 500;
  --mbs-weight-bold: 700;

  /* ---- 行高、字距 ---- */
  --mbs-leading-tight: 1.1;
  --mbs-leading-snug: 1.35;
  --mbs-leading-body: 1.8;
  --mbs-leading-sheet: 1.9;
  --mbs-tracking-tight: -0.02em;
  --mbs-tracking-label: 0.14em;
  --mbs-tracking-eyebrow: 0.04em; /* 段落小标题：中文不拉宽 */
  --mbs-tracking-button: 0.06em;

  /* ---- 间距（4 的倍数） ---- */
  --mbs-space-1: 4px;
  --mbs-space-2: 8px;
  --mbs-space-3: 12px;
  --mbs-space-4: 16px;
  --mbs-space-5: 20px;
  --mbs-space-6: 24px;
  --mbs-space-7: 28px;
  --mbs-space-8: 32px;
  --mbs-space-10: 40px;
  --mbs-space-12: 48px;
  --mbs-space-16: 64px;
  --mbs-gutter: 28px;          /* 页面两侧留白（桌面） */
  --mbs-gutter-sm: 18px;       /* 页面两侧留白（手机） */
  --mbs-page-max: 1240px;
  --mbs-rail-w: 280px;         /* 吸顶免费卡栏宽 */
  --mbs-note-w: 13em;          /* 讲义页旁朱批栏宽 */
  --mbs-measure: 34em;         /* 正文最大行宽 */

  /* ---- 尺寸 ---- */
  --mbs-control-h: 48px;       /* 按钮、输入框高度（手机可点） */
  --mbs-control-h-sm: 42px;
  --mbs-seal: 30px;            /* 印章 */
  --mbs-rule: 1px;
  --mbs-rule-strong: 2px;

  /* ---- 圆角 ---- */
  --mbs-radius-sm: 4px;
  --mbs-radius-md: 6px;
  --mbs-radius-lg: 8px;
  --mbs-radius-pill: 999px;

  /* ---- 阴影 ---- */
  --mbs-shadow-sheet: 0 1px 0 var(--mbs-color-page-edge-1), 0 2px 0 var(--mbs-color-sheet-light), 0 3px 0 var(--mbs-color-page-edge-3), 0 26px 46px -30px var(--mbs-color-shadow);
  --mbs-shadow-float: 0 26px 46px -32px var(--mbs-color-shadow);

  /* ---- 动效（文档 §0.3.5：淡入 ≤ 200ms，纸页展开 ≤ 300ms） ---- */
  --mbs-dur-fast: 150ms;
  --mbs-dur-base: 200ms;
  --mbs-dur-page: 300ms;
  --mbs-dur-flip-cycle: 9s;    /* 首屏翻页一轮 */
  --mbs-ease: cubic-bezier(0.6, 0.05, 0.3, 1);

  /* ---- 组件专用尺寸 ---- */
  --mbs-flip-tilt: 14deg;      /* 翻页动画书本前倾 */
  --mbs-flip-perspective: 2200px;
  --mbs-flip-ratio: 1.5;
  --mbs-strike-tilt: -3deg;
  --mbs-flip-max: 600px;
  --mbs-flip-max-wide: 820px; /* 居中首屏翻页宽度 */
  --mbs-flip-ratio-sm: 1.7;
  --mbs-grid-cell-min: 150px;
  --mbs-grid-cell-h: 118px;
  --mbs-form-max: 560px;
  --mbs-field-label-w: 4.5em;   /* 单元格输入框的标签列 */
  --mbs-leading-none: 1;
  --mbs-leading-loose: 1.6;
  --mbs-opacity-disabled: 0.45;
  --mbs-opacity-placeholder: 0.75;
  --mbs-dur-spin: 800ms;
  --mbs-edge-2: calc(var(--mbs-rule) * 2);
  --mbs-edge-3: calc(var(--mbs-rule) * 3);
  --mbs-edge-4: calc(var(--mbs-rule) * 4);
  --mbs-edge-5: calc(var(--mbs-rule) * 5);

  /* ---- 子页面（2026-11-06 第一批 8 页） ---- */
  --mbs-text-h1: clamp(30px, 4.6vw, 46px);   /* 子页面页标题，小于首屏标题、大于段落标题 */
  --mbs-color-scrim: rgba(27, 26, 23, 0.55); /* 弹层底下的遮罩 */
  --mbs-color-watermark: rgba(27, 26, 23, 0.075); /* 讲义页水印字（白纸上，深色模式不变） */
  --mbs-cover-w: 92px;          /* 样品封面（手机） */
  --mbs-cover-w-lg: 148px;      /* 样品封面（桌面） */
  --mbs-cover-ratio: 3 / 4;
  --mbs-cell-label-w: 5.5em;    /* 只读单元格的标签列 */
  --mbs-tag-h: 26px;
  --mbs-dot: 10px;              /* 时间线圆点 */
  --mbs-blur-lock: 7px;         /* 锁住的讲义页 */
  --mbs-skel-h: 9px;            /* 锁住页里的空行 */
  --mbs-qr: 208px;              /* 二维码放大后 */
  --mbs-popup-w: 360px;
  --mbs-split-side-w: 340px;    /* 订单中心右栏 */
  --mbs-stamp-tilt: -3deg;
  --mbs-z-overlay: 50;

  /* ---- 第二批：收银台、下载、订阅、后台 ---- */
  --mbs-table-cell-x: 12px;     /* 后台表格单元格左右内边距（比前台密） */
  --mbs-table-min: 640px;       /* 宽表格最小宽度，窄屏在外层左右滑 */
  --mbs-fade-w: 28px;           /* 横滑区右缘渐隐宽度 */
  --mbs-bar-h: 10px;            /* 漏斗条高度 */
  --mbs-funnel-label-w: 7em;
  --mbs-funnel-value-w: 4.5em;
  --mbs-affix-w: 1.5em;         /* 输入框前缀（¥） */
  --mbs-qr-inline: 168px;       /* 付款页收款码 */

  /* ---- 断点（CSS 不能在 @media 里用变量，固定三档，组件只许用这三个值）----
   * 520px 小手机  ·  760px 手机/平板分界  ·  980px 收起右侧吸顶栏 */

  /* ---- 层级 ---- */
  --mbs-z-content: 1;
  --mbs-z-sticky: 30;
  --mbs-z-bar: 40;
}

@media (prefers-color-scheme: dark) {
  :root {
    --mbs-color-paper: #1A1813;
    --mbs-color-paper-2: #211E18;
    --mbs-color-ink: #ECE6D8;
    --mbs-color-ink-2: #B4AB98;
    --mbs-color-edge: #3A352C;
    --mbs-color-cinnabar: #D9665A;
    --mbs-color-indigo: #9DB8D6;
    --mbs-color-noise: rgba(255, 240, 210, 0.05);
    --mbs-color-scrim: rgba(0, 0, 0, 0.6);
    /* 讲义页保持白纸黑字（文档 §0.3.4），讲义内的术语和朱批仍用浅色主题的深色值 */
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --mbs-dur-fast: 0ms;
    --mbs-dur-base: 0ms;
    --mbs-dur-page: 0ms;
  }
}
