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

@function light-bezier($x) {
    @return easing.cubic-bezier(.3, .1, .7, 1, $x);
}

@function classic-bezier($x) {
    @return easing.cubic-bezier(.3, .1, .8, 1, $x);
}

@function dark-bezier($x) {
    @return easing.cubic-bezier(.3, .1, .7, 1, $x);
}

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

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

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

        --palettes: (
            --base:   #edddc4                     --grays,
            --red:    oklch(36.32% 0.1402 53.73)  --colors,
            --blue:   oklch(36.32% 0.1402 273.58) --colors,
            --yellow: oklch(36.32% 0.1402 92.94)  --colors,
            --green:  oklch(36.32% 0.1402 152.94) --colors-bg,
        ),

        --semantic: (
            --bg-content:    --base --50,
            --bg-l1:         --base --75,
            --bg-base:       --base --100,
            --bg-sidebar:    --base --75,
            --bg-footer-box: --base --100,
            --bg-footer:     --base --700,

            --link: (
                --fg:         --red --1000,
                --underline:  --red --500,
                --fg-inv:     --red --1000-text,
                --active:     --red --1300,
                --active-inv: --red --1300-text,
            ),
            
            --wcfHeaderBackground:                   --base --700,
            --wcfHeaderMenuBackground:               --base --800,
            --wcfHeaderMenuLinkBackground:           --base --800,
            --wcfHeaderMenuLinkBackgroundActive:     --base --700,
            --wcfHeaderMenuLink:                     --base --50,
            --wcfHeaderMenuDropdownBackground:       --base --800,
            --wcfHeaderMenuDropdownBorder:           --base --800,
            --wcfHeaderMenuDropdownBackgroundActive: --base --700,

            --wcfNavigationBackground: --base --100,
            --wcfNavigationText:       --base --500,
            --wcfNavigationLink:       --base --800,
            --wcfNavigationLinkActive: --base --800,

            --wcfHeaderSearchBoxBackground:       --base --700,
            --wcfHeaderSearchBoxBackgroundActive: --base --700,

            --wcfContentBackground:   rgb(242, 242, 242),
            --wcfContentBorderInner:  rgb(224, 224, 224),
            --wcfContentBorder:       rgb(224, 224, 224),
            --wcfContentDimmedText:   rgba(#000, .7),
            --wcfContentDimmedLink:   rgba(#000, .7),
            --wcfContentHeadlineText: --base --900,

            --wcfFooterBoxBackground:         --base --100,
            --wcfFooterBoxText:               --base --800,
            --wcfFooterBoxHeadlineText:       --base --900,
            --wcfFooterBoxHeadlineLink:       --base --900,
            --wcfFooterBoxHeadlineLinkActive: --base --900,

            --wcfFooterBackground: --bg-footer,
            --wcfFooterText:       --base --100,
            --wcfFooterLink:       --base --75,
            --wcfFooterLinkActive: --base --75,

            --wcfFooterCopyrightBackground: --base --800,
            --wcfFooterCopyrightText:       --base --75,
            --wcfFooterCopyrightLink:       --base --50,
            --wcfFooterCopyrightLinkActive: --base --50,

            --wcfSidebarBackground:   --wcfContentBackground,
            --wcfSidebarBorder:       transparent,
            --wcfSidebarHeadlineText: --wcfContentHeadlineText,
            --wcfSidebarText:         --wcfContentText,
            --wcfSidebarDimmedText:   --wcfContentDimmedText,

            --wcfButtonBackground:       --base --100,
            --wcfButtonText:             --base --100-text,
            --wcfButtonBackgroundActive: --base --700,
            --wcfButtonTextActive:       --base --700-text,

            --wcfButtonPrimaryBackground:       --red --900,
            --wcfButtonPrimaryText:             --red --900-text,
            --wcfButtonPrimaryBackgroundActive: --red --1200,
            --wcfButtonPrimaryTextActive:       --red --1200-text,

            --wcfInputBorderActive: --red --900,

            --wcfBoxShadowCard: none,

            --wcfInputLabel: --base --700,

            --wcfContentContainerBackground: --bg-content,
            --wcfContentContainerBorder:     --wcfContentContainerBackground,

            --wcfContentLink:       --link --fg,
            --wcfContentLinkActive: --link --active,

            --wcfSidebarLink:             --link --fg,
            --wcfSidebarLinkActive:       --link --active,
            --wcfSidebarDimmedLink:       --wcfSidebarDimmedText,
            --wcfSidebarDimmedLinkActive: --wcfSidebarDimmedText,

            --wcfFooterBoxLink:       --link --fg,
            --wcfFooterBoxLinkActive: --link --active,

            --wcfTabularBoxHeadline:       --link --fg,
            --wcfTabularBoxHeadlineActive: --link --active,

            --wcfStatusInfoBackground: --base --100,
            --wcfStatusInfoBorder:     --base --300,
            --wcfStatusInfoText:       --base --800,

            --wcfStatusSuccessBackground: --green --100,
            --wcfStatusSuccessBorder:     --green --300,
            --wcfStatusSuccessText:       --green --1100,
        ),
    ),

    --classic: (
        --levels: (
            --grays: (
                --50:  -25 .1 0,
                --75:  -14 .6 0,
                --100:  -1  1 0,
            
                --200: (light-bezier(math.div(1, 7)) * 87) (1.2 + 0.8 * math.div(0, 6)) (-30 * math.div(1, 7)),
                --300: (light-bezier(math.div(2, 7)) * 87) (1.2 + 0.8 * math.div(1, 6)) (-30 * math.div(2, 7)),
                --400: (light-bezier(math.div(3, 7)) * 87) (1.2 + 0.8 * math.div(2, 6)) (-30 * math.div(3, 7)),
            
                --500: (light-bezier(math.div(4, 7)) * 87) (1.2 + 0.8 * math.div(3, 6)) (-30 * math.div(4, 7)),
                --600: (light-bezier(math.div(5, 7)) * 87) (1.2 + 0.8 * math.div(4, 6)) (-30 * math.div(5, 7)),
                --700: (light-bezier(math.div(6, 7)) * 87) (1.2 + 0.8 * math.div(5, 6)) (-30 * math.div(6, 7)),
                --800: (light-bezier(math.div(7, 7)) * 87) (1.2 + 0.8 * math.div(6, 6)) (-30 * math.div(7, 7)),
                --900: #000
            ),

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

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

        --palettes: (
            --base:   #edddc4                     --grays,
            --red:    oklch(36.32% 0.1402 53.73)  --colors,
            --blue:   oklch(36.32% 0.1402 273.58) --colors,
            --yellow: oklch(36.32% 0.1402 92.94)  --colors,
            --green:  oklch(36.32% 0.1402 152.94) --colors-bg,
        ),

        --semantic: (
            --bg-content:    --base --100,
            --bg-l1:         --base --300,
            --bg-base:       --base --75,
            --bg-sidebar:    --base --100,
            --bg-nav:        --base --75,
            --bg-footer-box: --base --100,
            --bg-footer:     --base --600,

            --link: (
                --fg:         --red --1200,
                --underline:  --red --700,
                --fg-inv:     --red --1200-text,
                --active:     --red --1300,
                --active-inv: --red --1300-text,
            ),

            --wcfContentBackground:   --base --75,
            --wcfContentBorderInner:  --base --300,
            --wcfContentBorder:       --base --300,
            --wcfContentHeadlineText: --base --900,
            --wcfContentDimmedText:   --base --700,
            --wcfContentDimmedLink:   --base --900,
            --wcfContentText:         --base --800,

            --wcfSidebarBackground: --base --75,

            --wcfUserMenuBackground: --base --75,

            --wcfTabularBoxBackgroundActive: --base --75,

            --wcfButtonBackground:       --base --50,
            --wcfButtonText:             --base --50-text,
            --wcfButtonBackgroundActive: --base --700,
            --wcfButtonTextActive:       --base --700-text,

            --wcfButtonPrimaryBackground:       --red --1000,
            --wcfButtonPrimaryText:             --red --1000-text,
            --wcfButtonPrimaryBackgroundActive: --red --1200,
            --wcfButtonPrimaryTextActive:       --red --1200-text,

            --wcfStatusSuccessBackground: --green --1000,
            --wcfStatusSuccessBorder:     --green --1000,
            --wcfStatusSuccessText:       --green --100,
        ),
    ),

    --dark: (
        --levels: (
            --grays: (
                --50:  1.2 .1 0,
                --75:  0.7 .2 0,
                --100: 0   .4 0,
            
                --200: (dark-bezier(math.div(1, 7)) * -91 + 6) (.6 + .2 * math.div(0, 6)) (30 * math.div(1, 7)),
                --300: (dark-bezier(math.div(2, 7)) * -91 + 6) (.6 + .2 * math.div(1, 6)) (30 * math.div(2, 7)),
                --400: (dark-bezier(math.div(3, 7)) * -91 + 6) (.6 + .2 * math.div(2, 6)) (30 * math.div(3, 7)),
            
                --500: (dark-bezier(math.div(4, 7)) * -91 + 6) (.6 + .2 * math.div(3, 6)) (30 * math.div(4, 7)),
                --600: (dark-bezier(math.div(5, 7)) * -91 + 6) (.6 + .2 * math.div(4, 6)) (30 * math.div(5, 7)),
                --700: (dark-bezier(math.div(6, 7)) * -91 + 6) (.6 + .2 * math.div(5, 6)) (30 * math.div(6, 7)),
                --800: (dark-bezier(math.div(7, 7)) * -91 + 6) (.6 + .2 * math.div(6, 6)) (30 * math.div(7, 7)),
                --900: #fff
            ),
            
            --colors: (
                --100:  (math.div(0, 12) * -106)  (.6 + .6 * math.div(0, 12))  (-30 + 10 * math.div(0, 12)),
                --200:  (math.div(1, 12) * -106)  (.6 + .6 * math.div(1, 12))  (-30 + 10 * math.div(1, 12)),
                --300:  (math.div(2, 12) * -106)  (.6 + .6 * math.div(2, 12))  (-30 + 10 * math.div(2, 12)),
                --400:  (math.div(3, 12) * -106)  (.6 + .6 * math.div(3, 12))  (-30 + 10 * math.div(3, 12)),
                --500:  (math.div(4, 12) * -106)  (.6 + .6 * math.div(4, 12))  (-30 + 10 * math.div(4, 12)),
                --600:  (math.div(5, 12) * -106)  (.6 + .6 * math.div(5, 12))  (-30 + 10 * math.div(5, 12)),
                --700:  (math.div(6, 12) * -106)  (.6 + .6 * math.div(6, 12))  (-30 + 10 * math.div(6, 12)),
                --800:  (math.div(7, 12) * -106)  (.6 + .6 * math.div(7, 12))  (-30 + 10 * math.div(7, 12)),
                --900:  (math.div(8, 12) * -106)  (.6 + .6 * math.div(8, 12))  (-30 + 10 * math.div(8, 12)),
                --1000: (math.div(9, 12) * -106)  (.6 + .6 * math.div(9, 12))  (-30 + 10 * math.div(9, 12)),
                --1100: (math.div(10, 12) * -106) (.6 + .6 * math.div(10, 12)) (-30 + 10 * math.div(10, 12)),
                --1200: (math.div(11, 12) * -106) (.6 + .6 * math.div(11, 12)) (-30 + 10 * math.div(11, 12)),
                --1300: (math.div(12, 12) * -106) (.6 + .6 * math.div(12, 12)) (-30 + 10 * math.div(12, 12)),
            ),
        ),

        --palettes: (
            --base:   #351c0e                     --grays,
            --red:    oklch(36.32% 0.1402 53.73)  --colors,
            --blue:   oklch(36.32% 0.1402 273.58) --colors,
            --yellow: oklch(36.32% 0.1402 92.94)  --colors,
            --green:  oklch(36.32% 0.1402 162.94) --colors,
        ),

        --semantic: (
            --bg-base:       --base --75,
            --bg-l1:         --base --100,
            --bg-content:    --base --200,
            --bg-sidebar:    --base --100,
            --bg-nav:        --base --75,
            --bg-footer-box: --base --75,
            --bg-footer:     --base --75,

            --wcfHeaderBackground:                   --bg-base,
            --wcfHeaderMenuBackground:               --base --50,
            --wcfHeaderMenuLinkBackground:           --base --50,
            --wcfHeaderMenuLinkBackgroundActive:     --base --200,
            --wcfHeaderMenuLink:                     --base --900,
            --wcfHeaderMenuDropdownBackground:       --base --50,
            --wcfHeaderMenuDropdownBorder:           --base --50,
            --wcfHeaderMenuDropdownBackgroundActive: --base --200,

            --wcfNavigationBackground: --bg-base,
            --wcfNavigationText:       --base --500,
            --wcfNavigationLink:       --base --800,
            --wcfNavigationLinkActive: --base --800,

            --wcfContentBackground:  --base --100,
            --wcfContentBorderInner: --base --300,
            --wcfContentBorder:      --wcfContentBorderInner,
            --wcfContentDimmedText:  --base --600,
            --wcfContentDimmedLink:  --base --900,
            --wcfContentText:        --base --800,

            --wcfFooterText:       --base --500,
            --wcfFooterLink:       --base --700,
            --wcfFooterLinkActive: --base --700,

            --wcfFooterCopyrightBackground: --base --50,
            --wcfFooterCopyrightText:       --base --500,
            --wcfFooterCopyrightLink:       --base --700,
            --wcfFooterCopyrightLinkActive: --base --700,

            --wcfButtonBackground:       --base --300,
            --wcfButtonText:             --base --300-text,
            --wcfButtonBackgroundActive: --base --700,
            --wcfButtonTextActive:       --base --700-text,

            --wcfButtonPrimaryBackground:       --red --900,
            --wcfButtonPrimaryText:             --red --900-text,
            --wcfButtonPrimaryBackgroundActive: --red --1200,
            --wcfButtonPrimaryTextActive:       --red --1200-text,

            --wcfContentContainerBackground: --base --200,
            --wcfContentContainerBorder:     --wcfContentContainerBackground,

            --wcfSidebarBackground:       --wcfContentBackground,
            --wcfSidebarBorder:           transparent,
            --wcfSidebarLink:             --link --fg,
            --wcfSidebarLinkActive:       --link --active,
            --wcfSidebarText:             --wcfContentText,
            --wcfSidebarDimmedLink:       --wcfSidebarDimmedText,
            --wcfSidebarDimmedLinkActive: --wcfSidebarDimmedText,

            --wcfTabularBoxBackgroundActive: --base --100,

            --wcfStatusInfoBackground: --base --100,
            --wcfStatusInfoBorder:     --base --300,
            --wcfStatusInfoText:       --base --800,
        ),
    )
);

$themes: ();

@each $theme-name, $theme in $themes-spec {
    $compiled: props.def('', (), '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 ));
    }

    @each $color, $ref in map.get($theme, --semantic) {
        $res: ();

        @if meta.type-of($ref) == 'map' {
            @each $key, $r in $ref {
                $re1: list.nth($r, 1);
                $re2: functions.list-slice($r, 2);

                @if meta.type-of($re1) == 'color' {
                    $res: map.merge($res, ($key: $re1));
                } @else {
                    $res: map.merge($res, ($key: props.get($compiled, $re1, $re2...)));
                }
            }
        } @else {
            $ref1: list.nth($ref, 1);
            $ref2: functions.list-slice($ref, 2);

            @if meta.type-of($ref1) == 'color' {
                $res: $ref1;
            } @else {
                $res: props.get($compiled, $ref1, $ref2...);
            }
        }

        $compiled: props.merge($compiled, ( $color: $res ));
    }

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

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