/* ============================================================
   全站设计令牌 —— 前台、编辑器、后台共用同一份（HIG 单一来源）
   改这里三端同时生效，避免前台/后台各定义一套导致的漂移。
   加载顺序：tokens.css → site.css / editor.css / admin 内联样式
   ============================================================ */
/* ============================================================
   亮品牌 L brand · 设计系统 v2
   瑞士国际主义（Swiss Modern）· 白 / 真黑 / 信号红
   品牌基因即配色：Logo 的白、真黑与正红
   质感层：grain 噪点 · vignette 暗角 · 灰度影像 · 发丝网格
   ============================================================ */

:root {
  /* ---- 色（三段式命名：名称(hex) — 功能与约束）---- */
  --bg:        #FBFBFD;              /* Paper White — 页面底色，中性微暖，不用纯白 */
  --surface:   #FFFFFF;              /* Sheet — 抬升面（卡片/表头） */
  --ink:       #1D1D1F;              /* True Black — 标题与主文字，对比 ≥ 16:1 */
  --ink-2:     #5A5A5E;              /* Graphite — 正文，实测对比 7.0:1（HIG 目标值）*/
  --ink-3:     #6E6E73;              /* Ash — 辅助小字，实测对比 4.9:1（HIG 下限 4.5）*/
  --ink-4:     #D2D2D7;              /* Mist — 极浅分隔/装饰 */              /* Ash — 辅助与元信息，对比 ≥ 3.5:1 */
  --accent:    #E01B24;              /* Signal Red — 唯一强调色 */
  --accent-dp: #A8121A;              /* Deep Signal — 深底上的红 */
  --dark:      #0A0A0A;              /* Void Black — 深色区块底 */
  --on-dark:   #F2F2F0;              /* Star White — 深底文字 */
  --on-dark-2: #A8A8A4;              /* Star Muted — 深底次级文字 */
  --line:        rgba(0, 0, 0, .08);   /* Hairline — 发丝线（半透明，不用实心 #ccc） */
  --line-strong: rgba(0, 0, 0, .16);   /* Hairline Strong — 结构线 */
  --line-dark:   rgba(242, 242, 240, .13);/* Hairline on Void */
  /* ---- 三层深度模型（HIG §4.1 视觉层级 / §6.1 深度表达）----
     base（页面底）＜ elevated（卡片·弹层，比底亮一档）＜ glass（导航·悬浮控件）
     层级只用背景色 + 阴影表达，不靠描边堆叠 */
  --depth-base:     var(--bg);              /* 第 1 层：页面底色 */
  --depth-elevated: var(--surface);         /* 第 2 层：卡片 / 弹窗 / 浮层 */
  --depth-glass-bg: rgba(245, 245, 243, .86);/* 第 3 层：玻璃控件底（配 blur）*/
  --depth-glass-bg-solid: rgba(245, 245, 243, .97); /* 玻璃层不透明回退（不支持 blur 时）*/
  --depth-glass-blur: blur(16px) saturate(1.15);
  --depth-glass-line: rgba(0, 0, 0, .05);   /* 玻璃层细边（亮暗各一套，这里为亮色）*/
  --shadow-elevated: 0 4px 18px -8px rgba(0, 0, 0, .10);  /* 第 2 层阴影 */
  --shadow-glass:    0 1px 2px rgba(0, 0, 0, .04);         /* 第 3 层阴影（更轻）*/
  --shadow-sm: 0 4px 18px -8px rgba(0, 0, 0, .10);  /* 染色阴影，非纯黑 */
  --shadow-lg: 0 24px 60px -28px rgba(0, 0, 0, .18);

  /* ---- 字 ---- */
  /* HIG §3.1：系统字体栈。SF Pro Display 用于大字号（光学尺寸优化），SF Pro Text 用于正文；
     中文回退 PingFang SC（Apple 平台）/ 微软雅黑（Windows）——不在应用内嵌入系统字体文件 */
  --serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --sans:  -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;

  /* ---- 节奏 ---- */
  --wrap: 1280px;
  --gutter: clamp(20px, 4.5vw, 52px);
  --sec: clamp(84px, 11vw, 164px);
  --ease: cubic-bezier(.16, 1, .3, 1);


  /* ---- 体验层令牌（对标苹果的节奏与舒适度）---- */
  --radius-card: 16px;     /* 卡片（HIG §九：12–16px）*/
  --radius-img: 12px;      /* 图片 */
  --radius-pill: 980px;    /* 按钮 / 标签 */
  --lh-display: 1.12;      /* 超大标题行高（中文比拉丁文需要更松）*/
  --lh-title: 1.26;        /* 区块标题行高（中文多行需要更松）*/
  --lh-body: 1.62;         /* 正文行高（偏紧，阅读更稳） */
  --track-display: -.018em;
  --track-title: -.018em;
  --dur-fast: .2s;   /* HIG §7.2 微反馈 150–250ms */
  --dur: .3s;        /* HIG §7.2 过渡 250–400ms */
  --dur-slow: .4s;   /* HIG §7.2 上限 400ms */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 48px; --sp-6: 64px; --sp-7: 96px; --sp-8: 128px;

  /* ---- 字级（默认值；后台「设计设置」可整体调整，运行时由 JS 覆盖）---- */
  --fs-h1: clamp(1.875rem, 5vw, 4.125rem);   /* 30 → 66px */
  --fs-h2: clamp(1.5rem, 4.2vw, 3.5rem);      /* 24 → 56px */
  --fs-h3: clamp(1.125rem, 2.1vw, 1.5rem);    /* 18 → 24px */
  --fs-body: 1.0625rem;   /* 17px —— HIG Body 17pt 基准 */
  --fs-small: 0.8125rem;  /* 13px */
  --radius: 16px;   /* 与 --radius-card 同步，避免同名令牌歧义 */
}