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

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

media.$breakpoints: (
    md: 40rem,
    sm: 28rem
);

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

$grays: ();

@for $i from 0 through 100 {
    $grays: append($grays, $i * 1%);
}

$grays-rev: iro.fn-list-reverse($grays);

@function find-gray($lightness, $contrast) {
    $base: blend.lch($lightness 0 0);
    $dir:  if($contrast < 0, -1, 1) * if($lightness >= 50%, 1, -1);
    $args: ();

    @if $dir == 1 {
        @each $gray in $grays-rev {
            @if $gray < $lightness {
                $args: append($args, blend.lch($gray 0 0));
            }
        }
    } @else {
        @each $gray in $grays {
            @if $gray > $lightness {
                $args: append($args, blend.lch($gray 0 0));
            }
        }
    }

    @if length($args) == 0 {
        @return $base;
    }

    $args: append($args, math.abs($contrast));
    $result: blend.contrast($base, $args...);
    @return hsl(fn.color(--gray-h), fn.color(--gray-s), lightness($result));
}

//

@include iro.props-store((
    --dims: (
        --spacing: (
            --base: iro.fn-px-to-rem(24px),
            --factors: (
                --xxs: .125,
                --xs:  .25,
                --sm:  .5,
                --md:  1,
                --lg:  1.5,
                --xl:  2,
                --xxl: 2.5,
            ),
            --xxs: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xxs, null)),
            --xs:  calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xs, null)),
            --sm:  calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --sm, null)),
            --md:  calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --md, null)),
            --lg:  calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --lg, null)),
            --xl:  calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xl, null)),
            --xxl: calc(fn.dim(--spacing --base, null) * fn.dim(--spacing --factors --xxl, null)),
        ),

        --font: (
            --standard: (
                --family:      ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
                --line-height: 1.5,
            ),
            --headline: (
                --family:      ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
                --line-height: 1.2,
                --weight:      700,
            )
        ),

        --font-size: (
            --xs:   iro.fn-px-to-rem(11px),
            --sm:   iro.fn-px-to-rem(13px),
            --md:   iro.fn-px-to-rem(14px),
            --lg:   iro.fn-px-to-rem(16px),
            --xl:   iro.fn-px-to-rem(18px),
            --xxl:  iro.fn-px-to-rem(22px),
            --xxxl: iro.fn-px-to-rem(28px),
        ),

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

        --focus-outline-width: 3px,

        --paragraph: (
            --margin-top: fn.dim(--spacing --sm, null),
        ),

        --list: (
            --indent: 3rem,
        ),
    ),
), 'dims');

//

@function accent-palette($base, $dir: 1) {
    @return (
        --hi:        blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 10%),
        --main:      $base,
        --lo:        blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -10%),
        --lo2:       blend.scale($base, $lightness: $dir * -25%, $chroma: $dir * -20%),
        --semi:      rgba($base, .4),
        --selection: rgba($base, .99),
        --fg:        blend.contrast($base, #fff, #000),
    );
}

@function gray-palette($lightness) {
    @return (
        --gray1:  find-gray($lightness, -1.1),
        --gray2:  find-gray($lightness, -1.05),
        --gray3:  find-gray($lightness, 1),
        --gray4:  find-gray($lightness, 1.15),
        --gray5:  find-gray($lightness, 1.37),
        --gray6:  find-gray($lightness, 1.73),
        --gray7:  find-gray($lightness, 2.4),
        --gray8:  find-gray($lightness, 3.26),
        --gray9:  find-gray($lightness, 7.14),
        --gray10: find-gray($lightness, 11),
        --gray11: find-gray($lightness, 17.4),
    );
}

@include iro.fn-execute {
    @include iro.props-store((
        --colors: (
            --gray-h: 220,
            --gray-s: 5%,

            --bg-hi2: fn.color(--gray1, null), // Lightest background
            --bg-hi:  fn.color(--gray2, null), // Lighter background
            --bg:     fn.color(--gray3, null), // Background

            --obj-hi: fn.color(--gray4, null),
            --obj:    fn.color(--gray5, null),
            --obj-lo: fn.color(--gray6, null),

            --fg-hi3: fn.color(--gray7, null),  // Disabled text
            --fg-hi2: fn.color(--gray8, null),  // Placeholder text
            --fg-hi:  fn.color(--gray9, null),  // Faint text
            --fg:     fn.color(--gray10, null), // Text
            --fg-lo:  fn.color(--gray11, null), // Strong text

            --accent: (
                --blue:   accent-palette(blend.lch(48% 50 279)),
                --red:    accent-palette(blend.lch(48% 50 23)),
                --green:  accent-palette(blend.lch(58% 50 141)),
                --yellow: accent-palette(blend.lch(73% 50 90)),

                --primary: iro.props-ref('colors', --colors --accent --blue),
                --error:   iro.props-ref('colors', --colors --accent --red),
                --success: iro.props-ref('colors', --colors --accent --green),
            ),

            --selection: (
                --bg:     fn.color(--accent --primary --selection, null),
                --bg-img: fn.color(--accent --primary --semi, null),
                --fg:     fn.color(--accent --primary --fg, null),
            ),

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

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

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

//

@include iro.fn-execute {
    @include iro.props-store((
        --colors: (
            --accent: (
                --blue:   accent-palette(blend.lch(58% 60 279), -1),
                --red:    accent-palette(blend.lch(58% 60 23), -1),
                --green:  accent-palette(blend.lch(68% 60 141), -1),
                --yellow: accent-palette(blend.lch(83% 60 90), -1),

                --primary: iro.props-ref('colors-dark', --colors --accent --blue),
                --error:   iro.props-ref('colors-dark', --colors --accent --red),
                --success: iro.props-ref('colors-dark', --colors --accent --green),
            ),
        )
    ), 'colors-dark');

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

    @include iro.props-store((
        --colors: gray-palette(16%)
    ), 'palette-dark-raised');
}

//

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