// | viewport S       | viewport M       | viewport L      | default mapping |
// |------------------|------------------|-----------------|-----------------|
// | title l    | 40  | title l    | 40  | title xxl  | 80 | default         |
// | title m    | 32  | title m    | 32  | title xl   | 60 | default         |
// | title s    | 26  | title s    | 26  | title l    | 40 |                 |
// | title s    | 26  | title s    | 26  | title m    | 32 | default         |
// | title xs   | 20  | title xs   | 20  | title s    | 26 |                 |
// | title xs   | 20  | title xs   | 20  | title xs   | 20 | default         |
// | title xxs  | 18  | title xxs  | 18  | title xxs  | 18 |                 |
// |            |     |            |     |            |    |                 |
// | body l     | 18  | body l     | 18  | body l     | 18 |                 |
// | body m     | 16  | body m     | 16  | body m     | 16 |                 |
// | body s     | 14  | body s     | 14  | body s     | 14 |                 |
// | body xs    | 12  | body xs    | 12  | body xs    | 12 |                 |

// font family
$font-family-theme: Graphik, Tahoma, 'sans-serif';

// font mappings - font-size / line-height / letter-spacing
$types: (
  12: (
    font-size: 12px,
    line-height: 15px,
    letter-spacing: 0
  ),
  14: (
    font-size: 14px,
    line-height: 25px,
    letter-spacing: 0
  ),
  16: (
    font-size: 16px,
    line-height: 25px,
    letter-spacing: 0
  ),
  18: (
    font-size: 18px,
    line-height: 30px,
    letter-spacing: 0
  ),
  20: (
    font-size: 20px,
    line-height: 30px,
    letter-spacing: 0
  ),
  26: (
    font-size: 26px,
    line-height: 30px,
    letter-spacing: -1px
  ),
  32: (
    font-size: 32px,
    line-height: 40px,
    letter-spacing: -1px
  ),
  40: (
    font-size: 40px,
    line-height: 45px,
    letter-spacing: -2px
  ),
  60: (
    font-size: 60px,
    line-height: 60px,
    letter-spacing: -3px
  ),
  80: (
    font-size: 80px,
    line-height: 80px,
    letter-spacing: -4px
  )
);

// type-sizes - links the type-size to correct font mapping
$type-sizes: (
  title--xxl: 80,
  title--xl: 60,
  title--l: 40,
  title--m: 32,
  title--s: 26,
  title--xs: 20,
  title--xxs: 18,
  body--l: 18,
  body--m: 16,
  body--s: 14,
  body--xs: 12
);