// Color system

$black:       #000000 !default;
$blue:        #348fe2 !default;
$cyan:        #49b6d6 !default;
$dark:        #2d353c !default;
$dark-darker: #1a2229 !default;
$green:       #32a932 !default;
$indigo:      #8753de !default;
$lime:        #90ca4b !default;
$light:       #f2f3f4 !default;
$orange:      #f59c1a !default;
$purple:      #727cb6 !default;
$pink:        #fb5597 !default;
$red:         #ff5b57 !default;
$silver:      #b6c2c9 !default;
$teal:        #00acac !default;
$white:       #FFFFFF !default;
$yellow:      #ffd900 !default;
$inverse:     $dark !default;
$link-color:  $blue !default;
$gray-100:    #f8f9fa !default;
$gray-200:    #e9ecef !default;
$gray-300:    #dee2e6 !default;
$gray-400:    #ced4da !default;
$gray-500:    #adb5bd !default;
$gray-600:    #6c757d !default;
$gray-700:    #495057 !default;
$gray-800:    #343a40 !default;
$gray-900:    #212529 !default;
$colors: (
	'black': $black,
	'cyan': $cyan,
	'dark': $dark,
	'dark-darker': $dark-darker,
	'green': $green,
	'indigo': $indigo,
	'lime': $lime,
	'light': $light,
	'orange': $orange,
	'purple': $purple,
	'pink': $pink,
	'red': $red,
	'silver': $silver,
	'teal': $teal,
	'white': $white,
	'yellow': $yellow,
	'muted': darken($silver, 30%),
	'aqua': $cyan,
);
$theme-colors: (
	'dark': $dark,
	'inverse': $dark,
	'black': $black,
	'white': $white,
	'grey': $silver,
	'muted': $silver,
	'silver': $silver,
	'lime': $lime,
	'aqua': $cyan
);
$primary-color:   'teal' !default;
$primary:          map-get($colors, $primary-color) !default;
$success:          $teal !default;
$warning:          $orange !default;

@if $primary-color == 'black' {
	$primary: lighten($dark, 20%);
}


// Component Color Setting 
$component-active-bg:                           $blue !default;
$progress-bar-bg:                               $blue !default;
$custom-control-indicator-checked-disabled-bg:  rgba($blue, .5) !default;


// Grid & Container Setting

$spacer: rem(16px) !default;
$grid-gutter-width: 30px !default;
$grid-breakpoints: (
	xs: 0,
	sm: 576px,
	md: 768px,
	lg: 992px,
	xl: 1200px,
	xxl: 1660px,
  xxxl: 1900px
);
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;


// Z-index Setting

$header-zindex:           1030 !default;
$page-title-zindex:       1020 !default;
$footer-zindex:           1020 !default;
$footer-copyright-zindex: 1020 !default;
$theme-panel-zindex:      1020 !default;


// Font Setting

$font-family-base:       'Open Sans', sans-serif !default;
$font-size-base:         rem(14px) !default;
$font-size-sm:					 rem(13px) !default;
$font-size-lg:					 rem(16px) !default;
$line-height-base:			 1.5 !default;
$line-height-sm:				 1.3 !default;
$line-height-lg:				 1.8 !default;


// Radius Setting

$border-radius:           4px !default;
$border-radius-lg:        6px !default;
$border-radius-sm:        2px !default;


// Body Setting

$body-bg:                $white !default;
$body-color:             lighten($black, 20%);
$body-letter-spacing:    0.25px !default;


// Heading / Dropdown / Paragraph Setting

$headings-font-weight:    500 !default;
$dropdown-font-size: 			$font-size-sm !default;
$paragraph-margin-bottom: rem(30px) !default;


// Pagination Setting

$pagination-border-width:        2px !default;
$pagination-color:		           $dark !default;
$pagination-hover-bg:            $white !default;
$pagination-hover-color:         $dark !default;
$pagination-hover-border-color:  $gray-500 !default;
$pagination-active-color:        $white !default;
$pagination-active-bg:           $dark !default;
$pagination-active-border-color: $dark !default;


// Card Setting
$card-border-width: 2px !default;
$card-border-color: $gray-300 !default;
$card-cap-bg:       $gray-300 !default;
$card-spacer-y:     rem(10px) !default;
$card-spacer-x:     rem(15px) !default;


// Input Setting

$input-border-width: 2px !default;