$breakpoints: (
    lg: 1340px,
    md: 900px,
    sm: 600px,
    xs: 400px,
);

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

$responsive-mod-scale: (
    xs: (iro-px-to-rem(14px), 1.28),
    md: (iro-px-to-rem(14px), 1.49)
);

$font-fam--text:  'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
$font-fam--large: 'Garet', $font-fam--text;
$font-fam--mono:  'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
$font-size:       16px;
$line-height:     1.7;
$content--width:  44rem;

@include iro-execute {
    $gray0: hsl(220, 5%, 4%);
    $gray1: hsl(220, 5%, 10%);
    $gray2: hsl(220, 5%, 16%);
    $gray3: hsl(220, 5%, 23%);
    $gray4: hsl(220, 5%, 38%);
    $gray5: hsl(220, 5%, 60%);
    $gray6: hsl(220, 5%, 80%);
    $gray7: hsl(220, 5%, 100%);

    @include store((
        --dims: (
            --indent:     2rem,
            --obj-shadow: 0 .4em 2.8em,
        ),
        --colors: (
            --bg-hi:  $gray0, // Darker background
            --bg:     $gray1, // Background
            --bg-lo:  $gray2, // Lighter background
        
            --obj-hi: $gray3,
            --obj:    $gray4,
        
            --fg-hi:  $gray5, // Faint text
            --fg:     $gray6, // Text
            --fg-lo:  $gray7, // Strong text

            --obj-shadow: transparent,

            --accent: (
                --h:      354,
                --s:      84%,
                --l:      55%,
                --color:  hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
                --strong: hsl(
                    var(--colors--accent--h),
                    calc(var(--colors--accent--s) * 1.2),
                    calc(var(--colors--accent--l) * 1.2)
                ),
                --faint: hsla(
                    var(--colors--accent--h),
                    var(--colors--accent--s),
                    var(--colors--accent--l),
                    .1
                ),
            ),

            --focus-ring: var(--colors--fg-lo),

            --select: (
                --bg:     rgba($gray7, .996),
                --img-bg: rgba($gray7, .5),
                --fg:     var(--colors--bg-hi),
            ),

            --link: (
                --default: var(--colors--fg-lo),
                --colored: (
                    --idle-h:  220,
                    --idle-s:  100%,
                    --idle-l:  80%,
                    --idle:    hsl(
                        var(--colors--link--colored--idle-h),
                        var(--colors--link--colored--idle-s),
                        var(--colors--link--colored--idle-l),
                    ), //hsl(var(--colors--accent--h), 100%, 66%), //
                    --visited: hsl(290, 35%, 72%), //hsl(var(--colors--accent--h), 50%, 66%), //
                )
            ),

            --code: (
                --fg: var(--colors--fg-hi),
            ),
        )
    ));
}

@include iro-execute {
    $gray0: hsl(220, 5%, 100%);
    $gray1: hsl(220, 5%, 96%);
    $gray2: hsl(220, 5%, 88%);
    $gray3: hsl(220, 5%, 83%);
    $gray4: hsl(220, 5%, 68%);
    $gray5: hsl(220, 5%, 47%);
    $gray6: hsl(220, 5%, 16%);
    $gray7: hsl(220, 5%, 0%);

    @include store((
        --colors: (
            --bg-hi:  $gray0, // Darker background
            --bg:     $gray1, // Background
            --bg-lo:  $gray2, // Lighter background
        
            --obj-hi: $gray3,
            --obj:    $gray4,
        
            --fg-hi:  $gray5, // Faint text
            --fg:     $gray6, // Text
            --fg-lo:  $gray7, // Strong text

            --obj-shadow: rgba(#000, .05),

            --accent: (
                --h:      354,
                --s:      74%,
                --l:      48%,
                --strong: hsl(
                    var(--colors--accent--h),
                    var(--colors--accent--s),
                    calc(var(--colors--accent--l) * .8)
                ),
            ),

            --select: (
                --bg:     rgba($gray7, .996),
                --img-bg: rgba($gray7, .5),
            ),

            --link: (
                --colored: (
                    --idle-h:  220,
                    --idle-s:  60%,
                    --idle-l:  40%,
                    --idle:    hsl(
                        var(--colors--link--colored--idle-h),
                        var(--colors--link--colored--idle-s),
                        var(--colors--link--colored--idle-l),
                    ), //hsl(var(--colors--accent--h), 100%, 66%), //
                    --visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), //
                )
            ),
        ),
    ), 'light');
}

@include iro-execute {
    $white: #fff;
    $black: #000;

    @include store((
        --colors: (
            --bg-hi:  $white, // Darker background
            --bg:     $white, // Background
            --bg-lo:  $black, // Lighter background
        
            --obj-hi: $black,
            --obj:    $black,
        
            --fg-hi:  $black, // Faint text
            --fg:     $black, // Text
            --fg-lo:  $black, // Strong text

            --obj-shadow: transparent,
        ),
    ), 'print');
}

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

@include store((
    --dims: (
        --indent: 1.5rem,
    ),
), 'sm');