/* ==========================================================================
   기본 스타일 — 문서 기본값과 타이포그래피 클래스
   - 타이포그래피 값은 tokens.css의 --text-* 변수를 사용한다.
   - 화면에서는 아래 .text-* 클래스로 글자 스타일을 적용한다.
   ========================================================================== */

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--text-body-md-size);
  font-weight: var(--text-body-md-weight);
  line-height: var(--text-body-md-line-height);
  letter-spacing: var(--text-body-md-letter-spacing);
  color: var(--color-text-main);
  background: var(--color-bg-base);
  -webkit-font-smoothing: antialiased;
}

/* Typography ------------------------------------------------------------- */

/* Display */
.text-display-lg {
  font-size: var(--text-display-lg-size);
  font-weight: var(--text-display-lg-weight);
  line-height: var(--text-display-lg-line-height);
  letter-spacing: var(--text-display-lg-letter-spacing);
}
.text-display-md {
  font-size: var(--text-display-md-size);
  font-weight: var(--text-display-md-weight);
  line-height: var(--text-display-md-line-height);
  letter-spacing: var(--text-display-md-letter-spacing);
}
.text-display-sm {
  font-size: var(--text-display-sm-size);
  font-weight: var(--text-display-sm-weight);
  line-height: var(--text-display-sm-line-height);
  letter-spacing: var(--text-display-sm-letter-spacing);
}
.text-display-xs {
  font-size: var(--text-display-xs-size);
  font-weight: var(--text-display-xs-weight);
  line-height: var(--text-display-xs-line-height);
  letter-spacing: var(--text-display-xs-letter-spacing);
}

/* Heading */
.text-heading-md {
  font-size: var(--text-heading-md-size);
  font-weight: var(--text-heading-md-weight);
  line-height: var(--text-heading-md-line-height);
  letter-spacing: var(--text-heading-md-letter-spacing);
}
.text-heading-sm {
  font-size: var(--text-heading-sm-size);
  font-weight: var(--text-heading-sm-weight);
  line-height: var(--text-heading-sm-line-height);
  letter-spacing: var(--text-heading-sm-letter-spacing);
}

/* Title */
.text-title-lg {
  font-size: var(--text-title-lg-size);
  font-weight: var(--text-title-lg-weight);
  line-height: var(--text-title-lg-line-height);
  letter-spacing: var(--text-title-lg-letter-spacing);
}
.text-title-md {
  font-size: var(--text-title-md-size);
  font-weight: var(--text-title-md-weight);
  line-height: var(--text-title-md-line-height);
  letter-spacing: var(--text-title-md-letter-spacing);
}
.text-title-sm {
  font-size: var(--text-title-sm-size);
  font-weight: var(--text-title-sm-weight);
  line-height: var(--text-title-sm-line-height);
  letter-spacing: var(--text-title-sm-letter-spacing);
}

/* Body */
.text-body-lg {
  font-size: var(--text-body-lg-size);
  font-weight: var(--text-body-lg-weight);
  line-height: var(--text-body-lg-line-height);
  letter-spacing: var(--text-body-lg-letter-spacing);
}
.text-body-md {
  font-size: var(--text-body-md-size);
  font-weight: var(--text-body-md-weight);
  line-height: var(--text-body-md-line-height);
  letter-spacing: var(--text-body-md-letter-spacing);
}
.text-body-md-14 {
  font-size: var(--text-body-md-14-size);
  font-weight: var(--text-body-md-14-weight);
  line-height: var(--text-body-md-14-line-height);
  letter-spacing: var(--text-body-md-14-letter-spacing);
}
.text-body-md-14-regular {
  font-size: var(--text-body-md-14-regular-size);
  font-weight: var(--text-body-md-14-regular-weight);
  line-height: var(--text-body-md-14-regular-line-height);
  letter-spacing: var(--text-body-md-14-regular-letter-spacing);
}

/* Label */
.text-label-xl {
  font-size: var(--text-label-xl-size);
  font-weight: var(--text-label-xl-weight);
  line-height: var(--text-label-xl-line-height);
  letter-spacing: var(--text-label-xl-letter-spacing);
}
.text-label-lg {
  font-size: var(--text-label-lg-size);
  font-weight: var(--text-label-lg-weight);
  line-height: var(--text-label-lg-line-height);
  letter-spacing: var(--text-label-lg-letter-spacing);
}
.text-label-md {
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  line-height: var(--text-label-md-line-height);
  letter-spacing: var(--text-label-md-letter-spacing);
}
.text-label-md-14-semibold {
  font-size: var(--text-label-md-14-semibold-size);
  font-weight: var(--text-label-md-14-semibold-weight);
  line-height: var(--text-label-md-14-semibold-line-height);
  letter-spacing: var(--text-label-md-14-semibold-letter-spacing);
}
.text-label-md-14 {
  font-size: var(--text-label-md-14-size);
  font-weight: var(--text-label-md-14-weight);
  line-height: var(--text-label-md-14-line-height);
  letter-spacing: var(--text-label-md-14-letter-spacing);
}
.text-label-sm {
  font-size: var(--text-label-sm-size);
  font-weight: var(--text-label-sm-weight);
  line-height: var(--text-label-sm-line-height);
  letter-spacing: var(--text-label-sm-letter-spacing);
}
.text-label-xs {
  font-size: var(--text-label-xs-size);
  font-weight: var(--text-label-xs-weight);
  line-height: var(--text-label-xs-line-height);
  letter-spacing: var(--text-label-xs-letter-spacing);
}

/* Detail */
.text-detail-lg {
  font-size: var(--text-detail-lg-size);
  font-weight: var(--text-detail-lg-weight);
  line-height: var(--text-detail-lg-line-height);
  letter-spacing: var(--text-detail-lg-letter-spacing);
}
.text-detail-md {
  font-size: var(--text-detail-md-size);
  font-weight: var(--text-detail-md-weight);
  line-height: var(--text-detail-md-line-height);
  letter-spacing: var(--text-detail-md-letter-spacing);
}
.text-detail-sm {
  font-size: var(--text-detail-sm-size);
  font-weight: var(--text-detail-sm-weight);
  line-height: var(--text-detail-sm-line-height);
  letter-spacing: var(--text-detail-sm-letter-spacing);
}
.text-detail-xs {
  font-size: var(--text-detail-xs-size);
  font-weight: var(--text-detail-xs-weight);
  line-height: var(--text-detail-xs-line-height);
  letter-spacing: var(--text-detail-xs-letter-spacing);
}