/* 覆盖层：部署方覆盖了强调色时，跟着强调色走的几个令牌由它派生（docs/design/ui-skins.md §5.3）。
   这里是单一来源：两面的 Vite 构建各拷一份进 internal/<面>/webui/assets（accent_sync_test 钉住
   两份产物相同，防的是只重建了一面）。加载顺序在皮肤之后，同特异性时它胜出。

   没覆盖时 <html> 上没有 data-accent，这里一条规则都不生效，页面就是皮肤写死的颜色。
   覆盖时 --ui-accent 对所有模式是同一个值，而一个颜色不可能在浅色和深色纸面上都够对比度，
   所以文字色、按钮字与深浅变体按模式从它派生。

   整个包在 @supports 里，条件写成实际用到的形式：只支持基础语法、不支持在通道里做运算的
   早期实现因此被排除。不支持时覆盖只作用于 --accent 本身，其余几个保持皮肤写死的值。
   两种写法不能放在同一个块里互为回退：自定义属性在解析时总是合法的，后写的那个总会胜出。

   文字色浅色把 L 压到至多 0.43，彩度按同一个比例压（c × 0.43 / l），但不压到 0.08 以下；深色把
   L 抬到至少 0.84、彩度至多 0.14。超出 sRGB 的颜色被浏览器逐通道截断，截出来的颜色与 L 说的
   亮度、色相都不同。深色下偏暗：#ff0000 在 max(l, 0.72) 时是 #ff4333，对纸本深色卡片 #393e53
   只有 3.07:1，L 抬到 0.82 也只有 3.79:1，所以深色要同时压彩度。浅色下只压 L，最艳的颜色截断后
   偏亮（#00ff00 在 min(l, 0.47) 时是 #007b00），色相也跟着走（#ea580c 在 min(l, 0.42) 时截成
   纯红 #9a0000）；给彩度定一个上限，又会把不同的强调色压成同一个（上限 0.14 时 #0000ff 与
   #1D4ED8 都是 #27499b）。L 与彩度同乘一个比例 k，等于线性 RGB 三个通道同乘 k³，原本在 sRGB
   里的颜色压完还在里面，不截断、色相不变，两个不同的强调色派生出来仍然不同（#0000ff 是
   #0000ef，#1D4ED8 是 #1741b6）。0.08 的下限给浅而淡的强调色：#7fdbff 按比例压完只剩 0.05，
   是一片灰蓝。
   界限由最难的纸面定：手绘的点阵（点色浅色 #d9d8d6、深色 #44484f，页面上的字压在点上）与
   signal、bento 顶栏下的光晕。scripts/skin-preview/accent-cube.py 在整个 sRGB 立方体上核对，
   最低 4.81:1（浅色）与 4.83:1（深色）；改了这里的公式或任何一套皮肤的纸面颜色，重跑它。

   按钮字按 WCAG 相对亮度取黑或白：低于 0.179（白字与黑字对比度相等的点，两边都是 4.58:1）
   取白，否则取黑，所以对任何强调色都至少 4.58:1。在 srgb-linear 里算精确亮度，不用 OKLab
   的 L 近似：#0071e3 的 L 是 0.563，按 L 判会给黑字（4.47:1，不过线）。
   --accent-strong 是另一种底色（主按钮悬停），它的字按同一个公式从它自己派生，不能沿用
   --accent-contrast：相对亮度略高于 0.179 的强调色取黑字，#767676 暗 0.08 之后是 #5f5f5f，黑字只剩 3.29:1。 */
@supports (color: oklch(from red min(l, 0.5) c h)) and (color: color(from red srgb-linear r g b)) {
  :root[data-accent] {
    --accent-text: oklch(from var(--accent) min(l, 0.43) min(c, max(c * 0.43 / max(l, 0.43), 0.08)) h);
    --accent-contrast: color(from var(--accent) srgb-linear
      clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)
      clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)
      clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1));
    --accent-strong: oklch(from var(--accent) calc(l - 0.08) c h);
    --accent-strong-contrast: color(from var(--accent-strong) srgb-linear
      clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)
      clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)
      clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1));
    --accent-tint: oklch(from var(--accent) l c h / 0.10);
    --accent-glow: oklch(from var(--accent) l c h / 0.16);
  }

  @media (prefers-color-scheme: dark) {
    :root[data-accent]:not([data-theme="light"]) {
      --accent-text: oklch(from var(--accent) max(l, 0.84) min(c, 0.14) h);
      --accent-contrast: color(from var(--accent) srgb-linear
        clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)
        clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)
        clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1));
      --accent-strong: oklch(from var(--accent) calc(l + 0.06) c h);
      --accent-strong-contrast: color(from var(--accent-strong) srgb-linear
        clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)
        clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)
        clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1));
      --accent-tint: oklch(from var(--accent) l c h / 0.14);
      --accent-glow: oklch(from var(--accent) l c h / 0.22);
    }
  }

  :root[data-accent][data-theme="dark"] {
    --accent-text: oklch(from var(--accent) max(l, 0.84) min(c, 0.14) h);
    --accent-contrast: color(from var(--accent) srgb-linear
      clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)
      clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)
      clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1));
    --accent-strong: oklch(from var(--accent) calc(l + 0.06) c h);
    --accent-strong-contrast: color(from var(--accent-strong) srgb-linear
      clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)
      clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)
      clamp(0, (0.179 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1));
    --accent-tint: oklch(from var(--accent) l c h / 0.14);
    --accent-glow: oklch(from var(--accent) l c h / 0.22);
  }
}