// =============================================================================
// Variables
// =============================================================================

// ====================
// Colour definitions
// ====================

// Grays
// -------------------------
@black:                 #000;
@grayDarker:            #222;
@grayDark:              #333;
@gray:                  #555;
@grayLight:             #999;
@grayLighter:           #eee;
@white:                 #fff;

// Accent colors
// -------------------------
@blue:                  #049cdb;
@blueDark:              #0064cd;
@green:                 #093;
@red:                   #9d261d;
@yellow:                #ffc40d;
@orangeLight:           #ffc768;
@orange:                #f89406;
@orangeDark:            #d54e21;
@pink:                  #f71570;
@purple:                #7a43b6;

// ====================
// Scaffolding
// ====================
@bodyBackground:        #e3ecf2;
@topbarBackground:      #262626;
@textColor:             @gray;

@highlightBackground:   #ffffdf; // Used for slider, sticky posts...
@highlightBlue:         #f2f7fc; // Used for author boxes, author replies...

// Widths
@siteWidth:             1080px;
@mainWidth:             650px;
@sideWidth:             310px;
@gutterWidth:           40px;
@smallGutterWidth:      25px;

// ====================
// Links
// ====================
@linkColor:             #3083aa;
@linkColorHover:        @orangeDark;

// ====================
// Selections
// ====================
@selectionColor:		#568cbb;
@selectionTextColor:	@white;

// ====================
// Typography
// ====================
@sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily:       Georgia, Cambria, "Bitstream Charter", serif;
@monoFontFamily:        Monaco, Consolas, "Courier New", monospace;

@baseFontSize:          16; // 16px, 1.6 rem
@baseFontFamily:        @serifFontFamily;
@baseLineHeight:        1.8;
@altFontFamily:         'PT Serif', @serifFontFamily;

@headingsFontSize:      26;
@headingsFontFamily:    @altFontFamily;
@headingsFontWeight:    bold;
@headingsColor:         inherit; // empty to use @textColor

// ====================
// Alert messages
// ====================

@alertText:             @grayDarker;
@alertBackground:       @grayLighter;
@alertBorder:           darken(@grayLighter, 8%);

@warningText:           #3b3601;
@warningBackground:     #fef9c7;
@warningBorder:         darken(spin(@warningBackground, -5), 25%);

@errorText:             darken(#7a0b0a, 10%);
@errorBackground:       #f2dede;
@errorBorder:           darken(spin(@errorBackground, -10), 25%);

@successText:           #0d370d;
@successBackground:     #dff0d8;
@successBorder:         darken(spin(@successBackground, 10), 40%);

@infoText:              #0c3346;
@infoBackground:        #d9edf7;
@infoBorder:            @blue;