// Colors
$color-light = var(--color-light, #e0e1e2)
$color-red = var(--color-red, #d01919)
$color-orange = var(--color-orange, #f2711c)
$color-yellow = var(--color-yellow, #fbbd08)
$color-olive = var(--color-olive, #b5cc18)
$color-green = var(--color-green, #21ba45)
$color-teal = var(--color-teal, #00b5ad)
$color-blue = var(--color-blue, #2185d0)
$color-violet = var(--color-violet, #6435c9)
$color-purple = var(--color-purple, #a333c8)
$color-pink = var(--color-pink, #e03997)
$color-brown = var(--color-brown, #a5673f)
$color-grey = var(--color-grey, #767676)
$color-black = var(--color-black, #2b2c2d)
$color-night = var(--color-night, #2b3c4d)
$color-positive = var(--color-positive, $color-green)
$color-negative = var(--color-negative, $color-red)

$color-text = var(--color-text, #000000de)
$color-placeholder = var(--color-placeholder, #00000080)
$color-disabled-background = var(--color-disabled-background, #0000000d)
$color-text-inverse = var(--color-text-inverse, #fff)
$color-primary = var(--color-primary, $color-blue)
$color-secondary = var(--color-secondary, $color-black)

$color-border = var(--color-border, #22242626)
$color-hover = var(--color-hover, #00000008)
$color-active = var(--color-active, #0000000d)

// Font size
$font-size-basic = var(--font-size-basic, 14px)

// Border
$border-radius = var(--border-radius, rigor(2 / 7rem))
$border-focus = var(--border-focus, #85b7d9)

// Animation
$default-duration = var(--default-duration, 0.1s)
$default-easing = var(--default-easing, ease)