/* ============================================================
   myutil · Apple 设计语言令牌（doc/设计.md 的 token 化落地）
   ------------------------------------------------------------
   - 所有页面引用本文件，颜色/圆角/阴影只允许经 CSS 变量取值
   - 光照模式：Pure White 卡片 + Parchment 页面底 + Action Blue
   - 暗色模式：由设计稿近黑瓦片阶梯（#1d1d1f / #252527 / #2a2a2c）映射
   - 交互三态：Action Blue 填充 / Focus Ring #0071e3 / 按下 scale(.95)
   - 全系统唯一投影 --shadow-product，仅可用于产品化大图（代码截图等）
   ============================================================ */

:root {
  /* ---------- 字体 ---------- */
  /* 显示级（≥19px 标题）；正文/UI；等宽。macOS/iOS 上解析为真 SF Pro */
  --font-display: "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-text: "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace;

  /* 品牌字距：显示尺寸负字距（Apple tight），小字号禁止负字距 */
  --track-display: -0.02em;
  --track-body: -0.01em;

  /* ---------- 品牌与强调色 ----------
     全站唯一交互色。--link 在暗色下切换为 Sky Link Blue（设计稿 {colors.primary-on-dark}）*/
  --blue: #0066cc;              /* Action Blue：按钮填充、选中态 */
  --blue-focus: #0071e3;        /* 键盘焦点环（Focus Blue） */
  --blue-hover: #005ba9;        /* Action Blue 加深一档（按下前悬停） */
  --blue-active: #004a8c;       /* Action Blue 加深两档（按下） */
  --blue-on-dark: #2997ff;      /* Sky Link Blue：仅暗色面可用 */
  --link: var(--blue);
  --link-wash: rgba(0, 102, 204, .08);   /* 选中行 / 激活页签的蓝色薄雾 */

  /* ---------- 表面 ---------- */
  --surface: #ffffff;           /* 卡片 / 面板（Pure White） */
  --canvas: #f5f5f7;            /* 页面底（Parchment） */
  --pearl: #fafafc;             /* 次级按钮填充、代码槽（Pearl） */
  --tile-1: #272729;
  --tile-2: #2a2a2c;
  --tile-3: #252527;
  --nav-bg: #000000;            /* global-nav 纯黑条（唯一纯黑） */

  /* ---------- 文本 ---------- */
  --ink: #1d1d1f;               /* Near-Black Ink：标题与正文 */
  --ink-strong: #000000;
  --ink-80: #333333;            /* Pearl 面上的正文 */
  --ink-48: #7a7a7a;            /* 占位、微法律文本 */
  --on-dark: #f5f5f7;           /* 黑条上的主文本 */
  --muted-on-dark: rgba(255, 255, 255, .62);  /* 黑条次级文本 */

  /* ---------- 描边（发丝线） ---------- */
  --hairline: rgba(0, 0, 0, .08);    /* 工具卡细边框 {colors.hairline} */
  --hairline-soft: rgba(0, 0, 0, .05); /* 面板内分隔（divider soft） */

  /* ---------- 状态色（Apple 系统色的可达对比版） ---------- */
  --ok: #248a3d;                --ok-wash: rgba(52, 199, 89, .12);
  --err: #d70015;               --err-wash: rgba(255, 59, 48, .10);
  --warn: #b25000;              --warn-wash: rgba(255, 149, 0, .13);

  /* diff 语义色 */
  --diff-del: #ffe5e3;          --diff-ins: #e4f7e9;
  --diff-del-word: #ffc9c4;     --diff-ins-word: #a9e8b6;

  /* ---------- 圆角（不许混用其他档位） ---------- */
  --r-none: 0px;
  --r-xs: 5px;                  /* 徽标碎圆角 */
  --r-sm: 8px;                  /* 紧凑工具件 / 行内图卡 */
  --r-md: 11px;                 /* Pearl 胶囊按钮 */
  --r-lg: 18px;                 /* 工具卡 / 面板 */
  --r-pill: 9999px;             /* 主 CTA / 搜索框 / 配置片 */

  /* ---------- 阴影：全系统唯一投影，只给产品图 ---------- */
  --shadow-product: 3px 5px 30px rgba(0, 0, 0, .22);

  /* ---------- 编辑器 / 代码 ---------- */
  --code-bg: var(--pearl);
  --code-fg: var(--ink);
  --caret: var(--blue);
  --selection: rgba(0, 102, 204, .15);

  /* ---------- 其他 ---------- */
  --scroll-thumb: #d2d2d7;
  --scroll-thumb-hover: #b8b8bf;
  --backdrop-blur: saturate(180%) blur(20px);   /* 设计稿毛玻璃基线 */

  color-scheme: light dark;
}

/* ============================================================
   暗色模式：html[data-theme="dark"]（theme.js 写入）
   由瓦片阶梯映射出暗色三度表面
   ============================================================ */
html[data-theme="dark"] {
  color-scheme: dark;

  --surface: #252527;           /* 卡片 = tile-3（抬升感由更亮档位给悬停） */
  --canvas: #1d1d1f;            /* 页面底（Ink 同值，苹果黑） */
  --pearl: #2a2a2c;             /* 次级填充 = tile-2 */
  --nav-bg: #000000;

  --blue: #0066cc;              /* 填充类交互在暗面上仍用 Action Blue */
  --blue-focus: #0071e3;
  --blue-hover: #0071e3;
  --blue-active: #166ba8;
  --link: var(--blue-on-dark);  /* 文本链接换 Sky Link Blue */
  --link-wash: rgba(41, 151, 255, .14);

  --ink: #f5f5f7;
  --ink-strong: #ffffff;
  --ink-80: #d2d2d7;
  --ink-48: #98989d;
  --on-dark: #f5f5f7;
  --muted-on-dark: rgba(255, 255, 255, .62);

  --hairline: rgba(255, 255, 255, .10);
  --hairline-soft: rgba(255, 255, 255, .06);

  --ok: #30d158;                --ok-wash: rgba(48, 209, 88, .16);
  --err: #ff453a;               --err-wash: rgba(255, 69, 58, .15);
  --warn: #ff9f0a;              --warn-wash: rgba(255, 159, 10, .16);

  --diff-del: rgba(255, 69, 58, .12);   --diff-ins: rgba(48, 209, 88, .13);
  --diff-del-word: rgba(255, 69, 58, .34); --diff-ins-word: rgba(48, 209, 88, .36);

  --code-fg: #d6d6da;
  --caret: var(--blue-on-dark);
  --selection: rgba(41, 151, 255, .30);

  --scroll-thumb: #48484a;
  --scroll-thumb-hover: #575759;
}

/* ============================================================
   全局基础件（每个 iframe 文档独立生效）
   ============================================================ */

/* 发丝线滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
::-webkit-scrollbar-corner { background: transparent; }

/* 选区：单色蓝薄雾 */
::selection { background: var(--selection); }

/* 焦点环：Focus Blue，2px 实线（键盘可达性统一出口） */
:focus-visible {
  outline: 2px solid var(--blue-focus);
  outline-offset: 2px;
}

/* 按压微交互：系统统一的 scale(0.95) */
.t-pressable:active,
button:not(:disabled):active { transform: scale(.97); }

/* 尊重减弱动态偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}