@layer components {
  .card {
    border: var(--xf-border);
    border-radius: var(--xf-radius-md);
    background: var(--xf-surface);
    color: var(--xf-ink);
  }

  .card--raised { box-shadow: var(--xf-shadow-lg); }

  .card__header {
    padding: 1.25rem var(--space-lg);
    border-bottom: var(--xf-border);
  }

  .card__body { padding: 1.25rem var(--space-lg); }
}