@import "./opacity";

/*=====================================
Base colors should not be documented.
Only document color use.

Colors -----------------------------*/
$royal:               #0056CF !default;
$purple:              #9E64E9 !default;
$teal:                #00C4D7 !default;
$red:                 #FF2229 !default;
$red_dark:            #ff4a50 !default;
$yellow:              #F9BB00 !default;
$green:               #00CA74 !default;
$orange:              #FD804C !default;
$default:             #93a8b8 !default;
$colors: (
  royal:              $royal,
  purple:             $purple,
  teal:               $teal,
  red:                $red,
  yellow:             $yellow,
  green:              $green,
  orange:             $orange,
  default:            $default,
);

/* Specialty Gradient -----------------*/
$gradient_start:      #1C75F2 !default;
$gradient_end:        $royal !default;

/* Interface colors -------------------*/
$white:               #FFFFFF !default;
$silver:              #F3F7FB !default;
$slate:               #C1CDD6 !default;
$charcoal:            #242B42 !default;
$black:               #000000 !default;

$interface_colors: (
  white:              $white,
  silver:             $silver,
  slate:              $slate,
  charcoal:           $charcoal,
  black:              $black,

);

/* Main colors ------------------------*/
$primary:             $royal !default;
$secondary:           $yellow !default;
$tertiary:            $purple !default;
$main_colors: (
  primary:            $primary,
  secondary:          $secondary,
  tertiary:           $tertiary
);
/*=====================================

Background colors ------------------*/
$bg_light:            $silver !default;
$bg_dark:             #0a0527 !default;
$background_colors: (
  bg_light:           $bg_light,
  bg_dark:            $bg_dark
);

/* Card colors ------------------*/
$card_light:          $white !default;
$card_dark:           rgba($white, $opacity_1);
$card_colors: (
  card_light:         $card_light,
  card_dark:          $card_dark
);

$primary-action:      $primary !default;
$action_colors: (
  primary_action:            $primary-action
);

/* Active colors ----------------------*/
$active_light:        lighten(#E5F2FF, 3.5%);
$active_dark:         #0082ff !default;
$active_colors: (
  active_light:       $active_light,
  active_dark:        $active_dark
);

/* Hover colors -----------------------*/
$hover_light:         darken($silver, 5%);
$hover_dark:          rgba($white, $opacity_2);
$hover_colors: (
  hover_light:        $hover_light,
  hover_dark:         $hover_dark
);

/* Focus colors -----------------------*/
$focus_input_light:   rgba($active_light, $opacity_5);
$focus_input_dark:    rgba(#144075, $opacity_5);
$focus_input_colors: (
  focus_input_light:        $focus_input_light,
  focus_input_dark:         $focus_input_dark
);

/* Border colors ----------------------*/
$border_light:        #E4E8F0 !default;
$border_dark:         rgba($white, $opacity_1);
$border_colors: (
  border_light:       $border_light,
  border_dark:        $border_dark
);

/* Shadow colors ----------------------*/
$shadow:        rgba(#3C6AAC, $opacity_2);
$shadow_colors: (
  shadow:       $shadow,
);

/* Text colors ------------------------*/
$text_lt_default:     $charcoal !default;
$text_lt_light:       #687887 !default;
$text_lt_lighter:     $slate !default;
$text_dk_default:     $white !default;
$text_dk_light:       rgba($white, $opacity_6);
$text_dk_lighter:     rgba($white, $opacity_4);
$text_colors: (
  text_lt_default:    $text_lt_default,
  text_lt_light:      $text_lt_light,
  text_lt_lighter:    $text_lt_lighter,
  text_dk_default:    $text_dk_default,
  text_dk_light:      $text_dk_light,
  text_dk_lighter:    $text_dk_lighter
);

/* Data colors ------------------------*/
$data_1:              $royal !default;
$data_2:              $yellow !default;
$data_3:              $purple !default;
$data_4:              $green !default;
$data_5:              $orange !default;
$data_6:              #144075 !default;
$data_7:              $teal !default;
$data_8:              $red !default;
$data_colors: (
  data_1:             $data_1,
  data_2:             $data_2,
  data_3:             $data_3,
  data_4:             $data_4,
  data_5:             $data_5,
  data_6:             $data_6,
  data_7:             $data_7,
  data_8:             $data_8
);

/* Status colors ----------------------*/
$success:             $green !default;
$success_secondary:   lighten($success, 10%);
$success_subtle:      rgba($success, $opacity_1);
$warning:             $yellow !default;
$warning_secondary:   lighten($warning, 10%);
$warning_subtle:      rgba($warning, $opacity_1);
$error:               $red !default;
$error_dark:          $red_dark !default;
$error_dark_body:     lighten($error_dark, 2%);
$error_secondary:     lighten($error, 10%);
$error_subtle:        rgba($error, $opacity_1);
$info:                $teal !default;
$info_secondary :     lighten($info, 10%);
$info_subtle:         rgba($info, $opacity_1);
$neutral:             $slate !default;
$neutral_secondary:   lighten($neutral, 10%);
$neutral_subtle:      rgba($neutral, $opacity_1);
$primary:             $primary !default;
$primary_secondary:   lighten($primary, 10%);

$status_colors: (
  success:            $success,
  success_secondary:    $success_secondary,
  success_subtle:     $success_subtle,
  warning:            $warning,
  warning_secondary:    $warning_secondary,
  warning_subtle:     $warning_subtle,
  error:              $error,
  error_secondary:      $error_secondary,
  error_subtle:       $error_subtle,
  info:               $info,
  info_secondary:       $info_secondary,
  info_subtle:        $info_subtle,
  neutral:            $neutral,
  neutral_secondary:    $neutral_secondary,
  neutral_subtle:     $neutral_subtle,
  primary:            $primary,
  primary_secondary:    $primary_secondary
);



$status_color_text: (
  success:            $success,
  warning:            darken($warning, 10%),
  error:              $error,
  info:               $info,
  neutral:            darken($neutral, 15%),
  primary:            $primary
);

/* Link colors ------------------------*/
$primary_action:      $primary !default;

/* Product colors ---------------------*/
$windows:             $royal !default;
$siding:              $yellow !default;
$doors:               $teal !default;
$solar:               $green !default;
$roofing:             $slate !default;
$gutters:             $purple !default;
$insulation:          $red !default;
$product_colors: (
  windows:            $windows,
  siding:             $siding,
  doors:              $doors,
  solar:              $solar,
  roofing:            $roofing,
  gutters:            $gutters,
  insulation:         $insulation
);

/* Category colors ---------------------*/
$category_1:   $royal !default;
$category_2:   #0CD2E5 !default;
$category_3:   $yellow !default;
$category_4:   #14D595 !default;
$category_5:   #A057FF !default;
$category_6:   #FF7034 !default;
$category_7:   #97DA22 !default;
$category_8:   #EA599F !default;
$category_9:   #0091FF !default;
$category_10:  #5027E4 !default;
$category_11:  $red !default;
$category_12:  #109922 !default;
$category_13:  #058F9D !default;
$category_14:  #A33E6F !default;
$category_15:  #B2171C !default;
$category_16:  #0A5C49 !default;
$category_17:  #325B91 !default;
$category_18:  #BE4714 !default;
$category_19:  #000080 !default;
$category_20:  #5C0E0A !default;
$category_21:  #040830 !default;
$category_colors: (
  category_1:   $category_1,
  category_2:   $category_2,
  category_3:   $category_3,
  category_4:   $category_4,
  category_5:   $category_5,
  category_6:   $category_6,
  category_7:   $category_7,
  category_8:   $category_8,
  category_9:   $category_9,
  category_10:  $category_10,
  category_11:  $category_11,
  category_12:  $category_12,
  category_13:  $category_13,
  category_14:  $category_14,
  category_15:  $category_15,
  category_16:  $category_16,
  category_17:  $category_17,
  category_18:  $category_18,
  category_19:  $category_19,
  category_20:  $category_20,
  category_21:  $category_21
);

$transparent: transparent !default;

@function tint($color, $percentage) {
  @return mix($white, $color, $percentage);
}

@mixin gradient($start: $gradient_start, $end: $gradient_end) {
  background: $start;
  background: -moz-linear-gradient(-45deg,  $start 0%, $end 100%);
  background: -webkit-linear-gradient(-45deg,  $start 0%, $end 100%);
  background: linear-gradient(135deg,  $start 0%, $end 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start}', endColorstr='#{$end}', GradientType=1);
}