:root {
    --font-size-xsmall: 12px;
    --font-size-small: 14px;
    --font-size-medium: 16px;
    --font-size-regular: 24px;
    --font-size-large: 30px;
    --font-size-xlarge: 32px;

    --font-weight-bold: 700;
    --font-weight-medium: 500;
    --font-weight-regular: 400;
    --font-weight-semibold: 300;

    --font-style-normal: normal;
    --font-style-italic: italic;

    --text-title: #26333F;
    --text-subtitle: #5F6878;
    --text-placeholder: #838B9C;

    --primary: #287FCE;
    --chart-violet: #9B7CD0;
}

.text-small {
    font-size: var(--font-size-small) !important;
}

.text-xsmall {
    font-size: var(--font-size-xsmall) !important;
}

.text-medium {
    font-size: var(--font-size-medium) !important;
}

.text-regular {
    font-size: var(--font-size-regular) !important;
}

.text-large {
    font-size: var(--font-size-large) !important;
}

.text-xlarge {
    font-size: var(--font-size-xlarge) !important;
}

.font-bold {
    font-weight: var(--font-weight-bold) !important;
}

.font-medium {
    font-weight: var(--font-weight-medium) !important;
}

.font-regular {
    font-weight: var(--font-weight-regular) !important;
}

.font-semibold {
    font-weight: var(--font-weight-semibold) !important;
}

.font-italic {
    font-style: var(--font-style-italic) !important;
}

.text-title {
    color: var(--text-title) !important;
}

.text-subtitle {
    color: var(--text-subtitle) !important;
}

.text-placeholder {
    color: var(--text-placeholder) !important;
}

.text-primary {
    color: var(--primary) !important
}

.text-violet {
    color: var(--chart-violet) !important
}

html:has(div.react-entity-view:not([style*="display: none"])) {
    font-size: var(--font-size-medium);
}