/* ==========================================================================
   iCloneU — Shared typography utilities (Phase 3 of Knowledge UI harmonization)
   --------------------------------------------------------------------------
   Small set of class-based typography primitives so popup bodies and forms
   stop diverging on inline <h5> / <h6> / <p> font sizes, weights, and
   colors. Each class composes design tokens from tokens.css so light + dark
   themes work automatically.

   Pattern catalogue:

     .icu-section-title         15px / 600 / ink-1 — labels a group of
                                items in a popup body or card. Compact.

     .icu-section-title--lined  same + bottom divider (--icu-line). Use
                                when the section is separated from a
                                following block by a thin rule rather
                                than whitespace.

     .icu-form-label            13.5px / 500 / ink-1 — labels an input
                                field (URL textbox, name combobox).
                                Pair with the existing Bootstrap form
                                conventions when adjacent.

     .icu-help-text             12px / 400 / ink-3 — helper / hint text
                                under inputs, or muted meta lines.

     .icu-kicker                11px / 600 / ink-3 / uppercase /
                                letter-spacing — overline-style label
                                for "card kicker" pattern. Promoted
                                global from DashboardContent.razor.css
                                + HealthBanner.razor.css (formerly
                                duplicated as scoped CSS).

   These are intentionally utility classes (not BEM "block" classes).
   Apply directly to existing markup; combine with other modifiers
   (.text-center, color overrides, etc.) as needed.
   ========================================================================== */

.icu-section-title {
    font-family: var(--icu-font-sans);
    font-size: var(--icu-fs-md);             /* 15px */
    font-weight: var(--icu-fw-semibold);     /* 600 */
    color: var(--icu-ink);
    line-height: 1.3;
    margin: 0 0 var(--icu-sp-3) 0;            /* 0 0 12px 0 */
}

.icu-section-title--lined {
    padding-bottom: var(--icu-sp-1);          /* 4px */
    border-bottom: 1px solid var(--icu-line);
}

/* Use ALONGSIDE .icu-section-title when the title's group has heading
   semantics in a card or panel header (slightly larger). */
.icu-section-title--lg {
    font-size: var(--icu-fs-lg);              /* 18px */
    line-height: 1.25;
}

.icu-form-label {
    font-family: var(--icu-font-sans);
    font-size: var(--icu-fs-base);            /* 13.5px */
    font-weight: var(--icu-fw-medium);        /* 500 */
    color: var(--icu-ink);
    line-height: 1.4;
}

.icu-help-text {
    font-family: var(--icu-font-sans);
    font-size: var(--icu-fs-sm);              /* 12px */
    font-weight: var(--icu-fw-regular);
    color: var(--icu-ink-3);
    line-height: 1.45;
}

/* Overline "kicker" label — Dashboard's pattern. Use sparingly: above
   a KPI card or a rail section. Not for popup bodies (too small to
   read as a section divider). */
.icu-kicker {
    font-family: var(--icu-font-sans);
    font-size: var(--icu-fs-xs);              /* 11px */
    font-weight: var(--icu-fw-semibold);      /* 600 */
    color: var(--icu-ink-3);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}