:root {
    --uxi-color-primary: #003366;
    --uxi-color-secondary: #5D99B8;
    --uxi-color-action: #179CD3;
    --uxi-color-active: #179CD3;
    --uxi-color-inactive: #C9D5DE;
    --uxi-color-signal-success: #2FB421;
    --uxi-color-signal-warning: #F39811;
    --uxi-color-signal-alert: #CB3511;
    --uxi-color-text: #111B23;
    --uxi-color-text-light: #36414A;
    --uxi-color-text-inverse: #FDFDFD;
    --uxi-color-text-success: #279D1B;
    --uxi-color-text-warning: #C87802;
    --uxi-color-text-alert: #CB3511;
    --uxi-color-border: #96AFC1;
    --uxi-color-border-light: #F0F4F7;
    --uxi-color-overlay: #F9F9F9;
    --uxi-color-action-highlight: #D5E4F0;
    --uxi-color-background: #E7F0F7;
    --uxi-color-background-action: #E4F7FF;
    --uxi-color-background-light: #FDFDFD;
    --uxi-color-background-modal: #F3F3F3;
    --uxi-color-background-success: #E3F2E2;
    --uxi-color-background-warning: #FDF0DD;
    --uxi-color-background-alert: #FDE8E3;
    --uxi-color-accent-mint-text: #528F76;
    --uxi-color-accent-mint-border: #8DD6B7;
    --uxi-color-accent-mint-background: #CEF1E2;
    --uxi-color-accent-sky-text: #526EA0;
    --uxi-color-accent-sky-border: #BED1EC;
    --uxi-color-accent-sky-background: #D8E5FC;
    --uxi-color-accent-bubblegum-text: #9C5999;
    --uxi-color-accent-bubblegum-border: #E8BFE6;
    --uxi-color-accent-bubblegum-background: #F7D6F5;
    --uxi-color-accent-lemon-text: #A07F48;
    --uxi-color-accent-lemon-border: #E7E095;
    --uxi-color-accent-lemon-background: #FDF9E3;
    --uxi-color-accent-rose-text: #A76262;
    --uxi-color-accent-rose-border: #F0BBBB;
    --uxi-color-accent-rose-background: #FFDCDC;
    --uxi-color-accent-aqua-text: #64ABB3;
    --uxi-color-accent-aqua-border: #A7DCE2;
    --uxi-color-accent-aqua-background: #D6FAFE;

    --uxi-typo-sb12-font-size: 12px;
    --uxi-typo-sb8-font-size: 8px;
}

@font-face {
    font-family: "Figtree";
    src: url("../fonts/figtree/Figtree-Light.ttf");
    font-weight: 300;
}

@font-face {
    font-family: "Figtree";
    src: url("../fonts/figtree/Figtree-Regular.ttf");
    font-weight: 400;
}

@font-face {
    font-family: "Figtree";
    src: url("../fonts/figtree/Figtree-Medium.ttf");
    font-weight: 500;
}

@font-face {
    font-family: "Figtree";
    src: url("../fonts/figtree/Figtree-SemiBold.ttf");
    font-weight: 600;
}

@font-face {
    font-family: "Figtree";
    src: url("../fonts/figtree/Figtree-Bold.ttf");
    font-weight: 700;
}

.uxi-typo-body {
  font-family: "Figtree", sans-serif;
  font-size: 15px;
  line-height: 21px;
  font-weight: 400;
  font-style: normal;
}

.uxi-typo-title {
    font-family: "Figtree", sans-serif;
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
    font-style: normal;
}

.uxi-typo-headline {
    font-family: "Figtree", sans-serif;
    font-size: 18px;
    line-height: 25px;
    font-weight: 700;
    font-style: normal;
}

.uxi-typo-subheadline {
    font-family: "Figtree", sans-serif;
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    font-style: normal;
}

.uxi-typo-annotation {
    font-family: "Figtree", sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
    font-style: normal;
}

.uxi-typo-text,
.uxi-typo-text-accent {
    font-family: "Figtree", sans-serif;
    font-size: 15px;
    line-height: 21px;
    font-weight: 400;
    font-style: normal;
}

.uxi-typo-text-accent {
    font-weight: 600;
}

.uxi-typo-text-small {
    font-family: "Figtree", sans-serif;
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    font-style: normal;
}

.uxi-typo-b14 {
    font-family: "Figtree", sans-serif;
    font-size: 14px;
    line-height: 24px;
    font-weight: 700;
    font-style: normal;
}

.uxi-typo-sb16 {
    font-family: "Figtree", sans-serif;
    font-size: 16px;
    line-height: 19px;
    font-weight: 600;
    font-style: normal;
}

.uxi-typo-sb15 {
    font-family: "Figtree", sans-serif;
    font-size: 15px;
    line-height: 18px;
    font-weight: 600;
    font-style: normal;
}

.uxi-typo-sb13 {
    font-family: "Figtree", sans-serif;
    font-size: 13px;
    line-height: 16px;
    font-weight: 600;
    font-style: normal;
}

.uxi-typo-sb12 {
    font-family: "Figtree", sans-serif;
    font-size: var(--uxi-typo-sb12-font-size);
    line-height: 14px;
    font-weight: 600;
    font-style: normal;
}

.uxi-typo-sb8 {
  font-family: "Figtree", sans-serif;
  font-size: var(--uxi-typo-sb8-font-size);
  line-height: 10px;
  font-weight: 600;
  font-style: normal;
}

.uxi-typo-m36 {
    font-family: "Figtree", sans-serif;
    font-size: 36px;
    line-height: 43px;
    font-weight: 500;
    font-style: normal;
}

.uxi-typo-m24 {
  font-family: "Figtree", sans-serif;
  font-size: 24px;
  line-height: 28px;
  font-weight: 500;
  font-style: normal;
}

.uxi-typo-m15 {
    font-family: "Figtree", sans-serif;
    font-size: 15px;
    line-height: 18px;
    font-weight: 500;
    font-style: normal;
}

.uxi-typo-m12 {
    font-family: "Figtree", sans-serif;
    font-size: 12px;
    line-height: 14px;
    font-weight: 500;
    font-style: normal;
}

.uxi-typo-r16 {
    font-family: "Figtree", sans-serif;
    font-size: 16px;
    line-height: 14px;
    font-weight: 400;
    font-style: normal;
}

.uxi-typo-r15 {
    font-family: "Figtree", sans-serif;
    font-size: 15px;
    line-height: 18px;
    font-weight: 400;
    font-style: normal;
}

.uxi-typo-r14 {
    font-family: "Figtree", sans-serif;
    font-size: 14px;
    line-height: 17px;
    font-weight: 400;
    font-style: normal;
}

.uxi-typo-r12 {
    font-family: "Figtree", sans-serif;
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
    font-style: normal;
}

.uxi-typo-i15 {
    font-family: "Figtree", sans-serif;
    font-size: 15px;
    line-height: 18px;
    font-weight: 400;
    font-style: italic;
}