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

@mixin theme($accent: color, $bg: color) {
    $accent-light: color.scale($accent, $lightness: 50%, $saturation: 30%);
    $accent-dark: color.scale($accent, $lightness: -40%, $saturation: -20%);

    @if color.channel($accent, "saturation", $space: hsl) == 0% {
        $accent-light: color.change($accent-light, $saturation: 0%);
    }

    --frog-pupil: #292f33;
    --frog-primary: #{$accent};
    --frog-secondary: #{$accent-light};
    --frog-nose: #{$accent-dark};
    --accent: #{$accent};
    --complement: #{color.complement($accent)};

    @for $i from 1 through 40 {
        $multiplier: 2.5%;

        @if color.channel($bg, "blackness", $space: hwb) > 50% {
            // Dark
            --g#{$i * 50}: #{hsl(color.channel($bg, "hue", $space: hsl), 0 * 1%, ($i - 1) * $multiplier)};
        } @else {
            // Light
            --g#{$i * 50}: #{hsl(color.channel($bg, "hue", $space: hsl), 0 * 1%, 100% - ($i - 1) * $multiplier)};
        }
    }

    $peak: 0;

    @if color.channel($bg, "blackness", $space: hwb) > 50% {
        $peak: 255;
    }

    @for $i from 1 through 20 {
        --a#{$i * 50}: #{rgba($peak, $peak, $peak, $i * 0.05)};
    }
}
