.metric-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-8);
  background-color: var(--gray-25);
  border: var(--border-width-medium) var(--border-style-solid) var(--gray-300);
  border-radius: var(--radius-xl);
}

.metric-card__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.metric-card__dot {
  flex: none;
  width: var(--spacing-4);
  height: var(--spacing-4);
  border-radius: var(--radius-full);
  background-color: var(--gray-400);
}

.metric-card__dot--primary { background-color: var(--primary-700); }
.metric-card__dot--warning { background-color: var(--warning-500); }
.metric-card__dot--info { background-color: var(--info-500); }
.metric-card__dot--success { background-color: var(--success-500); }
.metric-card__dot--error { background-color: var(--error-500); }

.metric-card__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--spacing-7);
  color: var(--gray-900);
}

.metric-card__value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--spacing-10);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--gray-900);
}

.metric-card__caption {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--spacing-7);
  color: var(--gray-500);
}

.metric-card--highlighted {
  background-color: var(--purple-25);
  border-color: var(--purple-300);
}

.metric-card--highlighted .metric-card__value {
  color: var(--primary-700);
}