/* ============================================================
   Grebob Design System — typography.css
   Source: Figma master_styles (Content/KR 22종 실측값)
   Font stack: Roboto, Noto Sans KR, sans-serif
   Generated: 2026-04-15
   ============================================================ */

/* ──────────────────────────────────────────────
   Display — 대형 타이틀 (Bold 700)
   ────────────────────────────────────────────── */

.typo-display-01 {
  font-family: var(--font-content);
  font-size: 64px;
  font-weight: 700;
  line-height: 86.4px;    /* 135% */
  letter-spacing: -2px;
}

.typo-display-02 {
  font-family: var(--font-content);
  font-size: 52px;
  font-weight: 700;
  line-height: 70.2px;    /* 135% */
  letter-spacing: -2px;
}

.typo-display-03 {
  font-family: var(--font-content);
  font-size: 48px;
  font-weight: 700;
  line-height: 64.8px;    /* 135% */
  letter-spacing: -1px;
}

/* ──────────────────────────────────────────────
   Header — 섹션 헤더 (Bold 700)
   ────────────────────────────────────────────── */

.typo-header-01 {
  font-family: var(--font-content);
  font-size: 40px;
  font-weight: 700;
  line-height: 54px;      /* 135% */
  letter-spacing: -1px;
}

.typo-header-02 {
  font-family: var(--font-content);
  font-size: 32px;
  font-weight: 700;
  line-height: 43.2px;    /* 135% */
  letter-spacing: -0.6px;
}

.typo-header-03 {
  font-family: var(--font-content);
  font-size: 24px;
  font-weight: 700;
  line-height: 32.4px;    /* 135% */
  letter-spacing: -0.4px;
}

/* ──────────────────────────────────────────────
   Title — 카드/다이얼로그 타이틀 (Bold 700)
   ────────────────────────────────────────────── */

.typo-title-01 {
  font-family: var(--font-content);
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;      /* 135% */
  letter-spacing: -0.4px;
}

.typo-title-02 {
  font-family: var(--font-content);
  font-size: 18px;
  font-weight: 700;
  line-height: 24.3px;    /* 135% */
  letter-spacing: -0.4px;
}

.typo-title-03 {
  font-family: var(--font-content);
  font-size: 16px;
  font-weight: 700;
  line-height: 21.6px;    /* 135% */
  letter-spacing: -0.4px;
}

.typo-title-04 {
  font-family: var(--font-content);
  font-size: 14px;
  font-weight: 700;
  line-height: 19.6px;    /* 140% */
  letter-spacing: -0.2px;
}

/* ──────────────────────────────────────────────
   Subtitle — 보조 타이틀/라벨 (Medium 500)
   ────────────────────────────────────────────── */

.typo-subtitle-01 {
  font-family: var(--font-content);
  font-size: 18px;
  font-weight: 500;
  line-height: 24.3px;    /* 135% */
  letter-spacing: -0.4px;
}

.typo-subtitle-02 {
  font-family: var(--font-content);
  font-size: 16px;
  font-weight: 500;
  line-height: 21.6px;    /* 135% */
  letter-spacing: -0.4px;
}

.typo-subtitle-03 {
  font-family: var(--font-content);
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;    /* 140% */
  letter-spacing: -0.2px;
}

.typo-subtitle-04 {
  font-family: var(--font-content);
  font-size: 13px;
  font-weight: 500;
  line-height: 17.6px;    /* 135% */
  letter-spacing: -0.2px;
}

/* ──────────────────────────────────────────────
   Body — 본문 텍스트 (Regular 400)
   ────────────────────────────────────────────── */

.typo-body-01 {
  font-family: var(--font-content);
  font-size: 18px;
  font-weight: 400;
  line-height: 24.3px;    /* 135% */
  letter-spacing: -0.4px;
}

.typo-body-02 {
  font-family: var(--font-content);
  font-size: 16px;
  font-weight: 400;
  line-height: 21.6px;    /* 135% */
  letter-spacing: -0.4px;
}

.typo-body-03 {
  font-family: var(--font-content);
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;    /* 140% */
  letter-spacing: -0.2px;
}

.typo-body-04 {
  font-family: var(--font-content);
  font-size: 13px;
  font-weight: 400;
  line-height: 17.6px;    /* 135% */
  letter-spacing: -0.2px;
}

/* ──────────────────────────────────────────────
   Caption — 주석/헬퍼/타임스탬프
   ────────────────────────────────────────────── */

.typo-caption-01 {
  font-family: var(--font-content);
  font-size: 12px;
  font-weight: 700;       /* Bold */
  line-height: 16.2px;    /* 135% */
  letter-spacing: 0px;
}

.typo-caption-02 {
  font-family: var(--font-content);
  font-size: 12px;
  font-weight: 500;       /* Medium */
  line-height: 16.2px;    /* 135% */
  letter-spacing: 0px;
}

.typo-caption-03 {
  font-family: var(--font-content);
  font-size: 10px;
  font-weight: 700;       /* Bold */
  line-height: 13.5px;    /* 135% */
  letter-spacing: 0px;
}

.typo-caption-04 {
  font-family: var(--font-content);
  font-size: 10px;
  font-weight: 500;       /* Medium */
  line-height: 13.5px;    /* 135% */
  letter-spacing: 0px;
}

/* ──────────────────────────────────────────────
   Utility — Color modifiers
   ────────────────────────────────────────────── */

.typo-color-primary   { color: var(--text-primary); }
.typo-color-secondary { color: var(--text-secondary); }
.typo-color-disabled  { color: var(--text-disabled); }
.typo-color-on-color  { color: var(--text-on-color); }
.typo-color-link      { color: var(--text-link); }
.typo-color-error     { color: var(--text-error); }
.typo-color-brand     { color: var(--maven-blue-bright); }