@use 'sass:list';
@use 'sass:map';
@use 'sass:math';
@use 'iro-sass/src/easing' as easing;

$static-colors: (
    --base: hsl(0, 0%, 98%),

    --levels: (
        --100:  math.div(0, 12) * 110 - 10,
        --200:  math.div(1, 12) * 110 - 10,
        --300:  math.div(2, 12) * 110 - 10,
        --400:  math.div(3, 12) * 110 - 10,
        --500:  math.div(4, 12) * 110 - 10,
        --600:  math.div(5, 12) * 110 - 10,
        --700:  math.div(6, 12) * 110 - 10,
        --800:  math.div(7, 12) * 110 - 10,
        --900:  math.div(8, 12) * 110 - 10,
        --1000: math.div(9, 12) * 110 - 10,
        --1100: math.div(10, 12) * 110 - 10,
        --1200: math.div(11, 12) * 110 - 10,
        --1300: math.div(12, 12) * 110 - 10,
    ),

    --palettes: (
        --blue:   oklch(56% .14 275.25),
        --purple: oklch(56% .14 305.58),
        --red:    oklch(56% .14 14.69),
        --green:  oklch(56% .14 150.48),
        --yellow: oklch(56% .14 84.08),
    ),

    --transparents: (
        --100: 0,
        --200: .1,
        --300: .25,
        --400: .4,
        --500: .55,
        --600: .7,
        --700: .8,
        --800: .9,
        --900: 1,
    ),
);

$semantic-colors-common: (
    --accent:          --blue,
    --accent-static:   --blue-static,
    --positive:        --green,
    --positive-static: --green-static,
    --negative:        --red,
    --negative-static: --red-static,
    --warning:         --yellow,
    --warning-static:  --yellow-static,

    --focus-raw:       --accent,
    --focus-static:    --accent-static,

    --border-mute:     --base --200,
    --border:          --base --300,
    --border-strong:   --base --400,

    --text-disabled:   --base --500,
    --text-mute-more:  --base --600,
    --text-mute:       --base --700,
    --text:            --base --800,
    --heading:         --base --900,

    --focus: (
        --outline:       --focus-raw --400,
        --border-mute:   --focus-raw --900,
        --border:        --focus-raw --1000,
        --border-text:   --focus-raw --1000-text,
        --border-strong: --focus-raw --1100,
        --text:          --focus-raw --1100,
    ),
);

$theme-light: (
    --levels: (
        --grays: (
            --50:  (-8) (.2 + .8 * easing.ease(math.div(0, 12))),
            --75:  (-4) (.2 + .8 * easing.ease(math.div(1, 12))),
            --100: (0) (.2 + .8 * easing.ease(math.div(2, 12))),
        
            --200: (easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98) (.2 + .8 * easing.ease(math.div(3, 12))),
            --300: (easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98) (.2 + .8 * easing.ease(math.div(4, 12))),
            --400: (easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98) (.2 + .8 * easing.ease(math.div(5, 12))),
        
            --500: (easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98) (.2 + .8 * easing.ease(math.div(6, 12))),
            --600: (easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98) (.2 + .8 * easing.ease(math.div(7, 12))),
            --700: (easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98) (.2 + .8 * easing.ease(math.div(8, 12))),
            --800: (easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98) (.2 + .8 * easing.ease(math.div(9, 12))),
            --900: (106) (.2 + .8 * easing.ease(math.div(10, 12))),
        ),

        --colors: (
            --100:  (math.div(0, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(0, 12))),
            --200:  (math.div(1, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(1, 12))),
            --300:  (math.div(2, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(2, 12))),
            --400:  (math.div(3, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(3, 12))),
            --500:  (math.div(4, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(4, 12))),
            --600:  (math.div(5, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(5, 12))),
            --700:  (math.div(6, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(6, 12))),
            --800:  (math.div(7, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(7, 12))),
            --900:  (math.div(8, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(8, 12))),
            --1000: (math.div(9, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(9, 12))),
            --1100: (math.div(10, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(10, 12))),
            --1200: (math.div(11, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(11, 12))),
            --1300: (math.div(12, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(12, 12))),
        ),
    ),
    
    --palettes: (
        --base:   hsl(260, 70%, 98%)    --grays,
        --blue:   oklch(56% .16 275.25) --colors,
        --purple: oklch(56% .16 305.58) --colors,
        --red:    oklch(56% .16 14.69)  --colors,
        --green:  oklch(56% .16 150.48) --colors,
        --yellow: oklch(56% .16 84.08)  --colors,
    ),

    --semantic: map.merge($semantic-colors-common, (
        --bg-l2:   --base --50,
        --bg-l1:   --base --100,
        --bg-base: --base --200,
    )),

    --constants: (
        --shadow: rgba(#000, .15),
    ),
);

$theme-dark: (
    --levels: (
        --grays: (
            --50:  (4.4) (.3 + .7 * easing.ease(math.div(10, 12))),
            --75:  (2.5) (.3 + .7 * easing.ease(math.div(9, 12))),
            --100: (0) (.3 + .7 * easing.ease(math.div(8, 12))),
        
            --200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))),
            --300: (easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108) (.3 + .7 * easing.ease(math.div(6, 12))),
            --400: (easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108) (.3 + .7 * easing.ease(math.div(5, 12))),
        
            --500: (easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108) (.3 + .7 * easing.ease(math.div(4, 12))),
            --600: (easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108) (.3 + .7 * easing.ease(math.div(3, 12))),
            --700: (easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108) (.3 + .7 * easing.ease(math.div(2, 12))),
            --800: (easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108) (.3 + .7 * easing.ease(math.div(1, 12))),
            --900: (easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108) (.3 + .7 * easing.ease(math.div(0, 12))),
        ),

        --colors: (
            --100:  (math.div(0, 12) * -100) (.3 + .7 * easing.ease(math.div(0, 12))),
            --200:  (math.div(1, 12) * -100) (.3 + .7 * easing.ease(math.div(1, 12))),
            --300:  (math.div(2, 12) * -100) (.3 + .7 * easing.ease(math.div(2, 12))),
            --400:  (math.div(3, 12) * -100) (.3 + .7 * easing.ease(math.div(3, 12))),
            --500:  (math.div(4, 12) * -100) (.3 + .7 * easing.ease(math.div(4, 12))),
            --600:  (math.div(5, 12) * -100) (.3 + .7 * easing.ease(math.div(5, 12))),
            --700:  (math.div(6, 12) * -100) (.3 + .7 * easing.ease(math.div(6, 12))),
            --800:  (math.div(7, 12) * -100) (.3 + .7 * easing.ease(math.div(7, 12))),
            --900:  (math.div(8, 12) * -100) (.3 + .7 * easing.ease(math.div(8, 12))),
            --1000: (math.div(9, 12) * -100) (.3 + .7 * easing.ease(math.div(9, 12))),
            --1100: (math.div(10, 12) * -100) (.3 + .7 * easing.ease(math.div(10, 12))),
            --1200: (math.div(11, 12) * -100) (.3 + .7 * easing.ease(math.div(11, 12))),
            --1300: (math.div(12, 12) * -100) (.3 + .7 * easing.ease(math.div(12, 12))),
        ),
    ),
    
    --palettes: (
        --base:   hsl(257, 7%, 20%)     --grays,
        --blue:   oklch(56% .16 275.25) --colors,
        --purple: oklch(56% .16 305.58) --colors,
        --red:    oklch(56% .16 14.69)  --colors,
        --green:  oklch(56% .16 150.48) --colors,
        --yellow: oklch(56% .16 84.08)  --colors,
    ),

    --semantic: map.merge($semantic-colors-common, (
        --bg-base: --base --50,
        --bg-l1:   --base --75,
        --bg-l2:   --base --100,
    )),

    --constants: (
        --shadow: rgba(#000, .5),
    ),
);