$um-base: #0085ba
$um-base-hover: #008ec2
$delete-link: #a00
$delete-link-hover: #f00

$tooltip-back: #333
$tooltip-color: #eee

$admin-ok: #7acf58
$admin-warning: #c74a4a

$border: #ddd
$hover: #ccc
$shadow1: rgba(50,50,93,.1)
$shadow2: rgba(0,0,0,.07)


$wp-background: #f1f1f1
//$overlay: #333
$grey-text: #eee
$border-color: #eee


$white: #fff
$sub-color: #a3a3a3
$preloader-base: #c6c6c6
$preloader-second: fade-out( $preloader-base, .8 )
$sub-color-hover: darken( $sub-color, 15% )
$link: #000
$active-link: fade-out( $link,.2 )
$visited-link: #999
$overlay: fade-out( $link,.15 )
$like: #f13a37
$active-like: fade-out( $like,.2 )
$active-unlike: fade-out( $sub-color,.2 )
$border-color: #dddddd
$icon-color: #909090
$child-sub: #f6f8fc
$child-line: #ebecf0
$shadow1: rgba(50,50,93,.1)
$shadow2: rgba(0,0,0,.07)
$trashed-row: #ff787b
$pending-row: #ffd096

$notice-text: #3f7cc7



// NEW COLORS since v3
$required-asterisk: #a00
$error-text: var(--um-blocks-error-color, #d92d20)

$um-font-size: 14px

$um-white: #fff
$um-black: #000
$wp-admin-primary: #2271b1
$wp-admin-text: #3c434a

$um-primary: var(--um-blocks-button-bg-color, #eee)
$um-primary-hover: var(--um-blocks-button-bg-hover-color, #ddd)
$um-text: var(--um-blocks-button-fg-color, #333)

$button-bg: var(--um-blocks-button-bg-color, #eee)
$button-bg-hover: var(--um-blocks-button-bg-hover-color, #ddd)
$button-color: var(--um-blocks-button-fg-color, #333)
$button-border-radius: 8px
$button-line-height: 22px

// Figma shades of gray colors
$gray-25: var(--um-gray-25, #fcfcfd)
$gray-50: var(--um-gray-50, #f9fafb)
$gray-100: var(--um-gray-100, #f2f4f7)
$gray-200: var(--um-gray-200, #eaecf0)
$gray-300: var(--um-gray-300, #d0d5dd)
$gray-400: var(--um-gray-400, #98a2b3)
$gray-500: var(--um-gray-500, #667085)
$gray-600: var(--um-gray-600, #475467)
$gray-700: var(--um-gray-700, #344054)
$gray-800: var(--um-gray-800, #1d2939)
$gray-900: var(--um-gray-900, #101828)

// Figma shades of error colors
$error-25: var(--um-error-25, #fcfcfd)
$error-50: var(--um-error-50, #f9fafb)
$error-100: var(--um-error-100, #fee4e2)
$error-200: var(--um-error-200, #eaecf0)
$error-300: var(--um-error-300, #d0d5dd)
$error-400: var(--um-error-400, #98a2b3)
$error-500: var(--um-error-500, #667085)
$error-600: var(--um-error-600, #475467)
$error-700: var(--um-error-700, #b42318)
$error-800: var(--um-error-800, #1d2939)
$error-900: var(--um-error-900, #101828)

// Text input variables
$text-input-border-radius: 6px
$text-input-bg: $um-white
$text-input-color: $um-black
$text-input-border-color: $gray-300
$text-input-border-color-focus: $gray-400

$semi-bold-weight: 500
$bold-weight: 600 // CSS bold = 700, so it will be applied if there aren't 600 weight for the font
$label-size: 15px

// Links variables
$link-color: $um-primary
$link-hover-color: $um-primary-hover
