@use 'sass:math'


$white: #fff

$black: #4d4d4d

$grey_one: #333
$grey_two: #5f6164
$grey_three: #c6cbd4
$grey_four: #6f6f6f
$grey_five: #8b8d90
$grey_six: #fbfbfb
$grey_seven: #e8e9ea
$grey_eight: #959698
$grey_nine: #999
$grey_ten: #dfdfdf
$grey_11: #E1E1E1
$grey_12: #ADADAD
$grey_13: #c4c4c4
$grey_14: #666
$grey_15: #8b8b8b
$grey_16: #9f9f9f
$grey_17: #979797
$grey_18: #838383
$grey_19: #5a5b5e

$blue: #4B74FF
$blue_one: #EDF1FF
$blue_two: #e8edff

$green: #35C029
$green_1: #31A451
$green_2: #0BB764

$red: #FD0000
$red_1: #ff4b4b
$red_2: #f00


// DEMO THEME
$gutter: 16px
$gutter_lg: $gutter * 2
$gutter_sm: math.div($gutter, 2)


$font_color: #e0e8e7
$primary: #71a7d9
$secondary: #ef7a2e
$border_color: #ccc
$border_color_light: #dadada


$border: 1px solid $border_color


$radius: 10px
$radius_lg: $radius * 2
$radius_sm: math.div($radius, 2)


$shadow_color_1: rgba(0,0,0,0.14)
$shadow_color_2: rgba(0,0,0,0.12)
$shadow_color_3: rgba(0,0,0,0.2)

$shadow_2: 0 2px 2px 0 $shadow_color_1, 0 3px 1px -2px $shadow_color_2, 0 1px 5px 0 $shadow_color_3
$shadow_4: 0 4px 5px 0 $shadow_color_1, 0 1px 10px 0 $shadow_color_2, 0 2px 4px -1px $shadow_color_3
$shadow_6: 0 6px 10px 0 $shadow_color_1, 0 1px 18px 0 $shadow_color_2, 0 3px 5px -1px $shadow_color_3
$shadow_8: 0 8px 10px 1px $shadow_color_1, 0 3px 14px 2px $shadow_color_2, 0 5px 5px -3px $shadow_color_3
$shadow_12: 0 12px 17px 2px $shadow_color_1, 0 5px 22px 4px $shadow_color_2, 0 7px 8px -4px $shadow_color_3


$transition: .15s ease-out