$lighter: oklch(95% 8% var(--base-hue));
$light:   oklch(90% 12% var(--base-hue));
$mid:     oklch(40% 20% var(--base-hue));
$dark:    oklch(20% 45% var(--base-hue));
$darker:  oklch(10% 40% var(--base-hue));

$dark-accent:  oklch(56% 40% calc(var(--base-hue) - 180));
$light-accent: oklch(90% 30% calc(var(--base-hue) - 180));

@function halfalpha($col) {
  @return color-mix(in srgb, #{$col} 50%, transparent);
}


@mixin color-var($name, $light, $dark: null) {
  @property #{$name} {
    syntax: "<color>";
    inherits: true;
    initial-value: #{$light};
  }
  :root {
    #{$name}: #{$light};
    @if $dark != null {
      @media (prefers-color-scheme: dark) { #{$name}: #{$dark}; }
    }
  }
}

@mixin apply-colors($fg, $bg, $accent: null) {
  --fg: #{$fg};
  --bg: #{$bg};
  @if $accent { --accent: #{$accent}; }

  color:      var(--fg);
  background: var(--bg);
}

@mixin inverted($padding: 0.5em) {
  @include apply-colors($fg: var(--counter-fg), $bg: var(--counter-bg),
                        $accent: var(--counter-accent));
  padding:    $padding;
}