// ========================================================================================
//                                   COLOR VARIABLES
// ========================================================================================
// primary color
$temp-color = hexo-config('colors.primary')
$primary-color = $temp-color ? convert($temp-color) : #0066CC

//navbar color
$nav-color-1 = convert(hexo-config('navbar.color.left') + hexo-config('navbar.color.transparency'))
$nav-color-2 = convert(hexo-config('navbar.color.right') + hexo-config('navbar.color.transparency'))
$nav-color-bg = linear-gradient(120deg, $nav-color-1 0%, $nav-color-2 100%)

// ========================================================================================
//                                       LIGHT MODE
// ========================================================================================
$background-color = #fff
$background-color-transparent = rgba(255, 255, 255, 0.6)
$background-color-transparent-80 = rgba(255, 255, 255, 0.8)
$background-color-transparent-40 = rgba(255, 255, 255, 0.4)
$background-color-transparent-15 = rgba(255, 255, 255, 0.15)
$second-background-color = darken($background-color, 2%)
$third-background-color = darken($background-color, 3%)
$third-background-color-transparent = rgba(241, 241, 241, 0.6)
$default-text-color = #373D3F
$invert-text-color = #bebec6
$first-text-color = darken($default-text-color, 10%)
$second-text-color = darken($default-text-color, 5%)
$third-text-color = lighten($default-text-color, 20%)
$fourth-text-color = lighten($default-text-color, 90%)
$border-color = rgba(0, 0, 0, 0.08)
$selection-color = lighten($primary-color, 10%)
$shadow-color-1 = rgba(0, 0, 0, 0.08)
$shadow-color-2 = rgba(0, 0, 0, 0.05)
$shadow-hover-color = rgba(0, 0, 0, 0.28)
$scrollbar-color = #C1C1C1
$scrollbar-color-hover = #A1A1A1
$scroll-bar-bg-color = #FAFAFA
$link-color = darken($default-text-color, 10%)
$copyright-info-color = #CC0033
$avatar-background-color = #0066CC
$pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3)
$archive-timeline-last-child-color = linear-gradient(to bottom, rgba(232,232,232, 1) 60%, rgba(0,0,0, 0) 100%) 1 100%

$note-blue-title-bg = #D6F7FB
$note-red-title-bg = #FDE9E9
$note-green-title-bg = #E9FDE9
$note-yellow-title-bg = #FDF9E9
$note-purple-title-bg = #F9E9FD
$note-gray-title-bg = #F9F9F9
$note-black-title-bg = #E9E9E9
$note-cyan-title-bg = #E9FDF9
$note-type-title-bg = #fdf3e9

$box-default-bg = #EEF1F5
$box-default-text = #1F2937
$box-blue-bg = #DCEEFF
$box-blue-text = #0F3A64
$box-cyan-bg = #DBF7FF
$box-cyan-text = #0F4E5E
$box-teal-bg = #DCF8F2
$box-teal-text = #0F5A4B
$box-green-bg = #E2F7E8
$box-green-text = #1B5A2D
$box-lime-bg = #EEF7D9
$box-lime-text = #385020
$box-yellow-bg = #FFF7D6
$box-yellow-text = #5A470E
$box-amber-bg = #FFEFD9
$box-amber-text = #633C10
$box-orange-bg = #FFE7D9
$box-orange-text = #6A2F0A
$box-red-bg = #FFE0DF
$box-red-text = #6A1F1D
$box-pink-bg = #FFE0EC
$box-pink-text = #671A40
$box-purple-bg = #F1E4FF
$box-purple-text = #4B257B
$box-indigo-bg = #E6E9FF
$box-indigo-text = #2E377A
$box-gray-bg = #ECEFF4
$box-gray-text = #374151
$box-slate-bg = #E1E8F5
$box-slate-text = #213047

$home-banner-text-color = convert(hexo-config('home_banner.text_color.light'))
$home-banner-icons-container-border-color = rgba(255, 255, 255, 0.35)
$home-banner-icons-container-background-color = rgba(255, 255, 255, 0.3)


// ========================================================================================
//                                      DARK MODE
// ========================================================================================
$dark-primary-color = $primary-color
$dark-background-color = #202124
$dark-background-color-transparent = rgba(32, 33, 36, 0.6)
$dark-background-color-transparent-80 = rgba(32, 33, 36, 0.8)
$dark-background-color-transparent-40 = rgba(32, 33, 36, 0.4)
$dark-background-color-transparent-15 = rgba(32, 33, 36, 0.15)
$dark-second-background-color = lighten($dark-background-color, 2%)
$dark-third-background-color = lighten($dark-background-color, 4.5%)
$dark-third-background-color-transparent = rgba(32, 33, 36, 0.6)
$dark-default-text-color = #bebec6
$dark-invert-text-color = #373D3F
$dark-first-text-color = lighten($dark-default-text-color, 30%)
$dark-second-text-color = lighten($dark-default-text-color, 20%)
$dark-third-text-color = darken($dark-default-text-color, 20%)
$dark-fourth-text-color = darken($dark-default-text-color, 70%)
$dark-border-color = rgba(255, 255, 255, 0.08)
$dark-selection-color = $selection-color
$dark-shadow-color-1 = rgba(255, 255, 255, 0.08)
$dark-shadow-color-2 = rgba(255, 255, 255, 0.05)
$dark-shadow-hover-color = rgba(69, 69, 69, 0.28)
$dark-scrollbar-color = #898989
$dark-scrollbar-color-hover = #A1A1A1;
$dark-scroll-bar-bg-color = lighten($dark-background-color, 5%)
$dark-link-color = lighten($dark-default-text-color, 10%)
$dark-copyright-info-color = darken($copyright-info-color, 20%)
$dark-avatar-background-color = darken($avatar-background-color, 10%)
$dark-pjax-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee)
$dark-archive-timeline-last-child-color = linear-gradient(to bottom, rgba(50,50,50,1) 60%, rgba(255,255,255, 0) 100%) 1 100%

$dark-note-blue-title-bg = #1e3e46
$dark-note-red-title-bg = #4e1e1e
$dark-note-green-title-bg = #1e4e1e
$dark-note-yellow-title-bg = #4e4e1e
$dark-note-cyan-title-bg = #1e4e4e
$dark-note-purple-title-bg = #4e1e4e
$dark-note-gray-title-bg = #4e4e4e
$dark-note-black-title-bg = #1e1e1e
$dark-note-type-title-bg = #4e3a1e

$dark-box-default-bg = #5A6375
$dark-box-default-text = #F8FAFC
$dark-box-blue-bg = #2E65B5
$dark-box-blue-text = #F3F8FF
$dark-box-cyan-bg = #2B7F95
$dark-box-cyan-text = #F2FDFF
$dark-box-teal-bg = #2A8C74
$dark-box-teal-text = #F2FFF9
$dark-box-green-bg = #2F874A
$dark-box-green-text = #F1FFEE
$dark-box-lime-bg = #638E2D
$dark-box-lime-text = #F9FFE8
$dark-box-yellow-bg = #9A7A18
$dark-box-yellow-text = #FFFCE8
$dark-box-amber-bg = #A56B1B
$dark-box-amber-text = #FFF8EE
$dark-box-orange-bg = #B66223
$dark-box-orange-text = #FFF5EE
$dark-box-red-bg = #AE3838
$dark-box-red-text = #FFF1F1
$dark-box-pink-bg = #A33A78
$dark-box-pink-text = #FFF1FA
$dark-box-purple-bg = #7547B5
$dark-box-purple-text = #F8F2FF
$dark-box-indigo-bg = #4B5FC4
$dark-box-indigo-text = #F2F5FF
$dark-box-gray-bg = #687588
$dark-box-gray-text = #F8FAFC
$dark-box-slate-bg = #3F5A84
$dark-box-slate-text = #F3F8FF

$home-banner-text-color-dark = convert(hexo-config('home_banner.text_color.dark'))
$home-banner-icons-container-border-color-dark = rgba(197, 197, 197, 0.35)
$home-banner-icons-container-background-color-dark = rgba(197, 197, 197, 0.3)

// ========================================================================================
//                                       NOTE COLORS
// ========================================================================================

$note-default-text-color = #A6A6A6
$note-green-text-color = #006e53
$note-red-text-color = #f85676