/*
 * Site type hierarchy — use these for font-size in local CSS so the scale stays coherent.
 * Order: micro … display. Bootstrap body (1rem) matches --xbl-fs-body once html font-size applies.
 */
html {
    font-size: 100%;
}

:root {
    --xbl-fs-micro: 0.4375rem; /* chart thumb-only */
    --xbl-fs-mini: 0.5rem;
    --xbl-fs-overline: 0.5625rem; /* axis preview, tiny chart chrome */
    --xbl-fs-hint: 0.625rem; /* hover cards, “+N more” */
    --xbl-fs-caption: 0.6875rem; /* uppercase / metadata */
    --xbl-fs-compact: 0.75rem; /* dense lists, legend rows */
    --xbl-fs-ui: 0.8125rem; /* secondary controls, helper text */
    --xbl-fs-reduced: 0.875rem; /* grid headers, table secondary */
    --xbl-fs-near-body: 0.9375rem;
    --xbl-fs-callout: 0.95rem; /* short emphasis */
    --xbl-fs-body: 1rem; /* labels, inputs, default reading */
    --xbl-fs-body-em: 1.05rem; /* slightly stressed body */
    --xbl-fs-lead: 1.125rem; /* row emphasis */
    --xbl-fs-title-sm: 1.25rem; /* navbar brand, chart icon titles */
    --xbl-fs-title: 1.35rem; /* section / chart featured heading */
    --xbl-fs-title-lg: 1.5rem; /* loading hero line */
    --xbl-fs-display-sm: 1.625rem; /* legacy .titolo */
    --xbl-fs-display: 1.75rem; /* page heading icon */
    --xbl-fs-nav-touch: 1.2rem; /* mobile nav links */
}