@use 'sass:list';
@use 'sass:map';
@use 'sass:math';
@use 'iro-sass/src/index' as iro;
@use 'iro-sass/src/responsive' as res;
@use 'iro-sass/src/easing' as easing;
@use 'include-media/dist/include-media' as media;
@use '@oddbird/blend';
@use 'functions/colors' as iro-colors;

iro.$vars-root-size: 16px;

media.$breakpoints: (
    lg: 1340px,
    md: 900px,
    sm: 620px,
    xs: 400px,
);

media.$unit-intervals: (
    'px':  1,
    'em':  .01,
    'rem': .01,
    '':    0
);

res.$named-viewports: media.$breakpoints;

$palette-precision: 0.01 !default;

$palette-chroma-easing: 'ease' !default;

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

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

    --palettes: (
        --blue:   iro-colors.oklch(56% 0.14 265.25),
        --purple: iro-colors.oklch(56% 0.14 305.58),
        --red:    iro-colors.oklch(56% 0.14 18.69),
        --green:  iro-colors.oklch(56% 0.14 150.48),
        --yellow: iro-colors.oklch(56% 0.14 84.08),
    ),
) !default;

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

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

    --ranges: (
        --full:  1,
        --muted: .1,
    ),

    --palettes: (
        --base:  hsl(0, 0%, 97%)       --grays --full,
        --blue:   iro-colors.oklch(56% 0.14 265.25) --colors --muted,
        --purple: iro-colors.oklch(56% 0.14 305.58) --colors --muted,
        --red:    iro-colors.oklch(56% 0.14 18.69)  --colors --muted,
        --green:  iro-colors.oklch(56% 0.14 150.48) --colors --muted,
        --yellow: iro-colors.oklch(56% 0.14 84.08)  --colors --muted,
    ),

    --semantic: (
        --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:           --yellow,
        --focus-static:    --yellow-static,

        --bg-l2:           --base --50,
        --bg-l1:           --base --100,
        --bg-base:         --base --200,
 
        --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,
    ),
) !default;

$theme-dark: (
    --contrasts: (
        --grays: (
            --50:  3,
            --75:  1.5,
            --100: 0,
        
            --200: easing.cubic-bezier(.5, .1, .7, .8, math.div(1, 8)) * -108,
            --300: easing.cubic-bezier(.5, .1, .7, .8, math.div(2, 8)) * -108,
            --400: easing.cubic-bezier(.5, .1, .7, .8, math.div(3, 8)) * -108,
        
            --500: easing.cubic-bezier(.5, .1, .7, .8, math.div(4, 8)) * -108,
            --600: easing.cubic-bezier(.5, .1, .7, .8, math.div(5, 8)) * -108,
            --700: easing.cubic-bezier(.5, .1, .7, .8, math.div(6, 8)) * -108,
            --800: easing.cubic-bezier(.5, .1, .7, .8, math.div(7, 8)) * -108,
            --900: easing.cubic-bezier(.5, .1, .7, .8, math.div(8, 8)) * -108,
        ),

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

    --ranges: (
        --full:  1,
        --muted: .4,
    ),

    --palettes: (
        --base:  hsl(0, 0%, 19%)       --grays --full,
        --blue:   iro-colors.oklch(56% 0.14 265.25) --colors --muted,
        --purple: iro-colors.oklch(56% 0.14 305.58) --colors --muted,
        --red:    iro-colors.oklch(56% 0.14 18.69)  --colors --muted,
        --green:  iro-colors.oklch(56% 0.14 150.48) --colors --muted,
        --yellow: iro-colors.oklch(56% 0.14 84.08)  --colors --muted,
    ),

    --semantic: (
        --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:           --yellow,
        --focus-static:    --yellow-static,

        --bg-base:         --base --50,
        --bg-l1:           --base --75,
        --bg-l2:           --base --100,
 
        --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,
    ),
) !default;

$themes: (
    light: $theme-light,
    dark:  $theme-dark,
) !default;

$theme-default: list.nth(map.keys($themes), 1) !default;