// 通用 hsla 函数
x-hsla(h = var(--hue), s = var(--sat), l = var(--light), a = var(--alpha))
  return unquote('hsla(%s %s %s / %s)' % (h s l a))

// 设置不同透明度的主题色
x-theme-alpha(a = 1)
  return unquote('hsla(%s %s %s / %s)' % (var(--hue) var(--sat) var(--light) a))

// 设置基础主题色
x-set-theme-with-color($color)
  --hue: hue($color)
  --sat: saturation($color)
  --light: lightness($color)
  --alpha: alpha($color)
  --theme: x-theme-alpha(1)
  --theme-a10: x-theme-alpha(0.1)
  --theme-a20: x-theme-alpha(0.2)
  --theme-a30: x-theme-alpha(0.3)

// 设置链接颜色
x-set-link-with-color($color)
  $hue = hue($color)
  $sat = saturation($color)
  $light = lightness($color)
  --link: x-hsla($hue, $sat, $light, 1)
  --link-a20: x-hsla($hue, $sat, $light, 0.2)

// 设置背景色
x-set-bg-colors($scheme)
  $hue = $c-base-hue
  $sat = 0%
  $light = $scheme == 'dark' ? 0% : 100%
  --bg-a20: x-hsla($hue, $sat, $light, 0.2)
  --bg-a50: x-hsla($hue, $sat, $light, 0.5)
  --bg-a60: x-hsla($hue, $sat, $light, 0.6)
  --bg-a75: x-hsla($hue, $sat, $light, 0.75)
  --bg-a100: x-hsla($hue, $sat, $light, 1)

// 设置文本及相关色
x-set-text-colors($scheme, $p0 = 1, $p1 = 0.8, $p2 = 0.7, $p3 = 0.5, $p4 = 0.4)
  $hue = $c-base-hue
  $sat = 0%
  $light = $scheme == 'dark' ? 100% : 0%
  
  --text: x-hsla($hue, $sat, $light, $p0)
  --text-reverse: x-hsla($hue, $sat, $scheme == 'dark' ? 0% : 100%, $p0)
  --text-p1: x-hsla($hue, $sat, $light, $p1)
  --text-p2: x-hsla($hue, $sat, $light, $p2)
  --text-p3: x-hsla($hue, $sat, $light, $p3)
  --text-p4: x-hsla($hue, $sat, $light, $p4)

  --text-meta: x-hsla($hue, $sat, $light, 0.2)
  --text-code: x-hsla($hue, $sat, $light, 0.9)

  --text-a10: x-hsla($hue, $sat, $light, 0.1)
  --text-a20: x-hsla($hue, $sat, $light, 0.2)

  $sat = $scheme == 'dark' ? 24% : 50%
  $light = $scheme == 'dark' ? 72% : 12%
  $alpha = $scheme == 'dark' ? 0.08 : 0.04
  --block: x-hsla($hue, $sat, $light, $alpha)
  --block-border: x-hsla($hue, $sat, $light, $alpha * 1.5)


// ========== 通用主题色渐变 ==========
// 约定：渐变颜色通过 --item-theme 提供，未设置时回退到站点主题色 var(--theme)；
// 淡色变体为 --item-theme-light（默认与白色混合 50%）；角度默认取 style.gradient.angle。
// 注意：局部覆盖 --item-theme 的元素需同时设置 --item-theme-light（如 x-theme-light()），
// 否则淡色变体仍沿用 :root 上的主题色。
// 用法示例：
//   .foo
//     --item-theme: #1BCDFC                            // 可选，默认使用站点主题色
//     background: x-theme-gradient()                   // 右上角淡色 → 左下角主色，停止点 20% / 60%
//     background: x-theme-gradient(30%, 70%, 25%)      // 自定义停止点与淡色比例
// 图标渐变（SVG）：元素内放置 <svg class="grad-def">…<linearGradient …/></svg>，
// 并设置 --item-grad:url(#渐变id)，然后对子元素使用 fill:var(--item-grad)。
x-theme-light($color = unquote('var(--item-theme)'), $ratio = 50%)
  return unquote('color-mix(in srgb, %s %s, #fff)' % ($color $ratio))

x-theme-gradient($color = unquote('var(--item-theme)'), $start = 20%, $end = 60%, $light-ratio = 50%, $angle = convert(hexo-config('style.gradient.angle')) or 225deg)
  $light = x-theme-light($color, $light-ratio)
  return unquote('linear-gradient(%s, %s %s, %s %s)' % ($angle $light $start $color $end))

// ---------------- apply theme ----------------
// 设置浅色模式
dynamic-theme-light()
  $hue = $c-base-hue
  --background: x-hsla($hue, 20%, 98%, 1)
  --card: $site-background-image ? hsla(white, 0.5) : white

  x-set-bg-colors('light')
  x-set-text-colors('light')

// 设置深色模式
dynamic-theme-dark()
  $hue = $c-base-hue
  --background: x-hsla($hue, 8%, 12%, 1)
  @media screen and (max-width: $device-mobile-max)
    --background: black
  --card: $site-background-image ? hsla(white, 0.25) : x-hsla($hue, 10%, 24%, 1)

  x-set-bg-colors('dark')
  x-set-text-colors('dark')
  --text-code: x-hsla(20, 75, 60, 1)


:root
  // 主题色
  x-set-theme-with-color($c-theme)
  // 强调色
  --accent: $c-accent
  // 链接
  x-set-link-with-color($c-link)
  // 通用渐变颜色（局部可用 --item-theme 覆盖）
  --item-theme: var(--theme)
  --item-theme-light: x-theme-light()

  // dynamic colors
  dynamic-theme-light()


:root:not([data-theme])
  @media (prefers-color-scheme: dark)
    dynamic-theme-dark()


:root[data-theme="light"]
  dynamic-theme-light()
:root[data-theme="dark"]
  dynamic-theme-dark()