/* dsh-custom-css 示例样式表 —— 几个安全、跟随浅深主题的小改动。
 *
 * 怎么用：设置 → 通用 → 自定义 CSS → 「导入」选这个文件；
 *         或直接把它复制进 ~/.dsh/custom-css/ 后在下拉里选它。
 *
 * 三条刻意的做法：
 *   1. 只用 DSH 自己的设计变量（--dsw-alias-*），所以浅色/深色都成立，不必写分支；
 *   2. 不选构建哈希类名（如 hHd-Xa_footArea），DSH 升级后这些名字会变 —— 也就不会
 *      留下一堆永远不命中的死规则；
 *   3. 不写 !important：本文件改的都是「原本没被设定的东西」（选中色、滚动条、
 *      自定义属性动画），不需要与内置样式抢优先级。
 */

/* 1) 选中文字：品牌色的淡底，而不是系统默认蓝 */
::selection {
  background: color-mix(in srgb, var(--dsw-alias-brand-primary) 24%, transparent);
}

/* 2) 滚动条：细一点、跟随主题的描边色（WebKit 与 Firefox 各写一条） */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--dsw-alias-border-l4) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
  background-color: var(--dsw-alias-border-l4);
}
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--dsw-alias-label-dimmed);
}

/* 3) 数字与代码：等宽数字，长行不撑破容器 */
code,
pre {
  font-variant-numeric: tabular-nums;
  font-variant-ligatures: none;
}

/* 4) 自定义属性动画：先声明类型，浏览器才肯对 --x 做插值
 *    （不声明 @property 的话，关键帧之间会硬跳 —— 见 README 的「已知坑」）
 *    效果：页面内任意元素获得焦点时，视口边缘浮现一圈很淡的品牌色描边。 */
@property --dsh-example-glow {
  syntax: '<color>';
  inherits: true;
  initial-value: rgb(0 0 0 / 0%);
}
:root {
  --dsh-example-glow: rgb(0 0 0 / 0%);
}
:root:focus-within {
  --dsh-example-glow: color-mix(in srgb, var(--dsw-alias-brand-primary) 45%, transparent);
}
body {
  transition: --dsh-example-glow 240ms ease;
  box-shadow: inset 0 0 0 2px var(--dsh-example-glow);
}