@use 'sass:list';
@use 'sass:map';
@use 'sass:math';
@use 'iro-sass/src/props';
@use 'iro-sass/src/easing';
@use 'iro-design/src/functions' as fn;

$themes-spec: (
    --light: (
        --levels: (
            --grays: (
                --50:  (-16) .8 0,
                --75:  (-8) .9 0,
                --100: (0) 1 0,
            
                --200: (easing.cubic-bezier(.2, .1, .7, 1, math.div(1, 7)) * 87) (1 + 1 * math.div(1, 7)) (-30 * math.div(1, 7)),
                --300: (easing.cubic-bezier(.2, .1, .7, 1, math.div(2, 7)) * 87) (1 + 1 * math.div(2, 7)) (-30 * math.div(2, 7)),
                --400: (easing.cubic-bezier(.2, .1, .7, 1, math.div(3, 7)) * 87) (1 + 1 * math.div(3, 7)) (-30 * math.div(3, 7)),
            
                --500: (easing.cubic-bezier(.2, .1, .7, 1, math.div(4, 7)) * 87) (1 + 1 * math.div(4, 7)) (-30 * math.div(4, 7)),
                --600: (easing.cubic-bezier(.2, .1, .7, 1, math.div(5, 7)) * 87) (1 + 1 * math.div(5, 7)) (-30 * math.div(5, 7)),
                --700: (easing.cubic-bezier(.2, .1, .7, 1, math.div(6, 7)) * 87) (1 + 1 * math.div(6, 7)) (-30 * math.div(6, 7)),
                --800: (easing.cubic-bezier(.2, .1, .7, 1, math.div(7, 7)) * 87) (1 + 1 * math.div(7, 7)) (-30 * math.div(7, 7)),
                --900: #000
            ),
        ),

        --palettes: (
            --base: #edddc4 --grays,
        ),
    ),
);

$themes: ();

@each $theme-name, $theme in $themes-spec {
    $compiled: props.def(--colors, (), 'color');

    @each $palette-name, $palette in map.get($theme, --palettes) {
        $base-color: list.nth($palette, 1);
        $levels:     list.nth($palette, 2);

        $palette: fn.palette($base-color, map.get($theme, --levels, $levels), list.nth(map.get($theme, --palettes, --base), 1));
        $compiled: props.merge($compiled, ( $palette-name: $palette ));
    }

    $themes: map.set($themes, $theme-name, $compiled);
}

$theme: map.get($themes, --light);