/* metric-tile — @tokens: --metric-tile-gap, --metric-tile-padding, --metric-tile-radius

   A KPI tile: one big number + a label + an optional signed delta. A small
   elevated panel — sibling to `.hzo-card` but purpose-built for a single metric
   (dashboards, stat rows, pricing highlights). Primitive: CSS-only, not
   interactive (carries no control, so no focus/disabled idioms).

   Token-only: the panel surface + ink read semantic tokens so a dark archetype
   re-themes it from :root. The internal stack gap + padding have no dedicated
   semantic role, so they're component tokens with a literal-token fallback (the
   icon-button.css dial pattern). The value uses --font-number so the metric
   renders in the numeral face. */
.hzo-metric-tile {
    display: flex;
    flex-direction: column;
    gap: var(--metric-tile-gap, var(--space-sm));
    padding: var(--metric-tile-padding, var(--space-lg));
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--metric-tile-radius, var(--radius-panel));
    box-shadow: var(--shadow-sm);   /* soft rest elevation — matches card default */
}

/* The headline metric — largest, heaviest, numeral face, tight leading. */
.hzo-metric-tile__value {
    font-family: var(--font-number);
    font-size: var(--fs-700);
    font-weight: var(--fw-700);
    line-height: var(--lh-none);
    color: var(--text-heading);
}

/* The caption paired with the value — small, muted, tracked-out caps. */
.hzo-metric-tile__label {
    font-size: var(--fs-100);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Optional change indicator. Base is muted; direction modifiers recolor it with
   the matching state colour. Pair the sign/arrow in markup so meaning never
   rides on colour alone. */
.hzo-metric-tile__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--fs-100);
    font-weight: var(--fw-600);
    line-height: var(--lh-none);
    color: var(--text-muted);
}
.hzo-metric-tile__delta--positive { color: var(--success); }
.hzo-metric-tile__delta--negative { color: var(--error); }