// ==============================================================================================
// media query
// ==============================================================================================
$media-max-width = 800px                                 // media query max width (tablet)
$media-max-width-mobile = 500px                          // media query max width (mobile)


// ==============================================================================================
// z-index
// ==============================================================================================
$z-index-1 = 1001
$z-index-2 = 1002
$z-index-3 = 1003
$z-index-4 = 1004
$z-index-5 = 1005
$z-index-6 = 1006
$z-index-7 = 1007
$z-index-8 = 1008
$z-index-9 = 1009
$z-index-10 = 1010
$z-index-11 = 1011
$z-index-12 = 1012


// ==============================================================================================
// theme primary color
// ==============================================================================================

if (hexo-config('base_info')) {
  $temp-color = hexo-config('base_info.primary_color')
}
else {
  $temp-color = ''
}
$primary-color = $temp-color ? convert($temp-color) : #0066cc

// light
$primary-color-light-1 = lighten($primary-color, 10%)
$primary-color-light-2 = lighten($primary-color, 20%)

// dark
$primary-color-dark-1 = darken($primary-color, 10%)
$primary-color-dark-2 = darken($primary-color, 20%)


// ==============================================================================================
// theme light mode color
// ==============================================================================================
$background-color-1 = #fff
$background-color-1-transparent = alpha($background-color-1, 0.6)
$background-color-2 = darken($background-color-1, 3%)
$background-color-3 = darken($background-color-1, 6%)
$content-background-color = #fff

$text-color-3 = #50505c
$text-color-1 = darken($text-color-3, 10%)
$text-color-2 = darken($text-color-3, 5%)
$text-color-4 = lighten($text-color-3, 30%)
$text-color-5 = lighten($text-color-3, 60%)
$text-color-6 = lighten($text-color-3, 90%)

$toc-text-color = lighten($text-color-3, 20%)

$badge-color = darken($background-color-1, 6%)
$badge-background-color = lighten($text-color-3, 40%)

$border-color = darken($background-color-1, 30%)
$selection-color = lighten($primary-color, 10%)

$shadow-color = rgba(0, 0, 0, 0.16)
$shadow-hover-color = rgba(0, 0, 0, 0.22)

$scrollbar-color = lighten($text-color-3, 15%)
$scrollbar-background-color = darken($background-color-1, 10%)
$toc-scrollbar-color = alpha($text-color-3, 0.1)

$copyright-icon-bg-color = alpha($text-color-3, 0.12)

$avatar-background-color = $primary-color-dark-1

$header-transparent-background-1 = alpha($background-color-1, 0.28)
$header-transparent-background-2 = alpha($background-color-1, 0.4)

$pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3)

$post-h-bottom-border-color = alpha($text-color-3, 0.15)

$keep-info-color = rgba(117, 117, 122, 0.8)
$keep-info-background-color = alpha($keep-info-color, 0.1)
$keep-info-border-color = alpha($keep-info-color, 0.6)

$keep-primary-color = #0458ab
$keep-primary-background-color = alpha($keep-primary-color, 0.1)
$keep-primary-border-color = alpha($keep-primary-color, 0.6)

$keep-success-color = #10b981
$keep-success-background-color = alpha($keep-success-color, 0.1)
$keep-success-border-color = alpha($keep-success-color, 0.6)

$keep-warning-color = #b78d0f
$keep-warning-background-color = alpha($keep-warning-color, 0.1)
$keep-warning-border-color = alpha($keep-warning-color, 0.6)

$keep-danger-color = #f43f5e
$keep-danger-background-color = alpha($keep-danger-color, 0.1)
$keep-danger-border-color = alpha($keep-danger-color, 0.6)


// ==============================================================================================
// theme dark mode color
// ==============================================================================================
$dark-background-color-1 = #22272e
$dark-background-color-1-transparent = alpha($dark-background-color-1, 0.6)
$dark-background-color-2 = lighten($dark-background-color-1, 4%)
$dark-background-color-3 = lighten($dark-background-color-1, 8%)
$dark-content-background-color = darken($dark-background-color-1, 2%)

$dark-text-color-3 = #adbac5
$dark-text-color-1 = lighten($dark-text-color-3, 12%)
$dark-text-color-2 = lighten($dark-text-color-3, 6%)
$dark-text-color-4 = darken($dark-text-color-3, 30%)
$dark-text-color-5 = darken($dark-text-color-3, 50%)
$dark-text-color-6 = darken($dark-text-color-3, 70%)

$dark-toc-text-color = darken($dark-text-color-3, 20%)

$dark-badge-color = lighten($dark-background-color-1, 10%)
$dark-badge-background-color = lighten($dark-text-color-3, 40%)

$dark-border-color = lighten($dark-background-color-1, 30%)
$dark-selection-color = darken($selection-color, 20%)

$dark-shadow-color = rgba(120, 120, 120, 0.18)
$dark-shadow-hover-color = rgba(120, 120, 120, 0.24)

$dark-scrollbar-color = lighten($dark-background-color-1, 25%)
$dark-scrollbar-background-color = darken($dark-background-color-1, 15%)
$dark-toc-scrollbar-color = alpha($dark-text-color-3, 0.1)

$dark-copyright-icon-bg-color = alpha($dark-text-color-3, 0.12)

$dark-avatar-background-color = darken($avatar-background-color, 20%)

$dark-header-transparent-background-1 = alpha($dark-background-color-1, 0.28)
$dark-header-transparent-background-2 = alpha($dark-background-color-1, 0.4)

$dark-pjax-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee)

$dark-post-h-bottom-border-color = alpha($dark-text-color-3, 0.15)

$dark-keep-info-color = #9999a2
$dark-keep-info-background-color = alpha($dark-keep-info-color, 0.1)
$dark-keep-info-border-color = alpha($dark-keep-info-color, 0.5)

$dark-keep-primary-color = #268bef
$dark-keep-primary-background-color = alpha($dark-keep-primary-color, 0.1)
$dark-keep-primary-border-color = alpha($dark-keep-primary-color, 0.6)

$dark-keep-success-color = #10b981
$dark-keep-success-background-color = alpha($dark-keep-success-color, 0.1)
$dark-keep-success-border-color = alpha($dark-keep-success-color, 0.6)

$dark-keep-warning-color = #ecc34d
$dark-keep-warning-background-color = alpha($dark-keep-warning-color, 0.1)
$dark-keep-warning-border-color = alpha($dark-keep-warning-color, 0.6)

$dark-keep-danger-color = #f43f5e
$dark-keep-danger-background-color = alpha($dark-keep-danger-color, 0.1)
$dark-keep-danger-border-color = alpha($dark-keep-danger-color, 0.6)