@import './spacing';

// Default styling variables

// Color system
$brand-blue:                #023365 !default;
$brand-green:               #00E6B2 !default;
$crimson:                   #E24763 !default;
$amber:                     #FFD879 !default;
$dark-gray-1:               #293036 !default;
$dark-gray-2:               #46525C !default;
$dark-gray-3:               #677784 !default;
$light-gray-1:              #CBD5E0 !default;
$light-gray-1_5:            #F0F4F9 !default;
$light-gray-2:              #E2E8F0 !default;
$light-gray-3:              #F7FAFC !default;
$white:                     #fff !default;

// Shadows
$box-shadow-xs:               0 2px 5px 0 rgba(60,66,87, .12),0 1px 1px 0 rgba(0,0,0, .12);
$box-shadow-sm:               0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
$box-shadow-md:               0 7px 14px 0 rgba(60,66,87, .12), 0 3px 6px 0 rgba(0,0,0, .12);
$box-shadow-lg:               0 15px 35px 0 rgba(60,66,87, .12), 0 5px 15px 0 rgba(0,0,0, .12);
$box-shadow-xl:               0 50px 100px 0 rgba(60,66,87, .12), 0 15px 35px 0 rgba(60,66,87, .12), 0 5px 15px 0 rgba(0,0,0, .12);

$box-shadow:                  $box-shadow-md;

// Theme colors
$primary:                     $brand-blue !default;
$secondary:                   $light-gray-3 !default;
$accent:                      $brand-green !default;
$success:                     $brand-green !default;
$danger:                      $crimson !default;
$warning:                     $amber !default;
$light:                       $white !default;
$dark:                        $dark-gray-1 !default;

$theme-colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: map-merge(
  (
    "primary"       : $primary,
    "secondary"     : $secondary,
    "success"       : $success,
    "accent"        : $accent,
    "warning"       : $warning,
    "danger"        : $danger,
    "light"         : $light,
    "dark"          : $dark,
    "dark-gray-1"   : $dark-gray-1,
    "dark-gray-2"   : $dark-gray-2,
    "dark-gray-3"   : $dark-gray-3,
    "light-gray-1"  : $light-gray-1,
    "light-gray-1_5": $light-gray-1,
    "light-gray-2"  : $light-gray-2,
    "light-gray-3"  : $light-gray-3
  ),
  $theme-colors
);

// Gradients
$light-gradient:              linear-gradient(180deg, $light 0%, $light-gray-3 100%) !default;
$gradient-a:                  linear-gradient(180deg, $brand-green 0%, $brand-blue 100%) !default;
$gradient-b:                  linear-gradient(180deg, #0093A2 0%, $brand-green 100%) !default;

// Body
$body-bg:                     $light !default;
$body-color:                  $dark !default;

// Links
$link-color:                  $primary !default;
$link-decoration:             none !default;
$link-hover-color:            darken($link-color, 15%) !default;
$link-hover-decoration:       underline !default;


$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1600px,
) !default;

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
) !default;

$grid-columns:                12 !default;
$grid-gutter-width:           $spacing-md !default;

$container-padding-x:         $grid-gutter-width / 2 !default;

$spacers: () !default;
$spacers: map-merge(
  (
    0: 0,
    1: $spacing-2xs,
    2: $spacing-xs,
    3: $spacing-sm,
    4: $spacing-md,
    5: $spacing-lg,
    6: $spacing-xl,
    7: $spacing-2xl,
  ),
  $spacers
);

$negative-spacers: negativify-map($spacers) !default;

$layout-spacers: () !default;
$layout-spacers: map-merge(
  (
    'layout-1': $layout-2xs,
    'layout-2': $layout-xs,
    'layout-3': $layout-sm,
    'layout-4': $layout-md,
    'layout-5': $layout-lg,
    'layout-6': $layout-xl,
    'layout-7': $layout-2xl,
  ),
  $layout-spacers
);

// Typography
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:200,300,400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,500&display=swap');
$font-family-sans-serif:      'IBM Plex Sans', sans-serif !default;
$font-family-monospace:       'IBM Plex Mono', monospace !default;
$font-family-base:            $font-family-sans-serif !default;
$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
$font-size-lg:                $font-size-base * 1.25 !default;
$font-size-sm:                $font-size-base * .875 !default;
$font-weight-lighter:         100 !default;
$font-weight-light:           200 !default;
$font-weight-normal:          400 !default;
$font-weight-bold:            500 !default;
$font-weight-bolder:          700 !default;


$font-weight-base:            $font-weight-normal !default;
$line-height-base:            1.5 !default;
$line-height-sm:              1.2 !default;
$line-height-lg:              1.7 !default;

$lead-font-size:              $font-size-lg !default;
$lead-font-weight:            300 !default;

$paragraph-line-height:       1.5 !default;
$paragraph-margin-bottom:     $spacing-md !default;

$text-muted:                  $dark-gray-3;

//Headings
$h1-font-size:                $font-size-base * 2.5 !default;
$h2-font-size:                $font-size-base * 2 !default;
$h3-font-size:                $font-size-base * 1.75 !default;
$h4-font-size:                $font-size-base * 1.5 !default;
$h5-font-size:                $font-size-base * 1.25 !default;
$h6-font-size:                $font-size-base !default;

$headings-margin-bottom:      $spacing-xs !default;
$headings-font-family:        $font-family-base !default;
$headings-font-style:         normal !default;
$headings-font-weight:        $font-weight-bold !default;
$headings-line-height:        1.2 !default;
$headings-color:              inherit;

// Display headings
$display-1-font-size:         $font-size-base * 6 !default;
$display-2-font-size:         $font-size-base * 5.5 !default;
$display-3-font-size:         $font-size-base * 4.5 !default;
$display-4-font-size:         $font-size-base * 3.5 !default;

$display-font-family:         $headings-font-family !default;
$display-font-weight:         200 !default;


// Border
$border-width:                1px !default;
$border-color:                $light-gray-2 !default;

$border-radius:               .25rem !default;
$border-radius-lg:            .3rem !default;
$border-radius-sm:            .2rem !default;


// Forms & Buttons
$input-btn-padding-y:         $spacing-xs !default;
$input-btn-padding-x:         $spacing-md !default;
$input-btn-font-family:       $font-family-base !default;
$input-btn-font-size:         $font-size-base !default;
$input-btn-line-height:       $line-height-base !default;

$label-font-size:             14px !default;

$radio-checkbox-font-size:    $label-font-size !default;
$radio-checkbox-font-weight:  $font-weight-base !default;