$breakpoints: (
    xs: 320px,
    sm: 600px,
    md: 900px,
    lg: 1400px,
);

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

$font-fam--text:     'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
$font-fam--large:    'Garet Variable', $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:     42rem;
$subcontent--indent: 2em;

$gray0: hsl(220, 0%, 6%);
$gray1: hsl(220, 0%, 9%);
$gray2: hsl(220, 0%, 16%);
$gray3: hsl(220, 0%, 29%);
$gray4: hsl(220, 0%, 54%);
$gray5: hsl(220, 0%, 73%);
$gray6: hsl(220, 0%, 100%);

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

        --accent: (
            --h: 354,
            --s: 84%,
            --l: 55%,
            --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
        )
    )
));

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

:root {
    --heading--fg: var(--colors--fg-lo);

    --select--bg:     hsla(270, 2%, 100%, .996);
    --select--img-bg: hsla(270, 2%, 100%, .5);
    --select--fg:     var(--colors--bg-hi);

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

    --code-block--fg: var(--colors--fg-hi);

    --link--idle--fg: var(--colors--fg-lo);
    --link--hover--bg: var(--link--idle--fg);
    --link--hover--fg: #000;

    --hero--back-fg: var(--colors--bg-hi);

    --nav--bg: var(--colors--bg);
    --nav--logo--fg: var(--colors--fg-hi);
    --nav--item--idle--fg: var(--colors--fg);
    --nav--item--hover--fg: var(--colors--fg-lo);
    --nav--item--active--fg: var(--colors--fg-lo);

    --footer--bg: var(--colors--bg);

    --page--link--idle--fg: var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866;
    --page--link--visited--fg: var(--colors--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%);  // var(--fg-lo); // #f59458;
    --page--link--hover--bg: var(--page--link--idle--fg);
    --page--link--hover--fg: #000;
}