/*!
* www.KNACSS.com V4.3.4 (27 août 2015) @author: Raphael Goetter, Alsacreations
* Licence WTFPL http://www.wtfpl.net/
*/

// Config file and project variables

// import default variables
@import "knacss/_00-config";

// font sizes
@root-font-size        : 62.5%; // if "62.5%" then 1rem = 10px
@root-font-size-small  : 65.1%; // 1rem ~= 13px
@root-font-size-medium : 67.7%; // 1rem ~= 13px
@root-font-size-large  : 72.9%; // 1rem ~= 14px
@base-font-size        : 1.2rem; // equiv "12px" (1.2 * @root-font-size)
@h1-size               : 2.8rem; // equiv "32px"
@h2-size               : 2.4rem; // equiv "28px"
@h3-size               : 2.0rem; // equiv "24px"
@h4-size               : 1.6rem; // equiv "20px"
@h5-size               : 1.4rem; // equiv "18px"
@h6-size               : 1.2rem; // equiv "16px"
@base-line-height      : 1.5;
@headings-line-height  : 1.0;
@paragraph-line-height : 1.8;

// font stacks
@font-stack-common      : Merriweather, Georgia, serif; // common font
@font-stack-headings    : Raleway, "Open Sans", Arial, sans-serif; // headings font
@font-stack-monospace   : Consolas, "DejaVu Sans Mono", Courier, monospace; // monospace font
@font-stack-universal   : "Open Sans", FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack

// font colors
@base-color             : #212121; // text color on body and content
@primary-color          : #000; // text color on primary elements
@secondary-color        : #8CB4EC; // text color on secondary elements
@headings-color         : #000; // text color on headings
@headings-1-color       : #000; // text color on headings level 1
@headings-2-color       : #000; // text color on headings level 2
@headings-3-color       : #000; // text color on headings level 3
@base-color-link        : #09C; // base links color
@base-color-link-hover  : #2053AB; // base hovered/focused links color

// backgrounds
@base-background        : #fff; // body background color
@primary-background     : #2053AB; // primary elements background color
@secondary-background   : #fff; // secondary elements background color

// spacings (choose unit you prefer)
@tiny-value             : .5rem; // tiny value for margins / paddings
@tiny-plus-value        : .7rem; // tiny+ value for margins / paddings
@small-value            : 1rem; // small value for margins / paddings
@small-plus-value       : 1.5rem; // small+ value for margins / paddings
@medium-value           : 2rem; // medium value for margins / paddings
@medium-plus-value      : 3rem; // medium+ value for margins / paddings
@large-value            : 4rem; // large value for margins / paddings
@large-plus-value       : 6rem; // large value for margins / paddings
@extra-large-value      : 8rem; // extra large value for margins / paddings
@extra-large-plus-value : 12rem; // extra large value for margins / paddings
@ultra-large-value      : 16rem; // ultra large value for margins / paddings
@ultra-large-plus-value : 20rem; // ultra large value for margins / paddings

// breakpoints (choose unit you prefer)
@tiny-screen            : 320px; // tiny screens media query (less-equal than 320px)
@small-screen           : 640px; // screens between 481px and 640px
@medium-screen          : 960px; // screens between 769px and 960px
@large-screen           : 1280px; // screens between 1025px and 1280px

// media queries
@mq-tiny: ~"only screen and (max-width: @{tiny-screen})";
@mq-small: ~"only screen and (min-width: @{tiny-screen})";
@mq-medium: ~"only screen and (min-width: @{small-screen})";
@mq-large: ~"only screen and (min-width: @{medium-screen})";

// sidebar module
@sidebar-medium-width: 240px;
@sidebar-large-width: 320px;
