assets:
  scope: claire
  color: '#133E5E'

animation:
  smooth-ease: cubic-bezier(0.7, 0, 0.3, 1)

color:
  transparent: 255, 255, 255
  dark: 33, 33, 33
  light: 255, 255, 255
  assertive: 243, 70, 41
  balanced: 19, 62, 94
  energized: 255, 126, 0
  positive: 24, 166, 180
  royal: 24, 166, 180
  brave-500: 19, 62, 94
  stable-100: 251, 252, 253
  stable-300: 241, 242, 244
  stable-500: 230, 234, 236
  stable-700: 216, 221, 226
  stable-900: 106, 120, 131

font:
  stack: Roboto
  stack-alt: Montserrat
  stack-handwriting: cursive
  size-xxxl: 42px
  size-xxl: 27px
  size-xl: 22px
  size-l: 20px
  size-m: 18px
  size-s: 16px
  size-xs: 15px
  size-xxs: 14px
  size-xxxs: 12px

radius:
  xs: 3px
  s: 5px
  m: 10px
  l: 60px
  xl: 75px

spacing:
  xxxs: 2px
  xxs: 5px
  xs: 10px
  s: 12px
  m: 15px
  l: 20px
  xl: 30px
  xxl: 40px
  xxxl: 50px

shadow:
  s: 0px 1px 0px rgba(0, 0, 0, 0.05)
  m: 0px 1px 3px rgba(0, 0, 0, 0.05)
  l: 0px 3px 6px rgba(0, 0, 0, 0.05)

grid:
  max-width: 1140px

image:
  text-width: 490px
  border-radius: var(--radius-m)

button:
  title-font-weight: 500

steps:
  link-font-family: var(--font-stack)
  link-border: 2px solid rgba(216, 221, 226, 1)
  padding: var(--spacing-m) 0
  link-active-color: rgba(var(--color-balanced), 1)
  link-active-title-color: rgba(var(--color-balanced), 1)
  link-active-border-color: rgba(var(--color-balanced), 1)

content:
  intro-font-weight: 400
  button-font-weight: 500

heading:
  h6-font-weight-medium: 600

list:
  color-marker: rgba(var(--color-royal), 1)

wrapper:
  card-border: 1px solid rgba(var(--color-stable-500), 1)

table:
  tr-even-background-color: rgba(var(--color-light), 1)
  td-padding-medium: var(--spacing-s) var(--spacing-s) var(--spacing-s) var(--spacing-xl)
  border-th-padding-medium: var(--spacing-s) var(--spacing-xl)

modal:
  heading-border-bottom: 1px solid rgba(var(--color-stable-500), 1)

textarea:
  border-right: 1px solid rgba(var(--color-stable-500), 1)
  border-bottom: 1px solid rgba(var(--color-stable-500), 1)
  border-left: 1px solid rgba(var(--color-stable-500), 1)
  border-top: 1px solid rgba(var(--color-stable-500), 1)

option:
  background-color: rgba(var(--color-light),1)

content-strong:
  font-weight: 500

message:
  background: currentColor

download:
  padding: var(--spacing-m) var(--spacing-l)

header:
  sidelogo-display: flex

pdf:
  footer-divider: '#e50000'
  title-color: '#e50000'

vp-widget:
  questionnaire-primary-button-radius: 10px
  button-m-padding: var(--spacing-xs) var(--spacing-l)

email:
  button-background-color: rgb(19, 62, 94)
  button-border-color: rgb(19, 62, 94)
  button-text-color: rgb(255, 255, 255)

banner:
  background-color: rgba(var(--color-balanced), 1)