/* ============================================================
   达观交付工作台 · 全局壳层 theme.css
   ------------------------------------------------------------
   2026-09-24：这一层原来叫 dark.css（深色令牌覆盖层）。令牌改版为「浅色多彩」后
   它不再覆盖任何颜色 —— 整套取值都在 tokens.css 里，改名 theme.css 是为了不再骗人。
   本文件只做三件事：引令牌、跨页过渡、页面底色与原生控件配色。
   组件样式见 app.css（原子）/ views.css（视图）/ console.css（工作台外壳皮肤）。
   ============================================================ */
@import url("tokens.css");

/* ============================================================
   页面之间的过渡（跨文档 View Transitions）
   ------------------------------------------------------------
   跳转不再硬切一下：旧页轻轻淡出、新页从下方浮上来。
   浏览器原生能力，**没有 JS、不改任何布局**；不支持它的浏览器直接忽略，
   退回原来的硬切（所以不会把老浏览器弄坏）。
   注意：这条要生效，起止两个页面都得声明 —— 所以 theme / console 两份皮肤
   各带一份，正好覆盖全站页面。尊重系统里的「减少动态效果」设置。
   ============================================================ */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: vt-out 160ms cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: vt-in 300ms cubic-bezier(.22, .8, .28, 1) both;
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-5px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(9px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* 浅色底：原生控件（输入框、滚动条、日期选择）跟着走浅色，否则会漏出白框黑字 */
html { color-scheme: light; background: var(--bg-page); }
body { background: var(--bg-page); }

/* 选中文本与滚动条：默认那套在浅灰底上太扎眼，收进色板 */
::selection { background: var(--accent-tint); color: var(--text-primary); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(16, 24, 40, .16); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(16, 24, 40, .28); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }