// Font
@font-family-base: 'Helvetica Neue', Helvetica, Arial, sans-serif;
@font-family-code: Menlo, Monaco, Consolas, Courier, monospace;

// Breakpoints
@breakpoint-small: 768px;
@breakpoint-medium: 1024px;
@breakpoint-large: 1200px;

// Global Radius
@global-radius: 2px;

// Base Colors
@background-body: #fff;
@color-body: #202020;
@color-headings: #000;

@color-link: #256bc9;
@color-link-hover: #e21e3b;

// Baseline
@base-line: 24px; // 24px by default
@base-line-big: 28px; // 28px by default
@base-line-small: 20px; // 20px by default
@base-line-smaller: 16px; // 16px by default

// Grid
@grid-columns: 12;
@grid-width: 1128; // pixels
@grid-gutter: @base-line;
@grid-gap: (unit(@grid-gutter)/(@grid-width/100))*1%;

// Font Size
@font-size: 15; // 15 (px) default
@font-size-big: 120%; // 18px or 120% by default
@font-size-small: 86%; // 13px or 86% by default
@font-size-smaller: 74%; // 11px or 74%  by default

// Table
@font-size-table: 94%; // 14px or 94% by default

// Form Labels
@font-size-form-label: 94%; // 14px or 94% by default

// Labels & Badges
@font-size-label: 11px;

// Tools (dropdown, accordion, navigation, pagination, tabs)
@font-size-tools: 94%; // 14px or 94% by default

// Controls
@font-size-btn-normal: 1.4rem; // 14px or 94% by default
@font-size-btn-small: 1.2rem; // 12px or 80% by default
@font-size-btn-big: 1.8rem; // 18px or 120% by default
@font-size-btn-upper-normal: 1.1rem; // 11px or 74% by default
@font-size-btn-upper-small: 1rem; // 10px or 66% by default
@font-size-btn-upper-big: 1.4rem; // 14px or 94% by default

// Headings Size
@font-size-title: 4.8rem; // 48px by default
@font-size-h1: 3rem; // 30px
@font-size-h2: 2.4rem; // 24px
@font-size-h3: 2rem; // 20px
@font-size-h4: 1.8rem; // 18px
@font-size-h5: 1.6rem; // 16px
@font-size-h6: 1.5rem; // 15px

// Half Margin
@margin-half: 16px;

// Mark
@color-mark: #202020;
@color-mark-background: #ffd61e;

// Dfn
@color-dfn-border: #202020;

// Pre
@color-pre-background: rgba(0, 0, 0, .03);

// Code
@color-code-background: rgba(0, 0, 0, .07);

// Kbd
@color-kbd: rgba(255, 255, 255, .85);
@color-kbd-background: #202020;

// Samp
@color-samp: rgba(255, 255, 255, .95);
@color-samp-background: #46a9fc;

// Highlighted
@color-highlighted-background: #f4f4f4;

// Table Colors
@color-table-stripped: #f8f8f8;

// Controls Height
@input-height: 40px;
@input-height-small: 32px;
@input-height-big: 56px;

// Button Padding
@padding-btn: 0 32px;
@padding-btn-outline: 0 31px;
@padding-btn-small: 0 20px;
@padding-btn-small-outline: 0 19px;
@padding-btn-big: 0 48px;
@padding-btn-big-outline: 0 47px;

// Input Padding
@padding-input: .9rem 1rem;
@padding-input-big: 1.5rem 1.2rem;
@padding-input-small: .7rem 1rem;

// Input Border Style
@input-border-size: 1px;
@color-input-background: #fff;
@color-input-border: #dfdfdf;

// Input Focus
@color-input-background-focus: #fff;
@color-input-border-focus: #222;

// Input Color
@color-input: rgba(0, 0, 0, .85);

// Input Append & Prepend
@background-input-append: #efefef;
@color-input-append: rgba(0, 0, 0, .6);

// Fieldset
@color-fieldset-border: rgba(0, 0, 0, .1);
@fieldset-border-size: 1px;

// Extra Colors
@color-default: #e5e5e5;
@color-primary: #2f77d1;
@color-success: #0A8754;
@color-error: #d11149;
@color-warning: #f4d31e;