@layer components {
  /* Status Badges */
  .badge {
    /* Customizable properties with fallbacks */
    --badge-background: var(--color-ink-lightest);
    --badge-color: var(--color-ink-light);

    display: inline-block;
    padding: 0.125em 0.5em;
    font-size: var(--text-caption);
    font-weight: 600;
    border-radius: var(--border-radius-pill);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    background: var(--badge-background);
    color: var(--badge-color);
  }

  .badge--success {
    --badge-background: var(--color-badge-success-bg);
    --badge-color: var(--color-badge-success-text);
  }

  .badge--warning {
    --badge-background: var(--color-badge-warning-bg);
    --badge-color: var(--color-badge-warning-text);
  }

  .badge--danger {
    --badge-background: var(--color-badge-danger-bg);
    --badge-color: var(--color-badge-danger-text);
  }

  .badge--info {
    --badge-background: var(--color-badge-info-bg);
    --badge-color: var(--color-badge-info-text);
  }

  .badge--neutral {
    --badge-background: var(--color-ink-lightest);
    --badge-color: var(--color-ink-light);
  }

  /* Tags (small inline badges, typically used in lists) */
  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space-quarter);
  }

  .tag {
    display: inline-block;
    padding: 0.125em 0.5em;
    font-size: var(--text-caption);
    border-radius: var(--border-radius-pill);
    background: var(--color-border);
    color: var(--color-ink);
  }
}