@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: (
        --spacing: (
            --base: iro.fn-px-to-rem(28px),
            --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,
            ),
            --mono: (
                --family:      ('Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace),
                --line-height: 1.4,
            )
        ),

        --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');

//

@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

        --gray:   ( --h: 220, --s: 5% ),
        --blue:   fn.color-palette(blend.lch(48% 50 279)),
        --red:    fn.color-palette(blend.lch(48% 50 23)),
        --green:  fn.color-palette(blend.lch(63% 50 147)),
        --yellow: fn.color-palette(blend.lch(73% 50 80)),

        --accent: (
            --primary: iro.props-ref('colors', --colors --blue),
            --error:   iro.props-ref('colors', --colors --red),
            --success: iro.props-ref('colors', --colors --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 --bg, null),
            --text:      fn.color(--accent --primary --lo, null),
            --fill-text: fn.color(--accent --primary --fg, null),
        ),
    ),
), 'colors');

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

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

//

@include iro.props-store((
    --colors: (
        --blue:   fn.color-palette(blend.lch(58% 60 279), -1),
        --red:    fn.color-palette(blend.lch(58% 60 23), -1),
        --green:  fn.color-palette(blend.lch(73% 60 147), -1),
        --yellow: fn.color-palette(blend.lch(83% 60 80), -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),
        ),
    )
), 'colors-dark');

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

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

//

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