/* =====================================================
   Typography Styles
   ===================================================== */

/* Headings */
.h1,
h1 {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
}

.h2,
h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
}

.h3,
h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
}

.h4,
h4 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
}

/* Body text */
.text-body {
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--line-height-normal);
}

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

.text-caption {
    font-size: var(--text-xs);
    font-weight: var(--font-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text-secondary);
}

/* Text colors */
.text-primary {
    color: var(--color-primary);
}

.text-secondary {
    color: var(--color-text-secondary);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-success {
    color: var(--color-success);
}

.text-warning {
    color: var(--color-warning);
}

.text-error {
    color: var(--color-error);
}

/* Text alignment */
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/* Font weights */
.font-normal {
    font-weight: var(--font-normal);
}

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

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

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

/* Text utilities */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}