@use "sass:color";
@use "sass:math";

{% assign color       = include.color       %}
{% assign theme_color = include.theme_color %}

html {
  --accent-color: {{ color }};
  --accent-color-faded: color.adjust({{ color }}, $alpha: -0.5);
  --accent-color-highlight: color.adjust({{ color }}, $alpha: -0.9);
  --accent-color-darkened: color.adjust({{ color }}, $lightness: -7.5%);
  {% if site.github and site.pivoine.dart_sass_2_compat != true %}
  --dark-mode-body-bg: #{hsl(color.channel({{ theme_color }}, "hue", $space: hsl), math.div(color.channel({{ theme_color }}, "saturation", $space: hsl), 8), 17.5%)};
  --dark-mode-border-color: #{hsl(color.channel({{ theme_color }}, "hue", $space: hsl), math.div(color.channel({{ theme_color }}, "saturation", $space: hsl), 8), 22.5%)};
  {% else %}
  --dark-mode-body-bg: #{hsl(hue({{ theme_color }}), calc(saturation({{ theme_color }}) / 8), 17.5%)};
  --dark-mode-border-color: #{hsl(hue({{ theme_color }}), calc(saturation({{ theme_color }}) / 8), 22.5%)};
  {% endif %}
}