
// sass variables
$danger: var(--danger)
$dark: var(--dark)
$info: var(--info)
$link: var(--link)
$primary: var(--primary)
$success: var(--success)
$warning: var(--warning)
$white: var(--white)


// declared base css variables
#{":root"}
  --danger: rgb(255, 255, 255)
  --dark: rgb(255, 255, 255)
  --info: rgb(255, 255, 255)
  --link: rgb(255, 255, 255)
  --primary: rgb(255, 255, 255)
  --success: rgb(255, 255, 255)
  --warning: rgb(255, 255, 255)
  --white: rgb(255, 255, 255)


// derived, generated css variables
#{":root"}
  --danger--color-invert: rgba(0, 0, 0, 0.7)
  --danger--dark-color: rgb(74, 74, 74)
  --danger--light-color: rgb(255, 255, 255)

  --dark--800--lighten: rgb(255, 255, 255)
  --dark--color-invert: rgba(0, 0, 0, 0.7)
  --dark--dark-color: rgb(74, 74, 74)
  --dark--light-color: rgb(255, 255, 255)

  --info--color-invert: rgba(0, 0, 0, 0.7)
  --info--dark-color: rgb(74, 74, 74)
  --info--light-color: rgb(255, 255, 255)

  --link--color-invert: rgba(0, 0, 0, 0.7)
  --link--dark-color: rgb(74, 74, 74)
  --link--light-color: rgb(255, 255, 255)

  --primary--color-invert: rgba(0, 0, 0, 0.7)
  --primary--dark-color: rgb(74, 74, 74)
  --primary--light-color: rgb(255, 255, 255)

  --success--color-invert: rgba(0, 0, 0, 0.7)
  --success--dark-color: rgb(74, 74, 74)
  --success--light-color: rgb(255, 255, 255)

  --warning--color-invert: rgba(0, 0, 0, 0.7)
  --warning--dark-color: rgb(74, 74, 74)
  --warning--light-color: rgb(255, 255, 255)

  --white--800--lighten: rgb(255, 255, 255)

