<section class="demo-section">
  <h2>Badges</h2>

  <h3>Variants</h3>
  <div class="demo-row">
    <span class="badge badge-primary">Primary</span>
    <span class="badge badge-secondary">Secondary</span>
    <span class="badge badge-accent">Accent</span>
    <span class="badge badge-success">Success</span>
    <span class="badge badge-warning">Warning</span>
    <span class="badge badge-info">Info</span>
    <span class="badge badge-danger">Danger</span>
  </div>

  <h3>Outline</h3>
  <div class="demo-row">
    <span class="badge badge-primary-outline">Primary outline</span>
    <span class="badge badge-success badge-outline">Success outline</span>
    <span class="badge badge-danger badge-outline">Danger outline</span>
  </div>

  <h3>Sizes</h3>
  <div class="demo-row">
    <span class="badge badge-primary badge-sm">Small</span>
    <span class="badge badge-primary">Default</span>
    <span class="badge badge-primary badge-lg">Large</span>
  </div>

  <h3>With icon</h3>
  <div class="demo-row">
    <span class="badge badge-success with-icon">
      <span class="vmk-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
      Verified
    </span>
    <span class="badge badge-danger with-icon">
      <span class="vmk-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
      Failed
    </span>
  </div>
</section>