$font-sizes: (

    'header--1': 96px,
    'header--2': 60px,
    'header--3': 48px,

    'sub--1': 34px,
    'sub--2': 24px,
    'sub--3': 20px,

    'body--1': 16px,
    'body--2': 18px,
    'body--3': 14px

);

$font-weights: (

    'header--1': 200,
    'header--2': 200,
    'header--3': 200,

    'sub--1': 200

);

$margins: (

    'header--1': .5em 0,
    'header--2': .5em 0,
    'header--3': .5em 0,

    'sub--1': 1em 0 .25em,
    'sub--2': 1em 0 .25em,
    'sub--3': 1em 0 .25em,

    'body--1': 0 0 1em,
    'body--2': 0 0 1em,
    'body--3': 0 0 1em

);

$letter-spacings: (

    'header--1': -1.5px,
    'header--2': -0.5px,

    'sub--1': 0.25px

);

@mixin font-size($type) {
    font-size: map-get($font-sizes, $type);
}

@mixin margin($type) {
    margin: map-get($margins, $type);
}

@mixin typography($type) {

    font-family: 'Roboto', sans-serif;
    @include font-size($type);

    $font-weight: map-get($font-weights, $type);
    $letter-spacing: map-get($letter-spacings, $type);

    @if $font-weight {
        font-weight: $font-weight;
    }

    @if $letter-spacing {
        letter-spacing: $letter-spacing;
    }

}

@function classname($num) {
    @return '.--' + $num;
}