//** Colors

$base-colors: (
        'base': #65656d,
        'primary': #f7931d,
        'secondary': #0d5e89,
        'attention': #fd5f5f,
        'background': #1a2229
);

@function color($key: 'primary') {
  @return map-get($base-colors, $key);
}

@function color-level($color-name: 'primary', $level: 0) {
        $color: color($color-name);
        $color-base: if($level < 0, black, white);
        @return mix($color-base, $color, abs($level) * 10%);
}

@function color-lightness($color-name: 'primary', $level: 0) {
        $color: color($color-name);
        @if($level < 0) {
                @return darken($color, abs($level) * 10%);
        } @else {
                @return lighten($color, abs($level) * 10%);
        }
}

@function color-alpha($color-name: 'primary', $opacity: 0) {
        $color: color($color-name);
        @return transparentize($color, 1 - ($opacity/10));
}

$base-color: color('base');
$base-color-light: color-lightness('base', 2.5);
$base-color-lighter: color-lightness('base', 4.5);
$base-color-lightest: color-lightness('base', 5.5);


$primary-color: color('primary');

$secondary-color: color('secondary');

$attention-color: color('attention');

$background-color: color('background');
$background-color-light: color-lightness('background', 1);
$background-color-lighter: color-lightness('background', 7.5);

$ok-color: #1e9b01;
$green-color: #1e9b01;
$red-color: #f60101;


//** Body
$gutter: 10px;
$main-width: 1200px;
$aside-width: 280px;
$aside-margin: 30px;
$content-main-width: $main-width - $aside-width - $aside-margin;
$body-bg: $background-color-lighter;
$border-radius-base: 10px;
$text-color: $base-color;
$text-color-light: $base-color-light;

//** Links
$link-color: $secondary-color !default;
$link-hover-color: lighten($link-color, 20%) !default;
$link-decoration: none !default;
$link-hover-decoration: underline !default;
$no-dec-link-color: $text-color;


//** Typography
$font-family-sans-serif: "SegoeUI", Arial, Helvetica, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
//$font-family-heading: 'ProximaNova', Arial, Helvetica, sans-serif !default;
$font-family-heading: $font-family-sans-serif !default;
$font-family-base: $font-family-sans-serif !default;

$font-size-base: 15px !default;
$font-size-l: 18px !default;
$font-size-s: 12px !default;
$font-size-h1: 18px !default;
$font-size-h2: 18px !default;
$font-size-h3: 17px !default;
$font-size-h4: 16px !default;
$font-size-h5: 15px !default;
$font-size-h6: 14px !default;

//** Buttons
$btn-border-width: 2px;
$btn-font-size: $font-size-base;
$btn-font-size-l: $font-size-l;
$btn-font-size-s: $font-size-s;
$btn-height: 40px;
$btn-height-l: 60px;
$btn-height-s: 30px;
$btn-padding: 0 20px;
$btn-padding-l: 0 40px;
$btn-padding-s: 0 10px;


//** Forms
$input-bg-color: transparent;
$input-brd-color: $base-color-light;
$input-focus-brd-color: #43c1d0;
$input-height: 40px;
$input-padding: 10px;
$textarea-height: 120px;
$input-placeholder-color: $base-color-light;

$input-checkbox-size: 28px;

//** Tables
$th-bg-color: $base-color-light;
$td-bg-color: #fff;
$td-brd-color: $base-color-lighter;
$td-padding: ($gutter/2) $gutter*2;