@layer components {

  /* ── Base ─────────────────────────────────────────────────────────── */

  .badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: var(--leading-normal);
    background-color: var(--color-surface-tertiary);
    color: var(--color-text-secondary);
    border-radius: 0;
  }

  /* ── Accent ──────────────────────────────────────────────────────── */

  .badge-accent {
    background-color: var(--color-accent-subtle);
    color: var(--color-accent-text);
  }

  /* ── Success ─────────────────────────────────────────────────────── */

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

  /* ── Warning ─────────────────────────────────────────────────────── */

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

  /* ── Error ───────────────────────────────────────────────────────── */

  .badge-error {
    background-color: var(--color-error-subtle);
    color: var(--color-error-text);
  }
}