@use "sass:color";
@use "sass:string";
@use "sass:map";

// Colors
//

:root {
    @each $color-key, $color-value in $colors {
        @if not (str-index($color-key, '0')) {
            $h: color.hue($color-value);
            $s: color.saturation($color-value);
            $l: color.lightness($color-value);

            --color--#{$color-key}--h: #{$h};
            --color--#{$color-key}--s: #{$s};
            --color--#{$color-key}--l: #{$l};
            --color--#{$color-key}: hsl(var(--color--#{$color-key}--h), var(--color--#{$color-key}--s), var(--color--#{$color-key}--l));
        }
    }

    @each $shade-key, $shade-value in $shades {
        $color-key: string.slice($shade-key, 0, string.length($shade-key) - 3);
        $color-value: map.get($colors, $color-key);

        $shade: string.slice($shade-key, string.length($shade-key) - 1);

        $shade-h: color.hue($shade-value);
        $shade-s: color.saturation($shade-value);
        $shade-l: color.lightness($shade-value);
        $color-l: color.lightness($color-value);

        --color--#{$shade-key}-h: var(--color--#{$color-key}--h);
        --color--#{$shade-key}-s: var(--color--#{$color-key}--s);
        --color--#{$shade-key}-l: calc(var(--color--#{$color-key}--l) + #{$shade-l - $color-l});
        --color--#{$shade-key}: hsl(var(--color--#{$shade-key}-h) var(--color--#{$shade-key}-s) var(--color--#{$shade-key}-l));
    }

    --contrast-color-for-light-background: #{$contrast-color-for-light-background};
    --contrast-color-for-dark-background: #{$contrast-color-for-dark-background};
}