<script setup lang="ts">
withDefaults(
  defineProps<{ pad?: number; surface?: 'surface' | 'elevated' | 'bg' }>(),
  { pad: 24, surface: 'surface' },
)
</script>

<template>
  <div class="card" :style="{ padding: pad + 'px', background: `var(--${surface})` }">
    <slot />
  </div>
</template>

<style scoped>
.card { border: 1px solid var(--border); border-radius: 8px; }
</style>
