@import 'facades/setup';

$em-size: $font-size / 1em;
$em-unit: 1em;
$font-scale: 0 2 4 6 8;


@mixin font-size($size, $lines: lines-for-font-size($size)){
	$fsize: if(unit($size) == "em", $size, $size / $font-size);
	font-size: $fsize;
	@include leading($lines, $fsize);
}

@mixin leading($lines:1, $size:1em, $add-margin: false){
	line-height:rhythm($lines, $size);
	@if $add-margin == true { 
		@include margin-trailer($lines, $size);
	}
}

@function rhythm($lines, $size: $font-size){
	$r-height: $em-unit * $lines * $line-height / $size;
	$r-height: if( unit($r-height) == "px", $r-height / $em-size, $r-height);
	@return $r-height;
}

@mixin margin-trailer($lines, $size: $font-size){
	margin-bottom:rhythm($lines, $size);
}


@mixin margin-leader($lines, $size: $font-size){
	margin-top:rhythm($lines, $size);
}

@mixin padding-leader($lines, $size: $font-size){
	padding-top:rhythm($lines, $size);
}

@mixin padding-trailer($lines, $size: $font-size){
	padding-bottom:rhythm($lines, $size);
}


@function lines-for-font-size($size:$font-size) {
	$rhythm-line-height:if(unit($line-height) == "px", $line-height / $em-size, $line-height);
	$lines: ceil($size / $rhythm-line-height);
	@return $lines;
}

body{ font:#{$font-size}/#{rhythm(1)} $default-font-family; }

h1, h2, h3, h4, h5, h6, p, ol, ul{ 
	-webkit-margin-before:0;
	-webkit-margin-after:0;
}

h1{ 
	@include font-size(2em, 1);	
	@include margin-trailer(1, 2em);
}

h2{ 
	@include font-size(1.75em, 1);
	@include margin-trailer(1, 1.75em);
}

h3{ 
	@include font-size(1.5em, 1); 
	@include margin-trailer(1, 1.5em);
}

h4{ 
	@include font-size(1.25em, 1); 
	@include margin-trailer(1, 1.25em);
}

h5{ 
	@include font-size(1em, 1); 
	@include margin-trailer(1, 1em);
}

h6{ 
	@include font-size(0.9em, 1); 
	@include margin-trailer(1, 0.9em);
}

p, ul, ol{ 
	@include font-size(1em, 1); 
	@include margin-trailer(1, 1em);
}