/* KPI — le chiffre et son libellé ; la tuile est une carte qui le compose (`card p-4 kpi`).
   Référence : docs/design-system.md. */

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

.kpi__label {
  font-size: var(--text-11);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-secondary);
}

.kpi__value {
  font-size: var(--text-24);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-tight);
  color: var(--kpi-color, var(--color-text));
}

.kpi__unit {
  font-size: var(--text-14);
  font-weight: var(--weight-normal);
  color: var(--color-text-secondary);
}

.kpi__hint {
  font-size: var(--text-12);
  color: var(--color-text-secondary);
}

.kpi--sm .kpi__value {
  font-size: var(--text-20);
}

.kpi--lg .kpi__value {
  font-size: var(--text-30);
}

:is(.kpi--primary, .kpi--success, .kpi--warning, .kpi--danger, .kpi--info, .kpi--muted) {
  --kpi-color: var(--tone-text);
}

/* --- Tons (sortis de tone.css au passage au harness 0.13) : chaque ton pose les seules
   propriétés `--tone-*` que ce composant lit, d'après les tokens du ton. --- */

.kpi--success {
  --tone-text: var(--badge-success-text);
}

.kpi--warning {
  --tone-text: var(--badge-warning-text);
}

.kpi--danger {
  --tone-text: var(--badge-danger-text);
}

.kpi--info {
  --tone-text: var(--badge-info-text);
}

.kpi--primary {
  --tone-text: var(--color-primary);
}

.kpi--muted {
  --tone-text: var(--color-text-secondary);
}