/**
 * Replyfect Typography — semantic tiers (Admin + Dashboard)
 *
 * Usage:
 * - Prefer var(--rf-text-*) and var(--rf-weight-*) in page CSS; avoid raw rem/px sizes.
 * - font-weight 700 only on exceptions: .rf-type-stat, .rf-stat-value, .rf-locked-title,
 *   .rf-locked-stat-value, .rf-modal-title--lg, .rf-locked-hero-title (800). See docs/typography.md.
 * - Load order: design-tokens.css → typography.css → interactions.css → app-shell.css → page-chrome.css → dashboard/admin.css
 *
 * Tiers: T0 page-title | T1 section/card | T2 body | T3 secondary | T4 label | T5 overline | T6 mono | stat exception
 */

body.rf-app {
    font-family: var(--rf-font-sans);
}

.rf-app {
    font-size: var(--rf-text-base);
    line-height: var(--rf-leading-normal);
}

/* ——— Semantic utilities ——— */
.rf-type-page-title {
    font-size: var(--rf-text-xl);
    font-weight: var(--rf-weight-semibold);
    letter-spacing: var(--rf-tracking-tight);
    line-height: 1.3;
    color: var(--rf-text-primary);
}

.rf-type-section-title {
    font-size: var(--rf-text-base);
    font-weight: var(--rf-weight-semibold);
    color: var(--rf-text-primary);
}

.rf-type-body {
    font-size: var(--rf-text-base);
    font-weight: var(--rf-weight-regular);
    line-height: var(--rf-leading-normal);
    color: var(--rf-text-primary);
}

.rf-type-secondary {
    font-size: var(--rf-text-md);
    font-weight: var(--rf-weight-regular);
    line-height: var(--rf-leading-normal);
    color: var(--rf-text-muted);
}

.rf-type-label {
    font-size: var(--rf-text-sm);
    font-weight: var(--rf-weight-medium);
    letter-spacing: var(--rf-tracking-label);
    color: var(--rf-text-secondary);
}

.rf-type-overline {
    font-size: var(--rf-text-xs);
    font-weight: var(--rf-weight-medium);
    letter-spacing: var(--rf-tracking-label);
    text-transform: uppercase;
    color: var(--rf-text-muted);
}

.rf-type-mono {
    font-family: var(--rf-font-mono);
    font-size: var(--rf-text-md);
    font-weight: var(--rf-weight-medium);
}

.rf-type-stat {
    font-size: var(--rf-text-stat);
    font-weight: var(--rf-weight-bold);
    letter-spacing: var(--rf-tracking-tight);
    line-height: 1.1;
    color: var(--rf-text-primary);
}

/* ——— Bridge: existing class names (overridden downstream where page CSS adds layout) ——— */
.rf-page-title[data-rf-page-title],
.rf-page-chrome .rf-page-title {
    font-size: var(--rf-text-xl);
    font-weight: var(--rf-weight-semibold);
    letter-spacing: var(--rf-tracking-tight);
}

.rf-page-subtitle,
.rf-page-chrome .rf-page-subtitle {
    font-size: var(--rf-text-md);
    font-weight: var(--rf-weight-regular);
}

.rf-header-title,
.rf-app-shell .rf-dash-header .rf-header-title,
.rf-app-shell .rf-dash-header #pageTitle.rf-header-title {
    font-size: var(--rf-text-header);
    font-weight: var(--rf-weight-semibold);
}

.rf-card-title {
    font-size: var(--rf-text-base);
    font-weight: var(--rf-weight-semibold);
}

.rf-label {
    font-size: var(--rf-text-sm);
    font-weight: var(--rf-weight-medium);
    letter-spacing: var(--rf-tracking-label);
}

.rf-hint {
    font-size: var(--rf-text-md);
    font-weight: var(--rf-weight-regular);
}

.rf-field-desc,
.rf-card-lead,
.rf-drawer__lead,
.rf-meta {
    font-weight: var(--rf-weight-regular);
}

.rf-stat-value {
    font-size: var(--rf-text-stat);
    font-weight: var(--rf-weight-bold);
    letter-spacing: var(--rf-tracking-tight);
}

.rf-stat-unit {
    font-size: var(--rf-text-stat-unit);
    font-weight: var(--rf-weight-medium);
}