/* ========================================
   Typography - タイポグラフィ関連のスタイル
======================================== */

/* ========================================
   Display Typography - 大きい順に定義
======================================== */
.display-2xl {
    font-size: var(--size-responsive-7xl);
    font-weight: var(--weight-black);
    line-height: var(--line-tight);
}

.display-xl {
    font-size: var(--size-responsive-6xl);
    font-weight: var(--weight-black);
    line-height: var(--line-tight);
}

.display-lg {
    font-size: var(--size-responsive-5xl);
    font-weight: var(--weight-bold);
    line-height: var(--line-tight);
}

.display-md {
    font-size: var(--size-responsive-4xl);
    font-weight: var(--weight-bold);
    line-height: var(--line-tight);
}

.display-sm {
    font-size: var(--size-responsive-3xl);
    font-weight: var(--weight-semibold);
    line-height: var(--line-tight);
}


/* ========================================
   Page Title Styles
======================================== */
.page-title {
    font-size: var(--size-responsive-7xl);
    font-weight: var(--weight-black);
    line-height: var(--line-tight);
    margin-bottom: var(--spacing-md);
    color: var(--text-white);
}

.page-title-style {
    margin-bottom: var(--spacing-md);
    color: var(--text-white);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.hero-title {
    font-size: var(--size-responsive-6xl);
    font-weight: var(--weight-black);
    line-height: var(--line-tight);
    margin-bottom: var(--spacing-lg);
}

.hero-title-style {
    margin-bottom: var(--spacing-lg);
}


/* ========================================
   Heading Typography - 見出し用クラス（大きい順）
======================================== */
.heading-1 {
    font-size: var(--size-responsive-4xl);
    font-weight: var(--weight-bold);
    line-height: var(--line-tight);
}

.heading-2 {
    font-size: var(--size-responsive-3xl);
    font-weight: var(--weight-semibold);
    line-height: var(--line-tight);
}

.heading-3 {
    font-size: var(--size-2xl);
    font-weight: var(--weight-semibold);
    line-height: var(--line-base);
}

.heading-4 {
    font-size: var(--size-xl);
    font-weight: var(--weight-medium);
    line-height: var(--line-base);
}

.heading-5 {
    font-size: var(--size-lg);
    font-weight: var(--weight-medium);
    line-height: var(--line-base);
}

.heading-6 {
    font-size: var(--size-base);
    font-weight: var(--weight-medium);
    line-height: var(--line-base);
}

/* HTMLタグのデフォルトスタイル - クラスを継承 */
h1 {
    font-size: var(--size-responsive-4xl);
    font-weight: var(--weight-bold);
    line-height: var(--line-tight);
}

h2 {
    font-size: var(--size-responsive-3xl);
    font-weight: var(--weight-semibold);
    line-height: var(--line-tight);
}

h3 {
    font-size: var(--size-2xl);
    font-weight: var(--weight-semibold);
    line-height: var(--line-base);
}

h4 {
    font-size: var(--size-xl);
    font-weight: var(--weight-medium);
    line-height: var(--line-base);
}

h5 {
    font-size: var(--size-lg);
    font-weight: var(--weight-medium);
    line-height: var(--line-base);
}

h6 {
    font-size: var(--size-base);
    font-weight: var(--weight-medium);
    line-height: var(--line-base);
}


/* ========================================
   Body Typography - 本文用クラス
======================================== */
.body-xl {
    font-size: var(--size-xl);
    font-weight: var(--weight-normal);
    line-height: var(--line-relaxed);
}

.body-lg {
    font-size: var(--size-lg);
    font-weight: var(--weight-normal);
    line-height: var(--line-relaxed);
}

.body-md {
    font-size: var(--size-base);
    font-weight: var(--weight-normal);
    line-height: var(--line-base);
}

.body-sm {
    font-size: var(--size-sm);
    font-weight: var(--weight-normal);
    line-height: var(--line-base);
}

.body-xs {
    font-size: var(--size-xs);
    font-weight: var(--weight-normal);
    line-height: var(--line-base);
}


/* ========================================
   Caption Typography - キャプション用クラス
======================================== */
.caption-lg {
    font-size: var(--size-sm);
    color: var(--text-secondary);
}

.caption-md {
    font-size: var(--size-xs);
    color: var(--text-secondary);
}

.caption-sm {
    font-size: 0.6875rem; /* 11px */
    color: var(--text-light);
}


/* ========================================
   UI Typography - インターフェース用クラス
======================================== */
.ui-label {
    font-size: var(--size-sm);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
}


/* ========================================
   Typography Utilities
======================================== */
.font-normal {
    font-weight: var(--weight-normal);
}

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

.font-semibold {
    font-weight: var(--weight-semibold);
}

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

.font-black {
    font-weight: var(--weight-black);
}