/*
  theme.tokens.css — 主题 token 基座 + 全局布局/重置
  职责：定义所有主题共享的结构性 token（圆角/间距/层级/动效时长）与基础布局；
        颜色/字体由 palettes.css 与 theme-*.css 覆盖。切主题只换变量不改结构。
  依赖：无（最先加载）
  被调用：index.html；所有 /ui 组件复用这里的 .card/.btn/.row 等基类
*/

/* ---------- 结构 token（主题无关） ---------- */
:root{
  --r-sm:10px; --r:16px; --r-lg:22px; --r-pill:980px;
  --gap:12px; --pad:16px;
  --tap:44px;                 /* 最小可点尺寸 */
  --dur-fast:160ms; --dur:240ms; --dur-slow:380ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --app-max:448px;
  --nav-h:64px;
  --z-nav:40; --z-sheet:60; --z-toast:80; --z-fx:90;
}

/* 字体密度（data-density）：std 默认 / cozy 圆润 / compact 紧凑 */
:root[data-density="std"]{ --fs:15px; --lh:1.5; --pad:16px; }
:root[data-density="cozy"]{ --fs:16px; --lh:1.62; --pad:18px; }
:root[data-density="compact"]{ --fs:14px; --lh:1.4; --pad:13px; }

/* ---------- 重置 ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro","PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  font-size:var(--fs); line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer}
input{font-family:inherit}
img,svg{display:block}

/* ---------- 应用容器 ---------- */
.app{
  max-width:var(--app-max); margin:0 auto; min-height:100vh;
  position:relative; padding-bottom:calc(var(--nav-h) + 18px);
  background:var(--bg);
  overflow-x:hidden;
}
.boot{display:flex;align-items:center;justify-content:center;height:80vh;color:var(--sub);font-size:16px}

/* 屏幕切换 */
.screen{display:none;animation:fade var(--dur) var(--ease)}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 通用基类 ---------- */
.wrap{padding:8px var(--pad) 18px}
.row{display:flex;align-items:center;gap:var(--gap)}
.col{display:flex;flex-direction:column;gap:var(--gap)}
.spread{justify-content:space-between}
.center{justify-content:center;text-align:center}
.grow{flex:1}
.muted{color:var(--sub)}
.h1{font-size:22px;font-weight:800;letter-spacing:-.4px;margin:0}
.h2{font-size:17px;font-weight:700;margin:0}
.tiny{font-size:12px}

.card{
  background:var(--card); border-radius:var(--r);
  padding:16px; box-shadow:var(--sh); border:1px solid var(--line);
}
.btn{
  border:none; border-radius:var(--r); padding:13px 18px;
  font-size:15px; font-weight:700; color:var(--on-accent);
  background:var(--accent); box-shadow:var(--sh-accent);
  transition:transform var(--dur-fast) var(--ease), filter var(--dur-fast);
}
.btn:active{transform:scale(.96)}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:var(--sh);border:1px solid var(--line)}
.btn.brand{background:var(--brand);color:var(--on-brand);box-shadow:var(--sh-brand)}
.btn.block{display:block;width:100%}
.btn.lg{padding:16px 20px;font-size:16px;border-radius:var(--r-lg)}
.iconbtn{width:38px;height:38px;border:none;background:var(--card);border-radius:50%;
  font-size:17px;box-shadow:var(--sh);color:var(--ink);display:flex;align-items:center;justify-content:center}

.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-pill);
  background:var(--chip);color:var(--ink);font-size:13px;font-weight:600;border:1px solid var(--line)}

/* ---------- 底部导航 ---------- */
.nav{
  position:fixed; left:50%; transform:translateX(-50%); bottom:0;
  width:100%; max-width:var(--app-max); height:var(--nav-h);
  display:flex; background:var(--nav-bg); backdrop-filter:blur(14px);
  border-top:1px solid var(--line); z-index:var(--z-nav);
  padding-bottom:env(safe-area-inset-bottom);
}
.nav button{
  flex:1; border:none; background:none; color:var(--sub);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:11px; font-weight:600;
}
.nav button .ni{font-size:21px;line-height:1;transition:transform var(--dur-fast) var(--ease)}
.nav button.on{color:var(--accent)}
.nav button.on .ni{transform:translateY(-2px) scale(1.12)}

/* ---------- toast ---------- */
.toast-wrap{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + 16px);z-index:var(--z-toast);
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:var(--r-pill);
  font-size:14px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.3);animation:toastIn var(--dur) var(--ease)}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- 弹层 sheet ---------- */
.mask{position:fixed;inset:0;background:rgba(8,10,24,.55);z-index:var(--z-sheet);
  display:none;align-items:flex-end;justify-content:center;backdrop-filter:blur(3px)}
.mask.show{display:flex}
.sheet{background:var(--card);width:100%;max-width:var(--app-max);border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:18px var(--pad) calc(22px + env(safe-area-inset-bottom));animation:up var(--dur) var(--ease);max-height:88vh;overflow:auto}
@keyframes up{from{transform:translateY(24px);opacity:.5}to{transform:none;opacity:1}}

/* 无障碍：减少动效 */
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}