$main: hsl(242, 51%, 51%)
$accent: hsl(44, 96%, 54%)
$base: white

// completion
$completion: hsl(197deg 83% 49%)
$completion-dark: rgb(0 0 0 / 20%)

// background
$background-shade: hsl(242, 11%, 85%) // #d5d5dd
$background-semi-shade: hsl(242, 24%, 92%) // #e6e6ef
$background: hsl(242, 34%, 98%) // #f8f8fc
$background-tint: hsl(242, 20%, 93%) // #ececef
$background-more-tint: hsl(242, 8%, 98.5%) // #fbfbfb

// lp-bg
$lp-bg-3: #DEDEF2
$lp-bg-2: #EBEBF7
$lp-bg-1: $background

// nikoniko
$happy-background: #ffecdf
$sad-background: #ecf3f7
$soso-background: #fff9e8

// ranking
$gold: #e3a822
$silver: #898888
$bronze: #dc7e61

// text
$default-text: hsl(242, 10%, 30%)
$reversal-text: white
$muted-text: hsl(242, 5%, 64%)
$semi-muted-text: hsl(242, 7%, 57%)
$link-text: hsl(242, 62%, 33%)
$hover-text: hsl(215, 78%, 50%)

// placeholder
$placeholder: rgba(black, .075)
$placeholder-text: hsl(242, 0%, 73%)

// border
$border: hsl(242, 7%, 89%)
$border-tint: hsl(242, 14%, 95%)
$border-shade: hsl(242, 7%, 84%)
$border-more-shade: $muted-text

// Welcome Colors
$welcome-blue: hsl(210, 100%, 55%)
$welcome-light-blue: hsl(199, 100%, 92%)
$welcome-yellow: hsl(57, 100%, 49%)
$welcome-orange: hsl(40, 98%, 59%)
$welcome-pink: hsl(344, 80%, 66%)

// UI colors
$primary: #5752e8
$secondary: hsl(242, 1%, 100%)
$success: hsl(150, 39%, 49%)
$info: hsl(190, 73%, 48%)
$warning: $accent
$danger: hsl(349, 90%, 62%)
$disabled: $background-shade
$stamp-color: hsl(0, 80%, 62%)

$danger-text: shade($danger, 40%)
$danger-tint: tint($danger, 90%)

$success-text: shade($success, 60%)
$success-tint: tint($success, 90%)

$info-text: shade($info, 60%)
$info-tint: tint($info, 90%)

$primary-text: shade($primary, 40%)
$primary-tint: tint($primary, 90%)
$primary-semi-tint: tint($primary, 60%)

$primary-background: #ebebf7

$warning-text: shade($warning, 60%)
$warning-tint: tint($warning, 90%)

$main-text: shade($main, 10%)
$main-tint: tint($main, 90%)
$main-shade: hsl(254, 60%, 34%)
$main-semi-shade: hsl(254, 52%, 40%)

// reply
$reply-warning-background: $warning
$reply-warning-border: #d09a0e

$reply-alert-background: #ff7500
$reply-alert-border: #d06305

$reply-deadline-background: $danger
$reply-deadline-border: #b50f38

// input
$input-border: $border-shade
$input-background: $background-more-tint

$input-hover-border: $border-shade
$input-hover-background: $base

$input-selected-background: $primary-tint
$input-selected-border: $primary
$input-selected-text: $primary-text

$input-focus-background: $base
$input-focus-border: $primary
$input-focus-shadow: rgba($primary, .4) 0 0 1px 2px

=default-link
  transition: color .2s ease-in
  color: var(--link-text)
  &:link
    color: var(--link-text)
  &:visited
    color: hsl(233, 33%, 58%)
  &:hover
    color: var(--hover-text)
  &:active
    color: var(--hover-text)

=reversal-link
  transition: color .2s ease-in
  color: var(--reversal-text)
  &:link
    color: var(--reversal-text)
  &:visited
    color: hsl(242, 62%, 74%)
  &:hover
    color: hsl(210, 100%, 80%)
  &:active
    color: hsl(316, 90%, 66%)

=muted-link
  transition: color .2s ease-in
  color: var(--muted-text)
  &:link
    color: var(--muted-text)
  &:visited
    color: var(--muted-text)
  &:hover
    color: var(--link-text)
  &:active
    color: var(--link-text)
