/* ============================================================
   BLOCK — kpi.css
   Typography for Key Performance Indicator cards on the
   dashboard. Large numbers with small labels above them.

   Usage:
     <div class="kpi">
       <span class="kpi-label">Nesamaksāts kopā</span>
       <span class="kpi-value">€3,240</span>
     </div>

   Tinted variant — for status-colored KPI cards (e.g. overdue):
     <article class="card" data-variant="tinted" data-status="error">
       <div class="kpi">
         <span class="kpi-label">Kavēti</span>
         <span class="kpi-value">€680</span>
       </div>
     </article>
   ============================================================ */

.kpi {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.kpi-label {
  font-size: var(--step--2);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.kpi-value {
  font-size: var(--step-1);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* ── Tinted card — status-colored KPI ────────────────────── */

.card[data-variant="tinted"][data-status="error"] {
  background-color: var(--color-error-bg);
}

.card[data-variant="tinted"][data-status="error"] .kpi-label,
.card[data-variant="tinted"][data-status="error"] .kpi-value {
  color: var(--color-error-text);
}