/**
 * @prop --bal-body-background: Body background color
 * @prop --bal-body-font-family: Body font family
 * @prop --bal-body-color: Body text color
 * @prop --bal-body-font-weight: Body text weight
 * @prop --bal-body-font-size: Body font size
 * @prop --bal-body-line-height: Body line height
 * @prop --bal-divider-background: Divider background color
 * @prop --bal-focus-shadow-start-color: Focus shadow start color
 * @prop --bal-focus-shadow-end-color: Focus shadow start end
 * @prop --bal-focus-shadow: Focus shadow
 * @prop --bal-focus-shadow-inset: Focus shadow inset
 * @prop --bal-focus-shadow-inverted-start-color: Focus shadow start color
 * @prop --bal-focus-shadow-inverted-end-color: Focus shadow end color
 * @prop --bal-focus-shadow-inverted: Focus shadow on a dark background
 * @prop --bal-focus-shadow-inverted-inset: Focus shadow on a dark background inset
 * @prop --bal-small-font-size: TBD
 * @prop --bal-strong-color: TBD
 * @prop --bal-strong-font-weight: TBD
 */

:root
  //
  // body variables
  --bal-body-background: var(--bal-color-text-white)
  --bal-body-font-family: var(--bal-font-family-text)
  --bal-body-color: var(--bal-color-text-primary)
  --bal-body-font-weight: var(--bal-font-weight-regular)
  --bal-body-font-size: 16px
  --bal-body-line-height: var(--bal-line-height-normal)
  --bal-small-font-size: var(--bal-text-size-small)
  --bal-strong-color: var(--bal-color-text-primary)
  --bal-strong-font-weight: var(--bal-font-weight-bold)
  //
  // divider variables
  --bal-divider-background: var(--bal-color-primary-2)
  //
  // focus shadow
  --bal-focus-shadow-start-color: var(--bal-color-white)
  --bal-focus-shadow-end-color: var(--bal-color-purple-6)
  --bal-focus-shadow: var(--bal-focus-shadow-start-color) 0 0 0 2px, var(--bal-focus-shadow-end-color) 0 0 0 5px
  --bal-focus-shadow-inset: inset var(--bal-focus-shadow-end-color) 0 0 0 3px, inset var(--bal-focus-shadow-start-color) 0 0 0 5px
  // inverted
  --bal-focus-shadow-inverted-start-color: var(--bal-color-white)
  --bal-focus-shadow-inverted-end-color: var(--bal-color-yellow)
  --bal-focus-shadow-inverted: var(--bal-focus-shadow-inverted-start-color) 0 0 0 2px, var(--bal-focus-shadow-inverted-end-color) 0 0 0 5px
  --bal-focus-shadow-inverted-inset: inset var(--bal-focus-shadow-inverted-end-color) 0 0 0 3px, inset var(--bal-focus-shadow-inverted-start-color) 0 0 0 5px