// ── Tag-based rules (global styling) ──

h1,
h2,
h3,
h4 {
    color: var(--sys-text-color-default);
    font-family: var(--sys-text-style-body-font-family);
}
h1 {
    font-size: var(--sys-text-style-h1-size);
    line-height: var(--sys-text-style-h1-line-height);
    font-weight: var(--sys-text-style-h1-weight);
}
h2 {
    font-size: var(--sys-text-style-h2-size);
    line-height: var(--sys-text-style-h2-line-height);
    font-weight: var(--sys-text-style-h2-weight);
}
h3 {
    font-size: var(--sys-text-style-h3-size);
    line-height: var(--sys-text-style-h3-line-height);
    font-weight: var(--sys-text-style-h3-weight);
}
h4 {
    font-size: var(--sys-text-style-h4-size);
    line-height: var(--sys-text-style-h4-line-height);
    font-weight: var(--sys-text-style-h4-weight);
}
p {
    margin: 0 0 var(--ref-spacing-xs);
}

// ── Typography classes ──

.h0 {
    font-family: var(--sys-text-style-h0-font-family);
    font-size: var(--sys-text-style-h0-size);
    font-weight: var(--sys-text-style-h0-weight);
    line-height: var(--sys-text-style-h0-line-height);
}

p.caption,
span.caption,
.mat-caption {
    font-size: var(--sys-text-style-caption-size);
    line-height: var(--sys-text-style-caption-line-height);
}

p.large,
span.large {
    font-size: 16px;
    line-height: 20px;
}
p.small,
span.small,
small {
    font-size: 10px;
    line-height: 14px;
}

.bold {
    font-weight: var(--sys-text-style-body-bold-weight);
}

.italic {
    font-style: italic;
}