/**
 * Variables
 *
 * Description: Contains Sass variables
 * Version: 1.0.8
 * -----------------------------------------------------------------------------
 */

/**
 * Table of Contents: 
 *
 * 1.0 - Colors
 * 2.0 - Responsivness and sizes
 * 3.0 - Typography
 * 4.0 - Other
 * -----------------------------------------------------------------------------
 */


/**
 * 1.0 - Colors
 * -----------------------------------------------------------------------------
 */

// Primary colors
$black:							#202020;
$white:							#fff;
$red:							#d43333;
$red-dark:						#b20e0e;
$red-darker:					#751414;

// Secondary colors
$gold:							#c5af76;
$gold-light:					#d9c89a;
$gold-lighter:					#e8dec0;
$gold-dark:						#bda770;
$gold-darker:					#80714d;

// Background colors ( used largely for background blocks and large content areas )
$grey:							#bcbec0;
$grey-light:					#e6e7e8;
$grey-lighter:					#f1f2f2;
$grey-dark:						#939598;
$grey-darker:					#404040;

// Tertiary colors ( primarily for content-specific needs, such as alerts, content areas and illustrations )
$pink:							#eca3a3;
$pink-light:					#f5cccc;
$pink-lighter:					#f9e1e1;
$pink-lightest:					#fdf5f5;

$sepia:							#e2d7bb;
$sepia-light:					#f1ebdd;
$sepia-lighter:					#f7f4eb;
$sepia-lightest:				#fdfbf9;

$green:							#a1cb9c;
$green-light:					#cbe2c8;
$green-lighter:					#e0eedf;
$green-lightest:				#f5faf4;

$blue:							#94c0d0;
$blue-light:					#cae0e8;
$blue-lighter:					#dfedf1;
$blue-lightest:					#f5f9fb;

$tan:							#f0bb8c;
$tan-light:						#f7ddc6;
$tan-lighter:					#fbebdd;
$tan-lightest:					#fdf8f3;

// New colors
$orange:						#FF6600;

// Color usage
$accent-color:					$red;
$accent-color-dark:				$red-dark;
$accent-color-darker:			$red-darker;
$accent-color-negative:			$gold;
$accent-color-negative-dark: 	$gold-dark;

$text-color:					$black;
$text-color-light:				$grey-dark;

$link-color:					$red;
$link-focus-color:				$red-dark;
$link-visited-color:			$red-darker;
$hover-background-color:		darken($pink-lightest, 3%);

$error-color:					$red;
$nav-selected-bg:				$grey-lighter;
$nav-selected-color:			$red;



/**
 * 2.0 - Responsivness and sizes
 * -----------------------------------------------------------------------------
 */

// Large (desktop)
$device-large-max:				1185px;
$device-large-min:				971px;

// Medium (tablet)
$device-medium-max:				970px;
$device-medium-min:				768px;

// Small (phone)
$device-small-max:				767px;
$device-small-min:				0px;

// XSmall (small phone)
$device-xsmall-max:				320px;
$device-xsmall-min:				0px;



/**
 * 3.0 - Typography
 * -----------------------------------------------------------------------------
 */

// Font family
$font-family-base:				'Source Sans Pro', Helvetica Neue, Helvetica, Arial, sans-serif;
$font-family-alt:				'brandosans', Georgia, serif;

// Breakpoints
$typography-breakpoints: (
	small: $device-small-min,
	medium: $device-medium-min,
	large: $device-large-min
);


// Base font-size
$font-size-base:				125%; // 20px
$font-size-base-pixel:			20px;


// Base line-height
$line-height-standard:			1.4; // 28px
$line-height-standard-pixel:	28px; // 28px


// Header font-sizes
// Example: small: (font-size, line-height, margin-bottom, padding-top) (We use padding-top beacues if we used margins they would collapse into each other.)
$h1-sizes: (
	small: (28px, 34px, 13px, 10px),
	medium: (48px, 58px, 22px)
);
$h1-small-sizes: (
	small: (25px, 30px, 6px),
	medium: (36px, 44px, 13px)
);
$h2-sizes: (
	small: (25px, 30px, 8px, 10px),
	medium: (36px, 44px, 8px, 19px)
);
$h3-sizes: (
	small: (20px, 28px, 8px, 10px),
	medium: (28px, 36px, 8px, 13px)
);
$h4-sizes: (
	small: (18px, 26px, 6px, 12px),
	medium: (24px, 32px, 6px, 17px)
);
$h5-sizes: (
	small: (18px, 26px, 4px, 4px),
	medium: (20px, 28px, 4px, 4px)
);
$h6-sizes: (
	small: (18px, 26px, 4px, 4px),
	medium: (20px, 28px, 4px, 4px)
);

$miktosajt-logo-sizes: (
	small: (18px, 22px, 15px, 5px),
	medium: (32px, 36px, 0px, 6px),
	large: (36px, 44px, 0px, 6px)
);

// Paragraph font-sizes
$p-sizes: (
	small: (18px, 26px, 20px),
	medium: (20px, $line-height-standard-pixel, 20px)
);
$p-small-sizes: (
	null: (17px, 25px, 4px)
);

$preamble-sizes: (
	small: (18px, 24px, 20px),
	medium: (22px, 30px, 20px)
);



/**
 * 4.0 - Other
 * -----------------------------------------------------------------------------
 */

$margin-standard:				1.5em; // 20px
$margin-standard-pixel:			30px;
$transition-time: 				0.4s;
$transition-time-short:			0.2s;
$border-radius:	 				4px;