// -------------------------------------------------------------------------
// COMMENTS
// -------------------------------------------------------------------------

// This sheet: Styling for all typography.

// -------------------------------------------------------------------------
// BASICS
// -------------------------------------------------------------------------

/*
Using local fonts? Check out Font Squirrel's webfont generator: 
      http://www.fontsquirrel.com/tools/webfont-generator

This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets

@font-face {
    font-family: 'FontName';
    src: url('../fonts/FontName.eot');
    src: url('../fonts/FontName.eot?iefix') format('eot'),
         url('../fonts/FontName.woff') format('woff'),
         url('../fonts/FontName.ttf') format('truetype'),
         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
    font-weight: normal;
    font-style: normal; }

*/

html {
    font-family: @font-family-sans-serif;
    font-weight: 200;
    font-size: @font-size-base;
    line-height: @line-height-base;
}

// -------------------------------------------------------------------------
// VARIABLES
// -------------------------------------------------------------------------

@font-family-sans-serif:  "Lato", "Helvetica Neue", Helvetica, sans-serif;
@font-family-serif:       Georgia, Garamond, Times, serif;
@font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          1.3em;
@font-size-large:         (@font-size-base * 1.25);
@font-size-small:         (@font-size-base * 0.55);

@line-height-base:        1.8;
@line-height-computed:    floor(@font-size-base * @line-height-base);

@headings-font-family:    inherit;
@headings-font-weight:    900;
@headings-line-height:    1.2;

// -------------------------------------------------------------------------
// COLORS
// -------------------------------------------------------------------------

/* Off-black for text. :) */
body, select, input, textarea {color: @text-color;}

// -------------------------------------------------------------------------
// HEADINGS
// -------------------------------------------------------------------------

h1, h2, h3, h4, h5, h6 {
    font-family: @headings-font-family;
    font-weight: @headings-font-weight;
    line-height: @headings-line-height;
}

h1  {font-size: 3.7em;}
h2  {font-size: 2.7em; margin: .9em 0 .9em 0;}
h3  {font-size: 1.7em; margin: 1.2em 0 1.2em 0;}
h4  {font-size: 1.3em;}
h5  {font-size: 0.83em;}
h6  {font-size: 0.75em;}

// -------------------------------------------------------------------------
// BODY
// -------------------------------------------------------------------------

.small {
    font-size: @font-size-small;
}

// -------------------------------------------------------------------------
// LINKS
// -------------------------------------------------------------------------

a {
    color: @link-color; 
    text-decoration: none;
    border-bottom: 1px solid @link-color;
    -webkit-transition: color .2s ease-out;
    -webkit-transition-property: color;
    -webkit-transition-duration: .2s;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-delay: initial;
    -moz-transition: color .2s ease-out;
    -o-transition: color .2s ease-out;
    -ms-transition: color .2s ease-out;
    transition: color .2s ease-out;
    transition-property: color;
    transition-duration: .2s;
    transition-timing-function: ease-out;
    transition-delay: initial;
}

a:hover {
    color: @link-color-hover;
}