/* Colors */

// Defaults
$base-color-val: #dedee5;
$base-color-alt-val: #f5f5f7;

$brand-color-val: #3e4349;
$brand-color-alt-val: #6d7680;

$accent-color-val: #3ba9d2;
$accent-color-alt-val: #79c4e0;

$red: tomato;
$green: #4fe190;
$yellow: #e8bb1a;

// Variables
$base-color: var(--base-color);
$base-color-alt: var(--base-color-alt);

$brand-color: var(--brand-color);
$brand-color-alt: var(--brand-color-alt);

$accent-color: var(--accent-color);
$accent-color-alt: var(--accent-color-alt);

/* Fonts */

// Fonts
$base-font: Helvetica, Arial, sans-serif;
$head-font: $base-font;

// Font size
$base-fontsize: 16px;
$tiny-fontsize: $base-fontsize - 4;
$small-fontsize: $base-fontsize - 2;
$bigger-fontsize: $base-fontsize + 4;

// Line height
$base-lineheight: 1.7;
$head-lineheight: 1.2;

/* Spacing */

// Margin
$margin: 20px;
$margin-xlarge: 120px;
$margin-large: 80px;
$margin-medium: 40px;
$margin-small: 10px;

// Padding
$padding: 20px;
$padding-xlarge: 120px;
$padding-large: 80px;
$padding-medium: 40px;
$padding-small: 10px;

// Grid spacing
$grid-xlarge: 45px;
$grid-large: 35px;
$grid: 35px;
$grid-medium: 25px;
$grid-small: 15px;
$divider: 25px;

// Variables
// $margin:					var(--margin);
// $margin-xlarge:				var(--margin-xlarge);
// $margin-large:				var(--margin-large);
// $margin-medium:				var(--margin-medium);
// $margin-small:				var(--margin-small);
// $paragraph:					var(--paragraph);

// $padding:					var(--padding);
// $padding-xlarge:			var(--padding-xlarge);
// $padding-large:				var(--padding-large);
// $padding-medium:			var(--padding-medium);
// $padding-small:				var(--padding-small);

/* Breakpoints */

$mobile-breakpoint: 480px;
$tablet-breakpoint: 768px;
$desktop-breakpoint: 1024px;
$large-screen-breakpoint: 1200px;

/* Mixins */

// Border radius
@mixin border-radius($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
};

// Transition
@mixin transition($transition) {
-moz-transition: $transition;
-o-transition: $transition;
-webkit-transition: $transition;
transition: $transition;
};

// Box shadow
@mixin box-shadow($box-shadow) {
-webkit-box-shadow: $box-shadow;
-moz-box-shadow: $box-shadow;
box-shadow: $box-shadow;
};

// Scale
@mixin scale($scale) {
-moz-transform: scale($scale);
-ms-transform: scale($scale);
-o-transform: scale($scale);
-webkit-transform: scale($scale);
}

// Vertical align
@mixin vertical-align($position: relative) {
position: $position;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

// Horizontal align
@mixin horizontal-align($position: absolute) {
position: $position;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}

// Center align
@mixin center-align($position: fixed) {
position: $position;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

// Flex
@mixin flex() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}

// CSS variable + iefix
@mixin css-variable($property, $iefix, $variable) {
	#{$property}: $iefix;
	#{$property}: $variable;
}