/* ==========================================================================
   Project Carnation — Typography
   Semantic headings get sensible defaults; classes set the visual scale
   independently of document outline (e.g. <h2 class="headline-2xl">).
   ========================================================================== */

/* ---- Headline base ----------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.display, .headline-2xl, .headline-xl, .headline-lg, .headline-md, .headline-sm {
    font-family: var(--font-serif);
    color: var(--color-text-heading);
    text-wrap: balance;
    font-optical-sizing: auto;
}

h1, .headline-2xl {
    font-size: var(--text-headline-2xl-size);
    line-height: var(--text-headline-2xl-leading);
    font-weight: var(--text-headline-2xl-weight);
    letter-spacing: var(--text-headline-2xl-tracking);
}

/* Display: reserved for the homepage hero headline */
.display {
    font-size: var(--text-display-size);
    line-height: var(--text-display-leading);
    font-weight: var(--text-display-weight);
    letter-spacing: var(--text-display-tracking);
}

h2, .headline-xl {
    font-size: var(--text-headline-xl-size);
    line-height: var(--text-headline-xl-leading);
    font-weight: var(--text-headline-xl-weight);
    letter-spacing: var(--text-headline-xl-tracking);
}

h3, .headline-lg {
    font-size: var(--text-headline-lg-size);
    line-height: var(--text-headline-lg-leading);
    font-weight: var(--text-headline-lg-weight);
    letter-spacing: var(--text-headline-lg-tracking);
}

h4, .headline-md {
    font-size: var(--text-headline-md-size);
    line-height: var(--text-headline-md-leading);
    font-weight: var(--text-headline-md-weight);
    letter-spacing: var(--text-headline-md-tracking);
}

h5, h6, .headline-sm {
    font-size: var(--text-headline-sm-size);
    line-height: var(--text-headline-sm-leading);
    font-weight: var(--text-headline-sm-weight);
    letter-spacing: var(--text-headline-sm-tracking);
}

/* ---- Body -------------------------------------------------------------- */
.body-lg, .body-md, .body-sm, .label-md, .label-sm, .caption {
    font-family: var(--font-sans);
}

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

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

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

/* ---- Labels & captions ------------------------------------------------- */
.label-md {
    font-size: var(--text-label-md-size);
    line-height: var(--text-label-md-leading);
    font-weight: var(--text-label-weight);
    letter-spacing: var(--text-label-md-tracking);
}

.label-sm {
    font-size: var(--text-label-sm-size);
    line-height: var(--text-label-sm-leading);
    font-weight: var(--text-label-weight);
    letter-spacing: var(--text-label-sm-tracking);
}

.caption {
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-leading);
    font-weight: var(--text-caption-weight);
}

/* Small uppercase section label ("eyebrow") */
.eyebrow {
    font-family: var(--font-sans);
    font-size: var(--text-label-sm-size);
    line-height: var(--text-label-sm-leading);
    font-weight: var(--text-label-weight);
    letter-spacing: var(--text-label-sm-tracking);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* ---- Text utilities ---------------------------------------------------- */
.text-muted {
    color: var(--color-text-muted);
}

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

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

.prose {
    max-width: var(--measure);
    text-wrap: pretty;
}

.prose > * + * {
    margin-top: var(--space-md);
}