Which value a CSS variable takes

What padding does the .card element get?

:root { --card-pad: 24px; }
.compact { --card-pad: 8px; }
.card { padding: var(--card-pad, 12px); }

<div class="compact">
  <div class="card">...</div>
</div>