\:root
  /* Variables for the website. */
  --web-body-bg-color: #222
  --web-body-color: #ddd
  --web-body-color-hint: #444

  /* Blender UI variables. */

  --transition-speed: 150ms

  --spacer: 1rem
  --spacer-sm: calc(var(--spacer) * .75)
  --spacer-xs: calc(var(--spacer) * .5)
  --spacer-xxs: calc(var(--spacer) * .25)

  --border-width: .1rem
  --border-width-lg: .15rem

  /* Split in 3 because it's usually used inside rgba(var(--shadow-color), .5). */
  --shadow-color: 0,0,0

  --font-size: .85rem
  --font-size-lg: calc(var(--font-size) * 1.25)
  --font-size-sm: calc(var(--font-size) * .95)
  --border-width: .15rem
  --border-radius: .25rem
  --border-radius-lg: calc(var(--border-radius) * 3)

  --accent-color: hsl(217deg 47% 55%)

  --editor-header-bg: #333
  --editor-border-color: #111
  --editor-border-width: var(--spacer-xxs)

  /* Widget General. */
  --wgt-active: var(--accent-color)
  --wgt-border-color: #373737
  --wgt-border-radius: var(--border-radius)
  --wgt-border-width: var(--border-width)
  --wgt-box-shadow: .05rem .05rem 0 rgba(var(--shadow-color), .2)
  --wgt-color: #fff
  --wgt-color-inactive: #aaa
  --wgt-color-disabled: #777
  --wgt-height: 22px
  --wgt-padding: .15rem

  /* Widget specifics. */
  --wgt-menu-bg: #2C2C2C
  --wgt-menu-border-color: #363636

  --wgt-numslider-bg-hover: #888888
  --wgt-numslider-bg: #585858
  --wgt-numslider-border-color: #363636
  --wgt-numslider-border-radius: calc(var(--border-radius) * 2)
  --wgt-numslider-color: #ddd

  --wgt-pulldown-color: var(--wgt-color-inactive)

  --wgt-regular-bg: #585858

  --wgt-separator-height: var(--spacer-xs)

  --wgt-text-bg: #1F1F1F
  --wgt-text-border-color: #363636

  --wgt-tool-bg: #585858
  --icon-size: 20px
