$base: (

font-family:            (-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif),
font-family-code:       (Menlo, Monaco, Consolas, Andale Mono, lucida console, Courier New, monospace),

font-size-root:         16px,
font-size-root-sm:      14px,

font-size-xl:           1.5rem,
font-size-lg:           1.25rem,
font-size:              1rem,
font-size-sm:           .85rem,
font-size-xs:           .7rem,

font-size-h1-xl:        3.5rem,
font-size-h2-xl:        2.5rem,
font-size-h3-xl:        2rem,
font-size-h4-xl:        1.75rem,
font-size-h5-xl:        1.5rem,
font-size-h6-xl:        1.5rem,

font-size-h1-lg:        3rem,
font-size-h2-lg:        2rem,
font-size-h3-lg:        1.75rem,
font-size-h4-lg:        1.5rem,
font-size-h5-lg:        1.25rem,
font-size-h6-lg:        1.25rem,

font-size-h1:           2.5rem,
font-size-h2:           1.9rem,
font-size-h3:           1.5rem,
font-size-h4:           1.2rem,
font-size-h5:           1rem,
font-size-h6:           1rem,

font-size-h1-sm:        2rem,
font-size-h2-sm:        1.5rem,
font-size-h3-sm:        1.35rem,
font-size-h4-sm:        1.15rem,
font-size-h5-sm:        1rem,
font-size-h6-sm:        1rem,

font-size-h1-xs:        1.05rem,
font-size-h2-xs:        1rem,
font-size-h3-xs:        .95rem,
font-size-h4-xs:        .9rem,
font-size-h5-xs:        .85rem,
font-size-h6-xs:        .85rem,

font-weight:            400,
font-weight-bold:       700,

line-height-xl:         2,
line-height-lg:         1.8,
line-height:            1.6,
line-height-sm:         1.4,
line-height-xs:         1.2,

spacer:                 1rem,

border-radius-lg:       .8rem,
border-radius:          .4rem,
border-radius-sm:       .2rem

);

$spacers: (

0:                      0,
1:                      map-get($base, spacer) * .25,
2:                      map-get($base, spacer) * .5,
3:                      map-get($base, spacer),
4:                      map-get($base, spacer) * 1.5,
5:                      map-get($base, spacer) * 3

);

$z-indexes: (

actions: 996,
mask: 997,
sidebar: 998,
modal: 999

);

$layout: (

header-height:          5rem,
header-height-sm:       3rem,
content-max-width:      950px,
sidebar-width:          250px,
sidebar-header-height:  3rem,
aside-width:            220px

);

// sm md lg // | —— | —— | —— | // 0 500 1024 -

$responsive: (

sm:                      0,
md:                      500px,
lg:                      1024px

);

$animation: (

duration:               .4s,
duration-sm:            .2s,
timing-function:        ease-in-out

);

$clickable: (

transition:             all .2s ease-in-out

);

$button-height-xl: 2.8rem; $button-height-lg: 2.3rem; $button-height: 1.9rem; $button-height-sm: 1.5rem; $button-height-xs: 1.2rem;

$button: (

padding-y-xl:           ($button-height-xl - map-get($base, font-size-xl)) / 2,
padding-x-xl:           $button-height-xl / 3,
padding-y-lg:           ($button-height-lg - map-get($base, font-size-lg)) / 2,
padding-x-lg:           $button-height-lg / 3,
padding-y:              ($button-height - map-get($base, font-size)) / 2,
padding-x:              $button-height / 3,
padding-y-sm:           ($button-height-sm - map-get($base, font-size-sm)) / 2,
padding-x-sm:           $button-height-sm / 3,
padding-y-xs:           ($button-height-xs - map-get($base, font-size-xs)) / 2,
padding-x-xs:           $button-height-xs / 3,

pill-radius:            6rem,

circle-diameter-xl:     $button-height-xl,
circle-diameter-lg:     $button-height-lg,
circle-diameter:        $button-height,
circle-diameter-sm:     $button-height-sm,
circle-diameter-xs:     $button-height-xs,

font-weight:            map-get($base, font-weight-bold)

);

$image: (

width-xl:  20em,
width-lg:  16rem,
width:     12rem,
width-sm:  8rem,
width-xs:  4rem

);

$menu: (

horizontal-spacer: 1,
horizontal-item-vertical-spacer: 1

);