/* ============================================================================
   TEXT UTILITIES
   ============================================================================ */


/* Semantic Text Styles */

/* Hero */
.text-hero {
    font-family: var(--text-hero-font);
    font-size: clamp(2.4rem, 5vw, var(--text-hero-size));
    font-weight: var(--text-hero-weight);
    line-height: var(--text-hero-height);
    letter-spacing: var(--text-hero-tracking);
}

/* Display */
.text-display {
    font-family: var(--text-display-font);
    font-size: var(--text-display-size);
    font-weight: var(--text-display-weight);
    line-height: var(--text-display-height);
    letter-spacing: var(--text-display-tracking);
}

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

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

/* Subtitle */
.text-subtitle {
    font-family: var(--text-subtitle-font);
    font-size: var(--text-subtitle-size);
    font-weight: var(--text-subtitle-weight);
    line-height: var(--text-subtitle-height);
    letter-spacing: var(--text-subtitle-tracking);
}

/* Body */
.text-body {
    font-family: var(--text-body-font);
    font-size: var(--text-body-size);
    font-weight: var(--text-body-weight);
    line-height: var(--text-body-height);
    letter-spacing: var(--text-body-tracking);
}

/* Body Small */
.text-body-sm {
    font-family: var(--text-body-sm-font);
    font-size: var(--text-body-sm-size);
    font-weight: var(--text-body-sm-weight);
    line-height: var(--text-body-sm-height);
    letter-spacing: var(--text-body-sm-tracking);
}

/* Label */
.text-label {
    font-family: var(--text-label-font);
    font-size: var(--text-label-size);
    font-weight: var(--text-label-weight);
    line-height: var(--text-label-height);
    letter-spacing: var(--text-label-tracking);
}

/* Action */
.text-action {
    font-family: var(--text-action-font);
    font-size: var(--text-action-size);
    font-weight: var(--text-action-weight);
    line-height: var(--text-action-height);
    letter-spacing: var(--text-action-tracking);
}

/* Caption */
.text-caption {
    font-family: var(--text-caption-font);
    font-size: var(--text-caption-size);
    font-weight: var(--text-caption-weight);
    line-height: var(--text-caption-height);
    letter-spacing: var(--text-caption-tracking);
}


/* Text Truncation */

.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;
}


/* Text Colors */

.text-color-primary    { color: var(--color-text-primary); }
.text-color-base       { color: var(--color-text-base); }
.text-color-secondary  { color: var(--color-text-secondary); }
.text-color-dark       { color: var(--color-text-dark); }
.text-color-on-surface { color: var(--color-text-on-surface); }
.text-color-muted      { color: var(--color-text-muted); }
.text-color-white      { color: var(--color-neutral-0); }
.text-color-accent     { color: var(--color-accent); }
.text-color-success   { color: var(--color-text-success); }
.text-color-danger    { color: var(--color-text-danger); }


/* Text Alignment */

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


/* Text Transform */

.uppercase  { text-transform: uppercase; }
.lowercase  { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }


/* Font Weight */

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


/* Font Family */

.font-display { font-family: var(--font-family-display); }
.font-sans    { font-family: var(--font-family-sans); }
.font-mono    { font-family: var(--font-family-mono); }