//
// Ascribe
// -----------------
// Variables
//

// COLORS
@blueDeep:             #121417;
@blueMedium:           #003C69;
@blueBright:           #67C4DA;
@blueLight:            #d7e9ef;
@pink:                 #D8127D;

@white:                #fff;
@greyBg:               #fbfbfb;
@greySocial:           #b8b8b8;
@greyHr:               #979797;
@greyFooter:           #8c8c8c;
@greyText:             #595959;
@blackish:             #1e1e1e;
@black:                #000;

// social networks
@brand-twitter:              #00aced;
@brand-facebook:             #3b5998;
@brand-linkedin:             #007bb5;


//
// Typography
//
@font-size-base:      18px;
@font-size-small:     15px;
@font-size-mini:      13px;
@font-size-large:     24px;

@font-size-h1:        42px;
@font-size-h2:        32px;
@font-size-h3:        26px;
@font-size-h4:        22px;
@font-size-h5:        @font-size-base;
@font-size-h6:        @font-size-small;

@line-height-base:    24px;
@line-height-small:   22px;
@line-height-large:   28px;

@text-color:          @greyText;

@font-family-base:    "canada-type-gibson", sans-serif;
@font-weight-light:   300;
@font-weight-normal:  400;

@font-weight-base:    @font-weight-light;
@font-weight-bold:    @font-weight-normal;

@body-bg:             @white;


@link-color:          @blueBright;
@link-hover-color:    @pink;


@headings-font-family:      @font-family-base;
@headings-font-weight:      @font-weight-base;
@headings-line-height:      1.2;
@headings-color:            @pink;


//
// Spacing
//
@spacer:              40px;


//
// Responsive breakpoints
//
@screen-xs-min:       400px;
@screen-sm-min:       768px;
@screen-md-min:       900px;
@screen-lg-min:       1100px;

@screen-sm:           ~'min-width: @{screen-sm-min}';
@screen-md:           ~'min-width: @{screen-md-min}';
@screen-lg:           ~'min-width: @{screen-lg-min}';

// LEGACY
// mostly used in conjunction with max-width media queries
@smallWidth:          @screen-xs-min;
@middleWidth:         570px;
@phoneWidth:          600px;
@tabletWidth:         @screen-sm-min;


//
// Grid
//
@gutter-space:        (@spacer * 1.5);