h1 {
    font-family: var(--i-font-family-heading), sans-serif;
    font-size: var(--i-font-size-3xl);
    font-weight: var(--i-font-weight-black);
    line-height: var(--i-line-height-3xl);
}

h2 {
    font-family: var(--i-font-family-heading), sans-serif;
    font-size: var(--i-font-size-2xl);
    font-weight: var(--i-font-weight-bold);
    line-height: var(--i-line-height-2xl);
}

h3 {
    font-family: var(--i-font-family-text), sans-serif;
    font-size: var(--i-font-size-xl);
    font-weight: var(--i-font-weight-semi-bold);
    line-height: var(--i-line-height-xl);
}

h4 {
    font-family: var(--i-font-family-text), sans-serif;
    font-size: var(--i-font-size-lg);
    font-weight: var(--i-font-weight-semi-bold);
    line-height: var(--i-line-height-lg);
}

h5 {
    font-family: var(--i-font-family-text), sans-serif;
    font-size: var(--i-font-size-md);
    font-weight: var(--i-font-weight-semi-bold);
    line-height: var(--i-line-height-md);
}

.i-type {
    font-family: var(--i-font-family-text);
    font-size: var(--i-font-size);
    font-weight: var(--i-font-weight);
    font-feature-settings: normal;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: normal;
    line-height: var(--i-line-height);
    color: var(--i-color-text);
}

.i-type--h1 {
    font-family: var(--i-font-family-heading), sans-serif;
    font-weight: var(--i-font-weight-black);
    font-size: var(--i-font-size-3xl);
    line-height: var(--i-line-height-3xl);
    letter-spacing: var(--i-letter-spacing-3xl);
    color: var(--i-color-heading);
}

.i-type--h2 {
    font-family: var(--i-font-family-heading), sans-serif;
    font-weight: var(--i-font-weight-bold);
    font-size: var(--i-font-size-2xl);
    line-height: var(--i-line-height-2xl);
    letter-spacing: var(--i-letter-spacing-2xl);
    color: var(--i-color-heading);
}

.i-type--h3 {
    font-family: var(--i-font-family-text), sans-serif;
    font-weight: var(--i-font-weight-semi-bold);
    font-size: var(--i-font-size-xl);
    line-height: var(--i-line-height-xl);
    letter-spacing: var(--i-letter-spacing-xl);
    color: var(--i-color-heading);
}

.i-type--h4 {
    font-family: var(--i-font-family-text), sans-serif;
    font-weight: var(--i-font-weight-semi-bold);
    font-size: var(--i-font-size-lg);
    line-height: var(--i-line-height-lg);
    letter-spacing: var(--i-letter-spacing-lg);
    color: var(--i-color-heading);
}

.i-type--h5 {
    font-family: var(--i-font-family-text), sans-serif;
    font-weight: var(--i-font-weight-semi-bold);
    font-size: var(--i-font-size-md);
    line-height: var(--i-line-height-md);
    letter-spacing: var(--i-letter-spacing-md);
    color: var(--i-color-heading);
}

/* Font sizes */
.i-type--xs {
    font-size: var(--i-font-size-xs);
    line-height: var(--i-line-height-xs);
    letter-spacing: var(--i-letter-spacing-xs);
}

.i-type--sm {
    font-size: var(--i-font-size-sm);
    line-height: var(--i-line-height-sm);
    letter-spacing: var(--i-letter-spacing-sm);
}

.i-type--md {
    font-size: var(--i-font-size-md);
    line-height: var(--i-line-height-md);
    letter-spacing: var(--i-letter-spacing-md);
}

.i-type--lg {
    font-size: var(--i-font-size-lg);
    line-height: var(--i-line-height-lg);
    letter-spacing: var(--i-letter-spacing-lg);
}

.i-type--xl {
    font-size: var(--i-font-size-xl);
    line-height: var(--i-line-height-xl);
    letter-spacing: var(--i-letter-spacing-xl);
}

.i-type--2xl {
    font-size: var(--i-font-size-2xl);
    line-height: var(--i-line-height-2xl);
    letter-spacing: var(--i-letter-spacing-2xl);
}

.i-type--3xl {
    font-size: var(--i-font-size-3xl);
    line-height: var(--i-line-height-3xl);
    letter-spacing: var(--i-letter-spacing-3xl);
}

.i-type--lead {
    font-size: var(--i-font-size-lg);
    line-height: var(--i-line-height-lg);
    font-weight: var(--i-font-weight-semi-bold);
    letter-spacing: var(--i-letter-spacing-lg);
}

/* Font weights */
.i-type--style-black {
    font-weight: var(--i-font-weight-black);
}

.i-type--style-bold {
    font-weight: var(--i-font-weight-bold);
}

.i-type--style-semi-bold {
    font-weight: var(--i-font-weight-semi-bold);
}

.i-type--style-medium {
    font-weight: var(--i-font-weight-medium);
}

.i-type--style-regular {
    font-weight: var(--i-font-weight);
}

/* Font styles */
.i-type--style-normal {
    font-style: var(--i-font-style-normal);
}

.i-type--style-italic {
    font-style: var(--i-font-style-italic);
}

/* Alignment */
.i-type--text-right {
    text-align: right;
}