/* ============================================================
   .uk-stat-label / .uk-stat-value / .uk-stat-sublabel
   — proposed canonical stat-typography subsystem (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the location-detail Network-Identity stat trio in
   `public/css/location-detail.css`:

     .stat-label                 -> .uk-stat-label
     .stat-value                 -> .uk-stat-value                     (default md size)
     .stat-value-small           -> .uk-stat-value .uk-stat-value--sm
     .stat-sublabel              -> .uk-stat-sublabel

   And — at Phase 3 migration — collapses the value/label pairs sprinkled
   across other surfaces:

     .network-stat .stat-value/.stat-label  in style.css     -> .uk-stat-value--lg .uk-stat-value--primary + .uk-stat-label
     .tools-index-stat-value/-label         in tools.css     -> .uk-stat-value--xl .uk-stat-value--primary + .uk-stat-label

   `.uk-hero-stat-value/-label` (hero.css) stays inside the hero subsystem
   — the hero pair carries hero-specific letter-spacing and colour treatment.

   Composes with: nothing — leaf primitive consumed by uk-stat-card
   (Tier 1.3) and any inline value+label cluster.

   The three classes are independent — drop the sublabel when you don't need
   it, drop the label when the value is self-describing. They're not a single
   block component; they are typographic atoms.
   ============================================================ */

/* ============================================
   Label — small uppercase tracked
   ============================================
   Tiny eyebrow above the value. Default colour is text-muted. Apply on
   `<dt>`, `<span>`, `<div>` — purely typographic, no layout opinions.
   ============================================ */
.uk-stat-label {
    color: var(--color-text-muted);
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: var(--line-snug);
}

/* ============================================
   Value — mono numeric, four sizes
   ============================================
   Default md = location-detail Network Identity (1.125rem mono semibold).
   Other sizes match the production usages they're replacing — sm for
   compact inline contexts, lg for the network-map overlay, xl for the
   tools-index landing splash.
   ============================================ */
.uk-stat-value {
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: var(--font-lg);
    font-weight: 600;
    line-height: var(--line-snug);
    word-break: break-all;
}

.uk-stat-value--sm {
    font-size: var(--font-md);
    font-weight: 600;
}

.uk-stat-value--md {
    font-size: var(--font-lg);
    font-weight: 600;
}

.uk-stat-value--lg {
    font-size: var(--font-3xl);
    font-weight: 800;
    line-height: 1;
    word-break: normal;
}

.uk-stat-value--xl {
    font-size: var(--font-4xl);
    font-weight: 800;
    line-height: var(--line-tight);
    letter-spacing: -0.02em;
    word-break: normal;
}

/* Tones — apply on the value, never on the label or sublabel */
.uk-stat-value--primary { color: var(--color-primary-light); }
.uk-stat-value--accent  { color: var(--color-accent); }
.uk-stat-value--success { color: var(--color-success); }

/* ============================================
   Sublabel — small mono note under the value
   ============================================
   Used for ASN org names, region codes, secondary identifiers — anything
   the consumer wants to attach as quiet context to the value.
   ============================================ */
.uk-stat-sublabel {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    line-height: var(--line-snug);
    word-break: break-all;
}