// Variables
// --------------------------------------------------

// Typography
// -------------------------
@font-family-sans-serif:  'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@font-family-serif:       'Chronicle SSm A', 'Chronicle SSm B', Georgia, serif;
@font-family-monospace:   Monaco, Menlo, Consolas, 'Courier New', monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil(@font-size-base * 1.25); // ~18px
@font-size-small:         ceil(@font-size-base * 0.85); // ~12px
@font-size-mini:          ceil(@font-size-base * 0.75); // ~11px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor(@font-size-base * @line-height-base); // ~20px

@headings-font-family:    @font-family-sans-serif;
@headings-font-weight:    500;
@headings-line-height:    1.1;


// Common
// -------------------------
// Based on 14px font-size and 1.428 line-height (~20px to start)

@padding-base-vertical:          8px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         14px;
@padding-large-horizontal:       18px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@border-radius-base:             7px;
@border-radius-large:            10px;
@border-radius-small:            5px;


// Palette
// --------------------------------------------------

// Grays
// -------------------------

@black:                 #000;
@gray-darkest:          #111;
@gray-darker:           #262829;
@gray-dark:             #333;
@gray:                  #555;
@gray-light:            #a2a8a8;
@gray-lighter:          #eee;
@gray-lightest:         #f5f5f5;
@white:                 #fff;

// Brand colors
// -------------------------

@brand-primary:         #33b5e5; // blue
@brand-info:            #a6c;    // purple
@brand-success:         #9c0;    // green
@brand-warning:         #fb3;    // yellow/orange
@brand-danger:          #f44;    // red
@brand-error:           @brand-danger;
@brand-inverse:         #fff;

@brand-primary-dark:    #09c;    // dark blue
@brand-info-dark:       #93c;    // dark purple
@brand-success-dark:    #690;    // dark green
@brand-warning-dark:    #f80;    // dark yellow/orange
@brand-danger-dark:     #c00;    // dark red

// Links
// -------------------------

@link-color:            @brand-primary; // #25bac7;
@link-hover-color:      darken(@link-color, 10%);

// Buttons
// -------------------------

@btn-default-color:              #222;
@btn-default-bg:                 #e5e5e5;
@btn-default-border:             @btn-default-bg;

@btn-primary-color:              darken(#fff, 1%);
@btn-primary-bg:                 @brand-primary;
@btn-primary-border:             @btn-primary-bg;

@btn-success-color:              darken(#fff, 1%);
@btn-success-bg:                 @brand-success;
@btn-success-border:             @btn-success-bg;

@btn-jade-color:                 darken(#fff, 1%);
@btn-jade-bg:                    #62c98f;
@btn-jade-bg-hover:              #20c97b;
@btn-jade-border:                @btn-jade-bg;

@btn-warning-color:              darken(#fff, 1%);
@btn-warning-bg:                 @brand-warning;
@btn-warning-border:             @btn-warning-bg;

@btn-danger-color:               darken(#fff, 1%);
@btn-danger-bg:                  @brand-danger;
@btn-danger-border:              @btn-danger-bg;

@btn-info-color:                 darken(#fff, 1%);
@btn-info-bg:                    @brand-info;
@btn-info-border:                @btn-info-bg;

@btn-inverse-color:              @gray-darker;
@btn-inverse-bg:                 @brand-inverse;
@btn-inverse-border:             @btn-inverse-bg;