.heading {
    color: var(--reactist-content-primary);
    font-weight: var(--reactist-font-weight-strong);
    font-family: var(--reactist-font-family);
}

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

.weight-light {
    font-weight: var(--reactist-font-weight-regular);
}

/* tone */

.tone-secondary {
    color: var(--reactist-content-secondary);
}
.tone-danger {
    color: rgb(209, 69, 59);
}

/* font size */

h1.heading {
    font-size: var(--reactist-font-size-header);
}
h1.size-largest {
    font-size: var(--reactist-font-size-header-xlarge);
}
h1.size-larger {
    font-size: var(--reactist-font-size-header-large);
}
h1.size-smaller {
    font-size: var(--reactist-font-size-subtitle);
}

h2.heading {
    font-size: var(--reactist-font-size-subtitle);
}
h2.size-largest {
    font-size: var(--reactist-font-size-header-large);
}
h2.size-larger {
    font-size: var(--reactist-font-size-header);
}
h2.size-smaller {
    font-size: var(--reactist-font-size-body);
}

h3.heading {
    font-size: var(--reactist-font-size-body);
}
h3.size-largest {
    font-size: var(--reactist-font-size-header);
}
h3.size-larger {
    font-size: var(--reactist-font-size-subtitle);
}
h3.size-smaller {
    font-size: var(--reactist-font-size-caption);
}

h4.heading,
h5.heading,
h6.heading {
    /*
     * unlike at higher levels, this one is kept as the same size as h3's
     * you can make it two levels larger visually, but making it smaller has no effect
     */
    font-size: var(--reactist-font-size-body);
}

h4.size-largest,
h5.size-largest,
h6.size-largest {
    font-size: var(--reactist-font-size-header);
}

h4.size-larger,
h5.size-larger,
h6.size-larger {
    font-size: var(--reactist-font-size-subtitle);
}

/* h4/h5/h6 can't be made smaller, maybe we reconsider this? */

/* truncated text */

.lineClampMultipleLines {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lineClamp-1 {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.lineClamp-2 {
    -webkit-line-clamp: 2;
}
.lineClamp-3 {
    -webkit-line-clamp: 3;
}
.lineClamp-4 {
    -webkit-line-clamp: 4;
}
.lineClamp-5 {
    -webkit-line-clamp: 5;
}
