---
// CP-BASE-003 paragraph
interface Props {
  variant?: 'default' | 'lead' | 'muted';
}
const { variant = 'default' } = Astro.props;
---
<p class={`paragraph paragraph--${variant}`}>
  <slot />
</p>

<style>
  .paragraph {
    margin: 0 0 1rem;
    line-height: 1.6;
  }
  .paragraph--lead {
    font-size: 1.2rem;
  }
  .paragraph--muted {
    color: var(--color-text-muted, #5a5a5a);
  }
</style>