/* MatchTide UI Foundation Stage 3: shared typography primitives.
   Opt-in classes only. */

.mt-ui-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--mt-ui-color-text-muted);
    font-size: var(--mt-ui-font-size-label);
    font-weight: var(--mt-ui-font-weight-bold);
    letter-spacing: var(--mt-ui-kicker-tracking);
    line-height: var(--mt-ui-line-height-meta);
    text-transform: uppercase;
}

.mt-ui-title {
    margin: 0;
    color: var(--mt-ui-color-text);
    font-family: var(--mt-ui-font-display);
    font-weight: var(--mt-ui-font-weight-black);
}

.mt-ui-title--display {
    font-size: var(--mt-ui-title-display-size);
    letter-spacing: -0.058em;
    line-height: var(--mt-ui-line-height-display);
}

.mt-ui-title--page,
.mt-ui-title--entity {
    font-size: var(--mt-ui-title-page-size);
    letter-spacing: -0.075em;
    line-height: var(--mt-ui-line-height-h1);
}

.mt-ui-title--section {
    font-size: var(--mt-ui-title-section-size);
    letter-spacing: -0.055em;
    line-height: var(--mt-ui-line-height-h2);
}

.mt-ui-lead {
    max-width: var(--mt-ui-readable-max);
    margin: var(--mt-ui-space-sm) 0 0;
    color: var(--mt-ui-color-text-secondary);
    font-size: var(--mt-ui-lead-size);
    font-weight: var(--mt-ui-font-weight-semibold);
    line-height: 1.45;
}

.mt-ui-lead--hero {
    font-size: var(--mt-ui-lead-hero-size);
}

.mt-ui-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt-ui-space-xs) var(--mt-ui-space-md);
    color: var(--mt-ui-color-text-muted);
    font-size: var(--mt-ui-font-size-meta);
    font-weight: var(--mt-ui-font-weight-semibold);
    letter-spacing: var(--mt-ui-meta-tracking);
    text-transform: uppercase;
}

.mt-ui-label {
    color: var(--mt-ui-color-text-muted);
    font-size: var(--mt-ui-font-size-label);
    font-weight: var(--mt-ui-font-weight-bold);
    letter-spacing: var(--mt-ui-kicker-tracking);
    text-transform: uppercase;
}

.mt-ui-value {
    color: var(--mt-ui-color-text);
    font-size: clamp(22px, 2vw, 28px);
    font-weight: var(--mt-ui-font-weight-black);
    letter-spacing: -0.05em;
    line-height: 1;
}

.mt-ui-caption,
.mt-ui-muted {
    color: var(--mt-ui-color-text-muted);
}