@use 'sass:list';
@use 'sass:map';
@use 'iro-sass/src/index' as iro;
@use 'iro-sass/src/responsive' as res;
@use 'include-media/dist/include-media' as media;
@use '@oddbird/blend';

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

media.$breakpoints: (
    lg: 1340px,
    md: 900px,
    sm: 620px,
    xs: 400px,
);

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

res.$named-viewports: media.$breakpoints;

$palette-precision: 5 !default;

$theme-light: (
    --base:  hsl(0, 0%, 97%),
    --blue:   blend.lch(48% 50 279),
    --purple: blend.lch(48% 50 308),
    --red:    blend.lch(48% 50 23),
    --green:  blend.lch(63% 50 147),
    --yellow: blend.lch(68% 50 70),

    --grays: (
        --50:  1.1,
        --75:  1.04,
        --100: 1,
    
        --200: -1.15,
        --300: -1.35,
        --400: -1.7,
    
        --500: -2.4,
        --600: -3.3,
        --700: -6,
        --800: -13,
        --900: -20,
    ),
    --colors: (
        --100:  -1.08,
        --200:  -1.20,
        --300:  -1.33,
        --400:  -1.58,
        --500:  -1.92,
        --600:  -2.39,
        --700:  -3.01,
        --800:  -3.87,
        --900:  -5.07,
        --1000: -6.72,
        --1100: -8.84,
        --1200: -11.31,
        --1300: -13.94,
    ),

    --accent:         --blue,

    --bg-l2:          --50,
    --bg-l1:          --100,
    --bg-base:        --200,

    --border-mute:    --200,
    --border:         --300,
    --border-strong:  --400,

    --text-disabled:  --500,
    --text-mute-more: --600,
    --text-mute:      --700,
    --text:           --800,
    --heading:        --900,
) !default;

$theme-dark: (
    --base:  hsl(0, 0%, 19%),
    --blue:   blend.lch(48% 50 279),
    --purple: blend.lch(48% 50 308),
    --red:    blend.lch(48% 50 23),
    --green:  blend.lch(63% 50 147),
    --yellow: blend.lch(68% 50 70),

    --grays: (
        --50:  -1.31,
        --75:  -1.18,
        --100: 1,
    
        --200: 1.15,
        --300: 1.35,
        --400: 1.7,
    
        --500: 2.4,
        --600: 3.3,
        --700: 6,
        --800: 13,
        --900: 20,
    ),
    --colors: (
        --100:  1.12,
        --200:  1.30,
        --300:  1.58,
        --400:  1.96,
        --500:  2.45,
        --600:  3.09,
        --700:  3.90,
        --800:  4.85,
        --900:  6.02,
        --1000: 7.34,
        --1100: 8.77,
        --1200: 10.18,
        --1300: 11.64,
    ),

    --accent:         --blue,

    --bg-base:        --50,
    --bg-l1:          --75,
    --bg-l2:          --100,

    --border-mute:    --200,
    --border:         --300,
    --border-strong:  --400,

    --text-disabled:  --500,
    --text-mute-more: --600,
    --text-mute:      --700,
    --text:           --800,
    --heading:        --900,
) !default;

$themes: (
    light: $theme-light,
    dark:  $theme-dark,
) !default;

$theme-default: list.nth(map.keys($themes), 1) !default;