/* ==========================================================================
   Apple 令牌层（v7.0.0）
   --------------------------------------------------------------------------
   这一层**只改令牌，不写组件规则**：把 v6 的「靛蓝 Soft UI」换成
   「黑白（偏白） · Apple × WordPress」—— 灰阶承担层级，彩度只留给三支语义色。

   加载顺序：tokens.css → … → soft-ui.css → apple-tokens.css → apple-ui.css → apple.css
   （必须排在 soft-ui.css 之后，靠后来的变量覆盖把拟物改成 Apple 式扁平+发丝线）

   设计约束（与 ui-v7-mono 实验版一致）：
   · 浅色：底 #f7f7f8（偏白，不是纯白）、面 #ffffff、文本 #1d1d1f / #6e6e73 / #8e8e93
   · 深色：底 #000000（纯黑）、面 #1c1c1e / #2c2c2e
   · 彩度只允许出现在 红 #c8342d / 琥珀 #9a6b00 / 绿 #0f7b3f（深色另有一套提亮值）
   · 圆角走 Apple 阶梯 6 / 8 / 10 / 14 / 20 + 胶囊 980
   · 位移类动效统一 iOS 曲线 cubic-bezier(0.32, 0.72, 0, 1)
   ========================================================================== */

/* ==========================================================================
   0. 字体：仿制版苹方（PingFang V7）
   --------------------------------------------------------------------------
   v7.0.1：站点不再「优先用系统字体」—— 无论 Windows / macOS / Linux / 安卓 / iOS，
   都统一加载部署方放在**项目根 font/ 目录**里的仿制苹方（服务端把 /font/** 静态映射过去，
   见 src/apps/serverApp.js）。

   · 家族名 'PingFang V7' 与 ui-v7-mono 实验版一致，便于对照排查；
   · 每个字重给两个候选文件名：ASCII 命名优先，其次原始命名（PingFang Regular_0.ttf）。
     浏览器会按顺序尝试，第一个 404 就自动试下一个 —— 部署方沿用哪种命名都能生效；
   · font-display: swap：字体没下载完先进系统字体，不阻塞首屏（33MB 全量字体的必要妥协）；
   · 三个字重 ≈ 33MB，浏览器只会下载页面真正用到的字重，并缓存 30 天（见 serverApp 的 Cache-Control）。
   ========================================================================== */
@font-face {
  font-family: 'PingFang V7';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    url('/font/pingfang-regular.ttf') format('truetype'),
    url('/font/PingFang Regular_0.ttf') format('truetype');
}

@font-face {
  font-family: 'PingFang V7';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:
    url('/font/pingfang-medium.ttf') format('truetype'),
    url('/font/PingFang Medium_0.ttf') format('truetype');
}

@font-face {
  font-family: 'PingFang V7';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    url('/font/pingfang-bold.ttf') format('truetype'),
    url('/font/PingFang Bold_0.ttf') format('truetype');
}

/* ==========================================================================
   1. 主题无关：字体、字号阶梯、圆角、动效、阴影基座
   ========================================================================== */
:root {
  /* ---------- 字体：仿制版苹方优先，系统字体只作为「字体文件缺失」时的兜底 ---------- */
  --font-sans: 'PingFang V7', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue',
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  --font-mono: 'PingFang V7', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, 'Cascadia Mono',
    Consolas, 'Liberation Mono', monospace;

  /* ---------- 字号阶梯：对齐 iOS Dynamic Type（11/13/15/16/17/20/22/28/34） ---------- */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 16px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --text-4xl: 34px;

  /* ---------- 圆角：Apple 阶梯 ---------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 980px;
  /* 新增（v7）：Apple 专用补充值，旧代码不使用，皮肤层与组件层使用 */
  --radius-sheet: 14px;
  --radius-group: 10px;
  --hairline: 0.5px;

  /* ---------- 动效：iOS 曲线（抽屉/弹层那条）+ 更短的时长 ---------- */
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
  --ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-instant: 100ms;
  --dur-fast: 180ms;
  --dur-normal: 250ms;
  --dur-slow: 350ms;
  --dur-slower: 450ms;
  /* Apple 分层时长：遮罩 150 / 面板进 200 / 面板出 150 / 底部抽屉 250 / 通知 200 */
  --m-scrim: 150ms;
  --m-panel-in: 200ms;
  --m-panel-out: 150ms;
  --m-sheet: 250ms;
  --m-toast: 200ms;
  --m-press: 100ms;
  --stagger-step: 40ms;

  /* ---------- 层级：不变，但与组件层共用的弹层基座 ---------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-tooltip: 500;

  /* ---------- 布局尺寸：Apple 更窄的侧栏 + 更矮的顶栏 ---------- */
  --sidebar-width: 260px;
  --sidebar-width-collapsed: 76px;
  --topbar-height: 56px;
  --content-max: 1440px;

  /* ---------- 材质：浮层统一毛玻璃 ---------- */
  --material-blur: blur(20px) saturate(180%);
  --material-blur-thin: blur(12px) saturate(160%);
}

/* ==========================================================================
   2. 浅色主题：偏白灰底 + 白面 + 三支语义色
   ========================================================================== */
:root,
[data-theme='light'] {
  color-scheme: light;

  /* ---------- 品牌色阶整体降为灰阶：主按钮 = 纯黑（WordPress 后台 + Apple 的黑白版） ---------- */
  --brand-50: #f7f7f8;
  --brand-100: #f0f0f2;
  --brand-200: #e5e5ea;
  --brand-300: #d1d1d6;
  --brand-400: #a1a1a6;
  --brand-500: #1d1d1f;
  --brand-600: #111112;
  --brand-700: #000000;
  --brand-800: #000000;
  --brand-900: #000000;

  /* 装饰色同样降为中性灰（不允许出现品牌紫/粉/青） */
  --accent-violet: #48484a;
  --accent-pink: #8e8e93;
  --accent-cyan: #a1a1a6;
  --accent-emerald: #0f7b3f;
  --accent-amber: #9a6b00;
  --accent-rose: #c8342d;

  --fill-brand: #1d1d1f;
  --fill-brand-strong: #000000;
  --fill-brand-soft: #f5f5f7;
  --tint-brand: color-mix(in srgb, #1d1d1f 8%, transparent);
  --tint-brand-strong: color-mix(in srgb, #1d1d1f 14%, transparent);
  --gradient-brand: #1d1d1f;
  --gradient-brand-soft: #f5f5f7;

  /* ---------- 语义色：iOS 系统色的黑白版（只这三支允许有彩度） ---------- */
  --success: #0f7b3f;
  --success-soft: rgba(15, 123, 63, 0.12);
  --warning: #9a6b00;
  --warning-soft: rgba(154, 107, 0, 0.14);
  --danger: #c8342d;
  --danger-soft: rgba(200, 52, 45, 0.12);
  --info: #6e6e73;
  --info-soft: rgba(110, 110, 115, 0.12);

  /* ---------- 底色/面色 ---------- */
  --bg-app: #f7f7f8;
  --bg-app-gradient: none;
  --bg-surface: #ffffff;
  --bg-surface-raised: #ffffff;
  --bg-surface-sunken: #f0f0f2;
  --bg-muted: #f5f5f7;
  --bg-hover: rgba(0, 0, 0, 0.035);
  --bg-active: rgba(0, 0, 0, 0.06);
  --bg-inverse: #1d1d1f;

  --bg-glass: rgba(255, 255, 255, 0.72);
  --bg-glass-strong: rgba(255, 255, 255, 0.86);

  /* ---------- 文本 ---------- */
  --text-primary: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary: #8e8e93;
  --text-inverse: #ffffff;
  --text-on-brand: #ffffff;

  /* ---------- 描边：发丝线（Apple 用 0.5px 而不是阴影分层） ---------- */
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-default: rgba(0, 0, 0, 0.12);
  --border-strong: rgba(0, 0, 0, 0.2);

  /* ---------- 阴影：Apple 式「极浅 + 大扩散」，去掉拟物的双向高光 ---------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.14);
  --shadow-brand: 0 2px 8px rgba(0, 0, 0, 0.18);

  /* 凹陷全部压平：输入框改用 1px 描边，不再有内阴影 */
  --shadow-inset: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-inset-sm: inset 0 0 0 1px rgba(0, 0, 0, 0.03);
  --shadow-pressed: inset 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-focus: 0 0 0 4px rgba(0, 0, 0, 0.12);
  --shadow-glow-brand: none;

  /* ---------- 外壳：毛玻璃（导航栏 / 侧栏） ---------- */
  --sidebar-bg: rgba(255, 255, 255, 0.76);
  --sidebar-border: rgba(0, 0, 0, 0.08);
  --topbar-bg: rgba(255, 255, 255, 0.78);

  --skeleton-base: rgba(0, 0, 0, 0.06);
  --skeleton-shine: rgba(255, 255, 255, 0.9);

  --scrollbar-thumb: rgba(0, 0, 0, 0.2);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.34);

  /* soft-ui.css 用这两个变量组合拟物阴影 —— 置为透明即彻底压平 */
  --neu-highlight: transparent;
  --neu-shadow: transparent;
}

/* ==========================================================================
   3. 深色主题：纯黑底 + #1c1c1e 面（Apple 夜间）
   ========================================================================== */
[data-theme='dark'] {
  color-scheme: dark;

  --brand-50: #2c2c2e;
  --brand-100: #3a3a3c;
  --brand-200: #48484a;
  --brand-300: #636366;
  --brand-400: #8e8e93;
  --brand-500: #f5f5f7;
  --brand-600: #ffffff;
  --brand-700: #ffffff;
  --brand-800: #ffffff;
  --brand-900: #ffffff;

  --accent-violet: #aeaeb2;
  --accent-pink: #8e8e93;
  --accent-cyan: #636366;
  --accent-emerald: #3fc46f;
  --accent-amber: #e0b03a;
  --accent-rose: #ff6b63;

  --fill-brand: #f5f5f7;
  --fill-brand-strong: #ffffff;
  --fill-brand-soft: #2c2c2e;
  --tint-brand: color-mix(in srgb, #ffffff 12%, transparent);
  --tint-brand-strong: color-mix(in srgb, #ffffff 18%, transparent);
  --gradient-brand: #f5f5f7;
  --gradient-brand-soft: #2c2c2e;

  --success: #3fc46f;
  --success-soft: rgba(63, 196, 111, 0.18);
  --warning: #e0b03a;
  --warning-soft: rgba(224, 176, 58, 0.18);
  --danger: #ff6b63;
  --danger-soft: rgba(255, 107, 99, 0.18);
  --info: #98989d;
  --info-soft: rgba(152, 152, 157, 0.18);

  --bg-app: #000000;
  --bg-app-gradient: none;
  --bg-surface: #1c1c1e;
  --bg-surface-raised: #2c2c2e;
  --bg-surface-sunken: #0c0c0d;
  --bg-muted: #2c2c2e;
  --bg-hover: rgba(255, 255, 255, 0.06);
  --bg-active: rgba(255, 255, 255, 0.12);
  --bg-inverse: #f5f5f7;

  --bg-glass: rgba(28, 28, 30, 0.72);
  --bg-glass-strong: rgba(28, 28, 30, 0.88);

  --text-primary: #f5f5f7;
  --text-secondary: #98989d;
  --text-tertiary: #8e8e93;
  --text-inverse: #000000;
  --text-on-brand: #000000;

  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-default: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.26);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-xl: 0 28px 68px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-brand: 0 2px 10px rgba(0, 0, 0, 0.7);

  --shadow-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-inset-sm: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-pressed: inset 0 1px 3px rgba(0, 0, 0, 0.6);
  --shadow-focus: 0 0 0 4px rgba(255, 255, 255, 0.18);
  --shadow-glow-brand: none;

  --sidebar-bg: rgba(28, 28, 30, 0.8);
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --topbar-bg: rgba(20, 20, 22, 0.82);

  --skeleton-base: rgba(255, 255, 255, 0.08);
  --skeleton-shine: rgba(255, 255, 255, 0.16);

  --scrollbar-thumb: rgba(255, 255, 255, 0.22);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.36);

  --neu-highlight: transparent;
  --neu-shadow: transparent;
}

/* 减少动效：把新加的分层时长也一起压掉（否则 Apple 层动效会「漏」出来） */
@media (prefers-reduced-motion: reduce) {
  :root {
    --m-scrim: 1ms;
    --m-panel-in: 1ms;
    --m-panel-out: 1ms;
    --m-sheet: 1ms;
    --m-toast: 1ms;
    --m-press: 1ms;
  }
}