//
// Codebase variables and Bootstrap overrides
// --------------------------------------------------

// Colors
$white:                     #fff !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;
$black:                     #000 !default;

$gray-lighter:              $gray-100 !default;
$gray-light:                $gray-200 !default;
$gray:                      $gray-400 !default;
$gray-dark:                 $gray-600 !default;
$gray-darker:               $gray-800 !default;

$brand-primary:             #3f9ce8 !default;
$brand-light:               lighten($brand-primary, 15%) !default;
$brand-lighter:             lighten($brand-primary, 30%) !default;
$brand-dark:                $gray-800 !default;
$brand-darker:              $gray-900 !default;

$brand-success:             #9ccc65 !default;
$brand-success-light:       #ebf5df !default;
$brand-info:                #26c6da !default;
$brand-info-light:          #e3f4fc !default;
$brand-warning:             #ffca28 !default;
$brand-warning-light:       #fcf7e6 !default;
$brand-danger:              #ef5350 !default;
$brand-danger-light:        #fae9e8 !default;
$brand-inverse:             $brand-dark !default;


// Scaffolding
$body-bg:                   #f0f2f5 !default;
$body-bg-dark:              darken($body-bg, 4%) !default;
$body-bg-light:             lighten($body-bg, 2%) !default;

$body-color:                #575757 !default;
$body-color-dark:           #171717 !default;
$body-color-light:          $body-bg-dark !default;

$link-color:                $brand-primary !default;
$link-hover-color:          darken($link-color, 20%) !default;
$link-hover-decoration:     none !default;


// Typography
$font-family-sans-serif:    "Nunito Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$font-family-monospace:     "SFMono-Regular", Consolas, Menlo, Monaco, "Liberation Mono", "Courier New", monospace !default;
$font-family-base:          $font-family-sans-serif !default;

$font-family-fontawesome:   'FontAwesome', 'Font Awesome 5 Free', 'Font Awesome 5 Pro';

$font-size-root:            14px !default;
$font-size-base:            1rem !default;

$line-height-base:          1.5 !default;

$h1-font-size:              2.571428571rem !default; // 36px (with 14px base)
$h2-font-size:              2.142857142rem !default; // 30px (with 14px base)
$h3-font-size:              1.857142857rem !default; // 26px (with 14px base)
$h4-font-size:              1.571428571rem !default; // 22px (with 14px base)
$h5-font-size:              1.285714286rem !default; // 18px (with 14px base)
$h6-font-size:              1rem !default;

$font-size-xl:              1.428571429rem !default; // 20px (with 14px base)
$font-size-lg:              1.285714286rem !default; // 18px (with 14px base)
$font-size-md:              1.142857143rem !default; // 16px (with 14px base)
$font-size-sm:              0.928571429rem !default; // 13px (with 14px base)
$font-size-xs:              0.857142857rem !default; // 12px (with 14px base)

$headings-margin-bottom:    20px !default;
$headings-font-family:      $font-family-base !default;
$headings-font-weight:      600 !default;
$headings-line-height:      1.2 !default;
$headings-color:            $body-color-dark !default;
$headings-small-color:      lighten($body-color-dark, 30%) !default;


// Z-index master list additions
$zindex-block-pinned:       1031 !default;
$zindex-sidebar:            1032 !default;
$zindex-page-overlay:       1033 !default;
$zindex-side-overlay:       1034 !default;
$zindex-block-fullscreen:   1035 !default;


// Buttons
$btn-hero-line-height:      16px !default;
$btn-hero-line-height-sm:   16px !default;
$btn-hero-line-height-lg:   20px !default;

$btn-hero-padding-x:        38px !default;
$btn-hero-padding-y:        14px !default;

$btn-hero-padding-x-sm:     34px !default;
$btn-hero-padding-y-sm:     11px !default;

$btn-hero-padding-x-lg:     42px !default;
$btn-hero-padding-y-lg:     15px !default;


// Header
$header-height:             68px !default;           // Best values > 50px and < 80px
$header-bg:                 $white !default;
$header-inverse-bg:         $brand-dark !default;


// Sidebar and Side Overlay
$sidebar-bg:                $white !default;
$sidebar-inverse-bg:        $brand-dark !default;
$sidebar-width:             230px !default;
$sidebar-mini-width:        54px !default;

$side-overlay-bg:           $white !default;
$side-overlay-width:        320px !default;

$side-transition:           .26s cubic-bezier(0.470, 0.000, 0.745, 0.715) !default;
$main-nav-transition:       .2s cubic-bezier(0.250, 0.460, 0.450, 0.940) !default;


// Layout Spaces
$space-base:                24px !default;                      // Content padding
$space-mobile:              12px !default;                      // Content padding in mobile
$space-side:                18px !default;                      // Content padding in side sections
$space-row-gutter-tiny:     6px !default;                       // Row with tiny gutter, even number: 2, 4, 6.. etc
$space-block:               20px !default;                      // Block padding
$space-boxed:               1200px !default;                    // Boxed content max width
$space-narrow:              92% !default;                       // Narrow content max width
$space-main-max-width:      1920px - $sidebar-width !default;   // Main content max width
$space-breaks: (
  5: (
    x: 5px,
    y: 5px
  ),
  10: (
    x: 10px,
    y: 10px
  ),
  15: (
    x: 15px,
    y: 15px
  ),
  20: (
    x: 20px,
    y: 20px
  ),
  30: (
    x: 30px,
    y: 30px
  ),
  50: (
    x: 50px,
    y: 50px
  ),
  100: (
    x: 100px,
    y: 100px
  ),
  150: (
    x: 150px,
    y: 150px
  ),
  200: (
    x: 200px,
    y: 200px
  ),
  300: (
    x: 300px,
    y: 300px
  )
) !default;