body {
    /* Color */
    --st-color-accent: #2563EB;
    --st-color-accent-hover: #1D4ED8;
    --st-color-heading: #1F2937;
    --st-color-body: #4B5563;
    --st-color-light-gray: #E5E7EB;
    --st-color-placeholder: #6B7280;
    --st-color-white: #FFFFFF;
    --st-color-favorite: #E91E63;
    --st-background-secondary: #F7F7F9;
    --st-background-primary: #FFFFFF;
    --st-background-light: #F9FAFB;

    /* Font sizes */
    --st-font-size-xxl: 30px;
    --st-font-size-xl: 24px;
    --st-font-size-l: 20px;
    --st-font-size-m: 18px;
    --st-font-size-s: 16px;
    --st-font-size-xs: 14px;

    /*  Font Weight */
    --st-font-weight-extra-bold: 600;
    --st-font-weight-bold: 500;
    --st-font-weight-normal: 400;

    /*  Font Line Height */
    --st-font-line-height-xl: 36px;
    --st-font-line-height-l: 32px;
    --st-font-line-height-m: 28px;
    --st-font-line-height-s: 24px;
    --st-font-line-height-xs: 20px;

    /* Border */
    --st-border-color: #D1D5DB;
    --st-border-radius-6: 6px;
    --st-border-radius-4: 4px;
    --st-border-radius-3: 3px;
    --st-border-radius-2: 2px;
    --st-border-radius-1: 1px;
}

.zw-xxs-medium {
    font-size: 0.625rem;
    font-weight: 500;
    line-height: 0.75rem;
}
.zw-xs-normal {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;
}
.zw-xs-medium {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}
.zw-xs-semibold {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1rem;
}
.zw-sm-normal {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
}
.zw-sm-medium {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
}
.zw-sm-semibold {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
}
.zw-base-normal {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
}
.zw-base-medium {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5rem;
}
.zw-base-semibold {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
}
.zw-base-bold {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
}

.zw-h1 {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 2.25rem;
    color: var(--app-heading);
}
.zw-h2 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2rem;
    color: var(--app-heading);
}
.zw-h3 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25rem;
    color: var(--app-heading);
}
.zw-h4 {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.75rem;
    color: var(--app-heading);
}
.zw-h5 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1rem;
    color: var(--app-heading);
}
.zw-h6 {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 0.875rem;
    color: var(--app-heading);
}

.zw-tooltip {
    background: #334155;
    color: white;
    padding: 0 8px;
    border-radius: 4px;
}

.zw-tooltip > .tippy-content {
    padding: 2px 4px;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;
}