/* ============================================================
   타이포그래피 유틸리티 클래스
   - 10개 토큰을 그대로 적용하는 클래스
   - 사용 예 : <h1 class="text-display-1">…</h1>
              <p  class="text-body-2">…</p>
   ============================================================ */

.text-display-1,
.text-display-2,
.text-title-1,
.text-title-2,
.text-heading-1,
.text-heading-2,
.text-button,
.text-body-1,
.text-body-2,
.text-caption {
    font-family: var(--font-family-base);
}

.text-display-1 {
    font-size:      var(--font-display-1-size);
    line-height:    var(--font-display-1-line);
    letter-spacing: var(--font-display-1-spacing);
    font-weight:    var(--font-display-1-weight);
}

.text-display-2 {
    font-size:      var(--font-display-2-size);
    line-height:    var(--font-display-2-line);
    letter-spacing: var(--font-display-2-spacing);
    font-weight:    var(--font-display-2-weight);
}

.text-title-1 {
    font-size:      var(--font-title-1-size);
    line-height:    var(--font-title-1-line);
    letter-spacing: var(--font-title-1-spacing);
    font-weight:    var(--font-title-1-weight);
}

.text-title-2 {
    font-size:      var(--font-title-2-size);
    line-height:    var(--font-title-2-line);
    letter-spacing: var(--font-title-2-spacing);
    font-weight:    var(--font-title-2-weight);
}

.text-heading-1 {
    font-size:      var(--font-heading-1-size);
    line-height:    var(--font-heading-1-line);
    letter-spacing: var(--font-heading-1-spacing);
    font-weight:    var(--font-heading-1-weight);
}

.text-heading-2 {
    font-size:      var(--font-heading-2-size);
    line-height:    var(--font-heading-2-line);
    letter-spacing: var(--font-heading-2-spacing);
    font-weight:    var(--font-heading-2-weight);
}

.text-heading-5 {
    font-size:      var(--font-heading-5-size);
    line-height:    var(--font-heading-5-line);
    letter-spacing: var(--font-heading-5-spacing);
    font-weight:    var(--font-heading-5-weight);
}

.text-button {
    font-size:      var(--font-button-size);
    line-height:    var(--font-button-line);
    letter-spacing: var(--font-button-spacing);
    font-weight:    var(--font-button-weight);
}

.text-body-1 {
    font-size:      var(--font-body-1-size);
    line-height:    var(--font-body-1-line);
    letter-spacing: var(--font-body-1-spacing);
    font-weight:    var(--font-body-1-weight);
}

.text-body-2 {
    font-size:      var(--font-body-2-size);
    line-height:    var(--font-body-2-line);
    letter-spacing: var(--font-body-2-spacing);
    font-weight:    var(--font-body-2-weight);
}

.text-caption {
    font-size:      var(--font-caption-size);
    line-height:    var(--font-caption-line);
    letter-spacing: var(--font-caption-spacing);
    font-weight:    var(--font-caption-weight);
}