:root
  // fonts
  --uie-font-family-fallback 'Helvetica', Arial, Tahoma, Verdana, sans-serif
  --uie-font-family-code 'Fira Code', Hasklig, 'Jetbrains Mono', 'Source Code Pro', 'DejaVu Sans Mono', Hack, Meslo, Menlo, Inconsolata, Consolas, 'Liberation Mono', Courier, monospace

  --uie-font-family-bold 'Inter', var(--uie-font-family-fallback)
  --uie-font-family-light 'Inter', var(--uie-font-family-fallback)
  --uie-font-family-regular 'Inter', var(--uie-font-family-fallback)
  --uie-font-family-bolditalic 'Inter', var(--uie-font-family-fallback)
  --uie-font-family-lightitalic 'Inter', var(--uie-font-family-fallback)

  --uie-font-weight-light 300
  --uie-font-weight-regular 400
  --uie-font-weight-italic 400
  --uie-font-weight-bold 700
  --uie-font-style-italic italic

  --uie-base-font-size-s 16px
  --uie-base-font-size-m 16px
  --uie-base-font-size-l 16px

  --uie-base-border-radius 4px

  --uie-font-size-xs .75rem
  --uie-font-size-s .875rem
  --uie-font-size-m 1rem
  --uie-font-size-l 1.125rem
  --uie-font-size-xl 1.5rem
  --uie-font-size-xxl 2.25rem
  --uie-font-size-xxxl 3rem

  --uie-line-height 1.6
  --uie-line-height-heading 1.25

  // spaces
  --uie-space-xxs .125rem
  --uie-space-xs .25rem
  --uie-space-s .5rem
  --uie-space-m .75rem
  --uie-space-l 1.125rem
  --uie-space-xl 1.75rem
  --uie-space-xxl 2.5rem
  --uie-space-xxxl 4rem

  // transitions
  --uie-transition-duration-fast .15s
  --uie-transition-duration-medium .25s

  // colors
  --uie-color-neutral-0 #FFF
  --uie-color-neutral-10 #F8FAFC
  --uie-color-neutral-20 #EDF2F7
  --uie-color-neutral-30 #DAE1E7
  --uie-color-neutral-50 #B8C2CC
  --uie-color-neutral-70 #8795A1
  --uie-color-neutral-80 #606F7B
  --uie-color-neutral-90 #3D4852
  --uie-color-neutral-100 #1A202C

  --uie-color-accent-ultralight #a0b8cf
  --uie-color-accent-light #6A90B4
  --uie-color-accent-medium #4D759A
  --uie-color-accent-dark #446788
  --uie-color-accent-ultradark #1B2936

  --uie-color-border-light var(--uie-color-neutral-10)
  --uie-color-border-medium var(--uie-color-neutral-20)
  --uie-color-border-dark var(--uie-color-neutral-30)

  --uie-color-bg-light var(--uie-color-neutral-10)
  --uie-color-bg-medium var(--uie-color-neutral-20)
  --uie-color-bg-dark var(--uie-color-neutral-30)

  --uie-color-topbar-bg var(--uie-color-accent-ultradark)
  --uie-color-topbar-text var(--uie-color-neutral-0)
  --uie-color-topbar-text-hover var(--uie-color-accent-ultralight)
  --uie-color-topbar-border var(--uie-color-border-dark)

  --uie-color-navigation-bg var(--uie-color-bg-medium)
  --uie-color-navigation-text var(--uie-color-neutral-80)
  --uie-color-navigation-text-hover var(--uie-color-accent-light)
  --uie-color-navigation-bg-current var(--uie-color-bg-dark)
  --uie-color-navigation-text-current var(--uie-color-accent-dark)
  --uie-color-navigation-border var(--uie-color-border-dark)

  --uie-color-main-bg var(--uie-color-neutral-0)
  --uie-color-main-text var(--uie-color-neutral-90)
  --uie-color-main-link var(--uie-color-accent-light)
  --uie-color-main-link-hover var(--uie-color-accent-dark)
  --uie-color-secondary-text var(--uie-color-neutral-70)
  --uie-color-secondary-link var(--uie-color-neutral-80)
  --uie-color-secondary-link-hover var(--uie-color-neutral-90)
  --uie-color-tertiary-text var(--uie-color-neutral-50)
  --uie-color-tertiary-text-hover var(--uie-color-neutral-70)
  --uie-color-inverted-text var(--uie-color-neutral-0)

  --uie-color-option-bg var(--uie-color-main-bg)
  --uie-color-option-text var(--uie-color-accent-light)
  --uie-color-option-bg-hover var(--uie-color-bg-medium)
  --uie-color-option-text-hover var(--uie-color-accent-dark)
  --uie-color-option-bg-current var(--uie-color-bg-dark)
  --uie-color-option-text-current var(--uie-color-accent-dark)
  --uie-color-option-border var(--uie-color-border-dark)

  --uie-color-preview-option-text var(--uie-color-secondary-text)
  --uie-color-preview-option-label var(--uie-color-tertiary-text)
  --uie-color-preview-option-text-hover var(--uie-color-secondary-link-hover)
  --uie-color-preview-option-label-hover var(--uie-color-tertiary-text-hover)
  --uie-color-preview-option-bg var(--uie-color-option-bg)
  --uie-color-preview-option-bg-hover var(--uie-color-option-bg-hover)
  --uie-color-preview-option-border var(--uie-color-option-border)

  --uie-color-modal-bg var(--uie-color-option-bg)
  --uie-color-modal-bg-hover var(--uie-color-option-bg-hover)
  --uie-color-modal-bg-current var(--uie-color-option-bg-current)
  --uie-color-modal-text var(--uie-color-option-text)
  --uie-color-modal-text-hover var(--uie-color-option-text-hover)
  --uie-color-modal-text-current var(--uie-color-option-text-current)
  --uie-color-modal-border var(--uie-color-option-border)

  --uie-color-contentheader-bg var(--uie-color-option-bg)
  --uie-color-contentheader-text var(--uie-color-option-text)
  --uie-color-contentheader-bg-hover var(--uie-color-option-bg-hover)
  --uie-color-contentheader-text-hover var(--uie-color-option-text-hover)
  --uie-color-contentheader-bg-current var(--uie-color-option-bg-current)
  --uie-color-contentheader-text-current var(--uie-color-option-text-current)
  --uie-color-contentheader-border var(--uie-color-option-border)

  --uie-color-label-bg var(--uie-color-accent-medium)
  --uie-color-label-text var(--uie-color-inverted-text)
  --uie-color-label-border var(--uie-color-accent-medium)
  --uie-color-tag-bg var(--uie-color-main-bg)
  --uie-color-tag-text var(--uie-color-tertiary-text)
  --uie-color-tag-border var(--uie-color-tertiary-text)

  --uie-color-code-bg var(--uie-color-bg-medium)
  --uie-color-code-border var(--uie-color-option-border)
  --uie-color-code-header-text var(--uie-color-option-text)
  --uie-color-code-header-bg var(--uie-color-option-bg)
  --uie-color-code-header-text-hover var(--uie-color-option-text-hoveer)
  --uie-color-code-header-bg-hover var(--uie-color-option-bg-hover)
  --uie-color-code-header-text-current var(--uie-color-option-text-hover)
  --uie-color-code-header-bg-current var(--uie-color-option-bg-hover)

  --uie-color-footer-bg var(--uie-color-bg-light)
  --uie-color-footer-text var(--uie-color-secondary-text)
  --uie-color-footer-link var(--uie-color-secondary-link)
  --uie-color-footer-link-hover var(--uie-color-secondary-link-hover)

  --uie-color-preview-title var(--uie-color-main-text)
  --uie-color-preview-title-bg var(--uie-color-bg-medium)
  --uie-color-preview-border var(--uie-color-border-dark)

  --uie-preview-border-width var(--uie-space-s)
  --uie-preview-padding var(--uie-preview-border-width)
