/* ==========================================================================
   tokens.css — 设计令牌（亮/暗成对）
   参照：纯苹方字体栈 + 苹果系统色 + 连续小圆角阶梯 + 三档动效时长
   ========================================================================== */

:root {
  color-scheme: light;

  /* 字体：苹方优先，第二梯队系统 UI 字体，最后兜底雅黑 */
  --site-font: "PingFang SC", "PingFang HK", "PingFang TC", -apple-system,
    BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Microsoft YaHei", sans-serif;
  --num-font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    "PingFang SC", "Microsoft YaHei", sans-serif;

  /* 底色与面 */
  --store-bg: #f5f5f7;
  --store-bg-soft: #eef0f4;
  --store-surface: #ffffff;
  --store-surface-2: #ffffff;
  --store-surface-3: #f7f7fa;
  --store-surface-sunken: #ececf0;

  /* 文字 */
  --store-text: #1d1d1f;
  --store-text-strong: #0b0b0f;
  --store-secondary: #86868b;
  --store-subtle: #6e6e73;
  --store-on-accent: #ffffff;

  /* 线 */
  --store-border: #e5e5ea;
  --store-border-soft: #eeeef2;
  --store-border-strong: #d8d8de;

  /* 强调与状态 */
  --store-blue: #087cff;
  --store-blue-strong: #0060df;
  --store-blue-soft: #e9f2ff;
  --store-green: #23ad78;
  --store-green-soft: #e6f7f0;
  --store-red: #e45666;
  --store-red-soft: #fdecee;
  --store-violet: #6f48ff;
  --store-violet-soft: #f0ecff;
  --store-cyan: #20c6dc;
  --store-gold: #b8860b;
  --store-gold-soft: #fdf3e0;

  /* 玻璃与投影 */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.86);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-inner: rgba(255, 255, 255, 0.85);
  --glass-shadow: 0 10px 34px rgba(15, 20, 40, 0.13);
  --card-shadow: 0 4px 16px rgba(15, 20, 40, 0.055);
  --card-shadow-hover: 0 16px 38px rgba(15, 20, 40, 0.11);
  --sheet-shadow: 0 -14px 48px rgba(10, 14, 30, 0.24);
  --header-bg: rgba(245, 245, 247, 0.78);

  /* 圆角：一条连续小阶梯，别乱开 */
  --r-8: 8px;
  --r-10: 10px;
  --r-11: 11px;
  --r-12: 12px;
  --r-13: 13px;
  --r-14: 14px;
  --r-16: 16px;
  --r-18: 18px;
  --r-pill: 999px;
  --r-sheet: 28px;
  --r-tabbar: 36px;

  /* 动效：三档时长 + 两条曲线 */
  --motion-fast: 0.22s;
  --motion-control: 0.28s;
  --motion-page: 0.36s;
  --ease-ios: cubic-bezier(0.22, 0.82, 0.32, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-press: cubic-bezier(0.2, 0.75, 0.25, 1);

  /* 布局 */
  --page-max: 1000px;
  --gutter: 16px;
  --tabbar-h: 58px;
  --tabbar-w: 372px;
  --tab-count: 2;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* 深色：与亮色一一对应，一个都不许少 */
html[data-store-theme="dark"] {
  color-scheme: dark;

  --store-bg: #1c1c1e;
  --store-bg-soft: #161618;
  --store-surface: #252528;
  --store-surface-2: #2c2c2f;
  --store-surface-3: #232326;
  --store-surface-sunken: #2a2a2d;

  --store-text: #f5f5f7;
  --store-text-strong: #ffffff;
  --store-secondary: #98989d;
  --store-subtle: #98989d;
  --store-on-accent: #ffffff;

  --store-border: #3a3a3f;
  --store-border-soft: #323236;
  --store-border-strong: #46464c;

  --store-blue: #0a84ff;
  --store-blue-strong: #3f9dff;
  --store-blue-soft: rgba(10, 132, 255, 0.16);
  --store-green: #30d158;
  --store-green-soft: rgba(48, 209, 88, 0.16);
  --store-red: #ff453a;
  --store-red-soft: rgba(255, 69, 58, 0.16);
  --store-violet: #9b7bff;
  --store-violet-soft: rgba(155, 123, 255, 0.18);
  --store-cyan: #40d0e0;
  --store-gold: #e0b054;
  --store-gold-soft: rgba(224, 176, 84, 0.16);

  --glass-bg: rgba(38, 38, 42, 0.68);
  --glass-bg-strong: rgba(44, 44, 48, 0.86);
  --glass-border: rgba(255, 255, 255, 0.11);
  --glass-inner: rgba(255, 255, 255, 0.14);
  --glass-shadow: 0 12px 38px rgba(0, 0, 0, 0.5);
  --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  --card-shadow-hover: 0 16px 38px rgba(0, 0, 0, 0.44);
  --sheet-shadow: 0 -14px 48px rgba(0, 0, 0, 0.6);
  --header-bg: rgba(28, 28, 30, 0.76);
}

/* 选中/焦点统一用外圈，不动 border，避免布局跳动 */
:root {
  --focus-ring: 0 0 0 3px rgba(8, 124, 255, 0.22);
  --select-ring: 0 0 0 3px rgba(8, 124, 255, 0.14);
}
html[data-store-theme="dark"] {
  --focus-ring: 0 0 0 3px rgba(10, 132, 255, 0.32);
  --select-ring: 0 0 0 3px rgba(10, 132, 255, 0.24);
}