$theme: (

    'primary':  #ffffff, //Main background colour
    'secondary': #54678E, //Thortful blue secondary background colour

    'negative': #ff6900, //General negative colour

    'accent--1': #ff6900, //Thortful orange main accent colour
    'accent--2': #f4f4f4, //Sidebar link border
    'accent--3': #e6e6e6, //Input border colour

    'font--1': #000000, //Main text colour
    'font--2': #ffffff, //Buttons
    'font--3': #ff4d4d, //Links in text
    'font--4': #455a64, //Sidebar active link

    'facebook': #3b5998, //Facebook blue
    'twitter': #1da1f2 //Twitter blue

);

@mixin theme($property, $ref, $colour: 0, $extend: ()) {
    
    @if $colour == 0 {
        $colour: map-get(map-merge($theme, $extend), $ref);
    }
    
    #{$property}: $colour;
    
}

@mixin theme-darken($property, $ref, $amount, $extend: ()) {
    @include theme($property, $ref, darken(map-get($theme, $ref), $amount), $extend);
}

@mixin background($colour, $extend: ()) {
    @include theme('background', $colour, 0, $extend);
}

@mixin color($colour, $extend: ()) {
    @include theme('color', $colour, 0, $extend);
}