@use 'iro-sass/src/index' as iro;
@use 'include-media/dist/include-media' as media;
@use '@oddbird/blend';
@use 'functions' as fn;

@include iro.props-store((
    --dims: (
        --size: (
            --0:    0,
            --10:   iro.fn-px-to-rem(1px),
            --25:   iro.fn-px-to-rem(2px),
            --40:   iro.fn-px-to-rem(3px),
            --50:   iro.fn-px-to-rem(4px),
            --65:   iro.fn-px-to-rem(5px),
            --75:   iro.fn-px-to-rem(6px),
            --85:   iro.fn-px-to-rem(7px),
            --100:  iro.fn-px-to-rem(8px),
            --115:  iro.fn-px-to-rem(9px),
            --125:  iro.fn-px-to-rem(10px),
            --130:  iro.fn-px-to-rem(11px),
            --150:  iro.fn-px-to-rem(12px),
            --160:  iro.fn-px-to-rem(13px),
            --175:  iro.fn-px-to-rem(14px),
            --200:  iro.fn-px-to-rem(16px),
            --225:  iro.fn-px-to-rem(18px),
            --250:  iro.fn-px-to-rem(20px),
            --275:  iro.fn-px-to-rem(22px),
            --300:  iro.fn-px-to-rem(24px),
            --325:  iro.fn-px-to-rem(26px),
            --350:  iro.fn-px-to-rem(28px),
            --375:  iro.fn-px-to-rem(30px),
            --400:  iro.fn-px-to-rem(32px),
            --450:  iro.fn-px-to-rem(36px),
            --500:  iro.fn-px-to-rem(40px),
            --550:  iro.fn-px-to-rem(44px),
            --600:  iro.fn-px-to-rem(48px),
            --650:  iro.fn-px-to-rem(52px),
            --700:  iro.fn-px-to-rem(56px),
            --800:  iro.fn-px-to-rem(64px),
            --900:  iro.fn-px-to-rem(72px),
            --1000: iro.fn-px-to-rem(80px),
            --1200: iro.fn-px-to-rem(96px),
            --1600: iro.fn-px-to-rem(128px),
            --2000: iro.fn-px-to-rem(160px),
            --2400: iro.fn-px-to-rem(192px),
            --2500: iro.fn-px-to-rem(200px),
            --2600: iro.fn-px-to-rem(208px),
            --2800: iro.fn-px-to-rem(224px),
            --3200: iro.fn-px-to-rem(256px),
            --3400: iro.fn-px-to-rem(272px),
            --3500: iro.fn-px-to-rem(280px),
            --3600: iro.fn-px-to-rem(288px),
            --3800: iro.fn-px-to-rem(304px),
            --4600: iro.fn-px-to-rem(368px),
            --5000: iro.fn-px-to-rem(400px),
            --6000: iro.fn-px-to-rem(480px),
        ),

        --font: (
            --standard: (
                --family:           ('Inter', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
                --line-height:      1.5,
                --feature-settings: ('\'ss01\''),
            ),
            --headline: (
                --family:           ('Inter', fn.dim(--font --standard --family, null)),
                --line-height:      1.3,
                --weight:           800,
                --feature-settings: ('\'opsz\'' 32, '\'ss01\'', '\'cv06\''),
            ),
            --mono: (
                --family:      ('Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace),
                --line-height: 1.4,
            )
        ),

        --font-size: (
            --50:   iro.fn-px-to-rem(11px),
            --75:   iro.fn-px-to-rem(13px),
            --100:  iro.fn-px-to-rem(14px),
            --150:  iro.fn-px-to-rem(16px),
            --200:  iro.fn-px-to-rem(18px),
            --300:  iro.fn-px-to-rem(20px),
            --400:  iro.fn-px-to-rem(24px),
            --500:  iro.fn-px-to-rem(28px),
            --600:  iro.fn-px-to-rem(32px),
            --700:  iro.fn-px-to-rem(36px),
            --800:  iro.fn-px-to-rem(40px),
            --900:  iro.fn-px-to-rem(45px),
            --1000: iro.fn-px-to-rem(50px),
            --1100: iro.fn-px-to-rem(60px),
        ),

        --border: (
            --thick:  4px,
            --medium: 2px,
            --thin:   1px,
        ),

        --focus: (
            --outline-width: 3px,
        ),

        --paragraph: (
            --margin-top: fn.dim(--size --300, null),
        ),

        --heading: (
            --margin-top:         fn.dim(--size --700, null),
            --margin-top-sibling: fn.dim(--size --325, null),

            --lg: fn.dim(--font-size --400, null),
            --md: fn.dim(--font-size --75, null),
            --sm: fn.dim(--font-size --50, null),

            --display: (
                --xxl: fn.dim(--font-size --1100, null),
                --xl:  fn.dim(--font-size --700, null),
                --lg:  fn.dim(--font-size --300, null),
                --md:  fn.dim(--font-size --150, null),
                --sm:  fn.dim(--font-size --75, null),
                --xs:  fn.dim(--font-size --50, null),
            ),

            --display-sm: (
                --xxl: fn.dim(--font-size --900, null),
                --xl:  fn.dim(--font-size --600, null),
                --lg:  fn.dim(--font-size --200, null),
                --md:  fn.dim(--font-size --100, null),
                --sm:  fn.dim(--font-size --75, null),
                --xs:  fn.dim(--font-size --50, null),
            )
        ),

        --list: (
            --indent:         fn.dim(--size --400, null),
            --compact-indent: fn.dim(--size --250, null),
        ),
    ),
), 'dims');

@include iro.props-store((
    --dims: (
        --heading: (
            --margin-top: fn.dim(--size --600, null),
        ),

        --list: (
            --indent: fn.dim(--size --300),
        ),
    )
), 'sm');

@include iro.props-store((
    --dims: (
        --heading: (
            --margin-top: fn.dim(--size --500, null),
        ),

        --list: (
            --indent: fn.dim(--size --250),
        ),
    )
), 'xs');

//

@include iro.props-store((
    --colors: (
        --gray: fn.gray-palette(100%),
    ),
), 'palette-light-hi');

@include iro.props-store((
    --colors: (
        --gray: fn.gray-palette(97%),
    ),
), 'palette-light');

@include iro.props-store((
    --colors: (
        --gray: fn.gray-palette(93%),
    ),
), 'palette-light-lo');

// @include iro.props-store((
//     --colors: (
//         --gray: fn.gray-palette(88%),
//     ),
// ), 'palette-light-lo2');

@include iro.props-store((
    --colors: (
        --bg-hi2: fn.color(--gray --1, null), // Lightest background
        --bg-hi:  fn.color(--gray --2, null), // Lighter background
        --bg:     fn.color(--gray --3, null), // Background

        --obj-hi: fn.color(--gray --4, null),
        --obj:    fn.color(--gray --5, null),
        --obj-lo: fn.color(--gray --6, null),

        --fg-hi3: fn.color(--gray --7, null),  // Disabled text
        --fg-hi2: fn.color(--gray --8, null),  // Placeholder text
        --fg-hi:  fn.color(--gray --9, null),  // Faint text
        --fg:     fn.color(--gray --10, null), // Text
        --fg-lo:  fn.color(--gray --11, null), // Strong text

        --border: (
            --regular:   fn.color(--obj, null),
            --stable:    iro.props-get-static(--colors --gray --5, 'palette-light'),
            --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-light'),
        ),

        --blue:   fn.color-palette(blend.lch(48% 50 279)),
        --purple: fn.color-palette(blend.lch(48% 50 308)),
        --red:    fn.color-palette(blend.lch(48% 50 23)),
        --green:  fn.color-palette(blend.lch(63% 50 147)),
        --yellow: fn.color-palette(blend.lch(68% 50 70)),

        --accent: (
            --primary:      iro.props-ref('colors', --colors --blue),
            --error:        iro.props-ref('colors', --colors --red),
            --success:      iro.props-ref('colors', --colors --green),
            --warning:      iro.props-ref('colors', --colors --yellow),
            --link-idle:    iro.props-ref('colors', --colors --blue),
            --link-visited: iro.props-ref('colors', --colors --purple),
        ),

        --selection: (
            --bg:     fn.color(--accent --primary --selection, null),
            --bg-img: fn.color(--accent --primary --quiet --obj-lo, null),
            --fg:     fn.color(--accent --primary --solid --fg, null),
        ),

        --focus: (
            --shadow:    0 0 0 fn.dim(--focus --outline-width, null) fn.color(--accent --primary --quiet --obj-lo, null),
            --fill:      fn.color(--accent --primary --solid --bg, null),
            --text:      fn.color(--accent --primary --solid --obj, null),
            --fill-text: fn.color(--accent --primary --solid --fg, null),
        ),
    ),
), 'colors');

//

// @include iro.props-store((
//     --colors: (
//         --gray: fn.gray-palette(1%),
//     ),
// ), 'palette-dark-hi2');

@include iro.props-store((
    --colors: (
        --gray: fn.gray-palette(7%),
    ),
), 'palette-dark-hi');

@include iro.props-store((
    --colors: (
        --gray: fn.gray-palette(12%),
    ),
), 'palette-dark');

@include iro.props-store((
    --colors: (
        --gray: fn.gray-palette(17%),
    ),
), 'palette-dark-lo');

@include iro.props-store((
    --colors: (
        --border: (
            --stable:    iro.props-get-static(--colors --gray --5, 'palette-dark-lo'),
            --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-dark-lo'),
        ),

        --blue:   fn.color-palette(blend.lch(63% 50 279), -1),
        --purple: fn.color-palette(blend.lch(63% 50 308), -1),
        --red:    fn.color-palette(blend.lch(63% 50 23), -1),
        --green:  fn.color-palette(blend.lch(78% 50 147), -1),
        --yellow: fn.color-palette(blend.lch(88% 50 70), -1),

        --accent: (
            --primary:      iro.props-ref('colors-dark', --colors --blue),
            --error:        iro.props-ref('colors-dark', --colors --red),
            --success:      iro.props-ref('colors-dark', --colors --green),
            --warning:      iro.props-ref('colors-dark', --colors --yellow),
            --link-idle:    iro.props-ref('colors-dark', --colors --blue),
            --link-visited: iro.props-ref('colors-dark', --colors --purple),
        ),
    )
), 'colors-dark');

//

@each $breakpoint in map-keys(media.$breakpoints) {
    @include media.media('<=#{$breakpoint}') {
        @include iro.props-store((
            --colors: ()
        ), $breakpoint);
    }
}