/* ═══════════════════════════════════════════════════════════════════
   utilities/typography-scale.css

   Wires the existing typography tokens (semantic.css:34-40) onto the
   real DOM elements that admin views actually use. Tokens exist but
   were unused before — every heading was getting Bootstrap defaults.

   Token references:
     --type-page-title    page-level <h1>
     --type-section-title section heading (<h2>, .card-header, dash-section-label)
     --type-card-title    card titles (.card-title)
     --type-body          body copy
     --type-body-small    small body
     --type-meta          metadata / labels / .text-muted small
     --type-code          inline + block code

   Loaded as a utility (after components) so it can compose against
   component-defined styles without breaking the cascade order.
   ═══════════════════════════════════════════════════════════════════ */

@layer utilities {
    /* Page-level title — admin show/index page <h1> wrappers. */
    h1,
    .page-title {
        font-size: var(--type-page-title);
    }

    /* Section heading — bare <h2> AND the card-header element. */
    h2,
    .section-title {
        font-size: var(--type-section-title);
    }

    /* Tertiary heading — <h3> + card titles. */
    h3,
    .card-title {
        font-size: var(--type-card-title);
        font-weight: var(--font-weight-semibold, 600);
        letter-spacing: 0.02em;
    }

    /* Body label / sub-line under titles. */
    .page-subtitle,
    .text-secondary-meta {
        font-size: var(--type-body-small);
    }

    /* Metadata — relative times, IDs, breadcrumbs, badge subtext. */
    .text-muted-meta,
    .meta-label,
    .breadcrumb-item {
        font-size: var(--type-meta);
    }

    /* Inline + block code. */
    code,
    pre {
        font-size: var(--type-code);
    }
}