frontend/src/components/KpiCard.jsx

export function KpiCard({ label, value, sub, tone, sign = '' }) {
  const toneClass =
    tone === 'good' ? 'text-good border-good/35'
    : tone === 'warn' ? 'text-warn border-warn/35'
    : tone === 'bad'  ? 'text-bad  border-bad/35'
    : 'text-ink border-border-soft'
  return (
    <div className={`rounded-xl border bg-elevated p-4 ${toneClass}`}>
      <div className="text-[0.68rem] font-semibold uppercase tracking-[0.1em]
                      text-subtle mb-1">{label}</div>
      <div className="font-serif font-medium text-[1.9rem] leading-[1.05]
                      tracking-tight">{sign}{value}</div>
      {sub && (
        <div className="text-[0.72rem] mt-1.5 text-subtle font-mono">
          {sub}
        </div>
      )}
    </div>
  )
}